package.jsonガイド

package.jsonファイルは、Node.jsエコシステムに基づく多くのアプリコードベースの重要な要素です。

JavaScriptを使用している場合、またはJavaScriptプロジェクト、Node.js、またはフロントエンドプロジェクトを操作したことがある場合は、確かにpackage.jsonファイル。

何のために?あなたはそれについて何を知っておくべきですか、そしてあなたがそれでできるクールなことのいくつかは何ですか?

ザ・package.jsonファイルは、プロジェクトのマニフェストのようなものです。それは完全に無関係で、多くのことをすることができます。たとえば、ツールの構成の中央リポジトリです。それはまたどこでもありますnpmそしてyarnインストールしたパッケージの名前とバージョンを保存します。

ファイル構造

以下にpackage.jsonファイルの例を示します。

{

}

空っぽです!何を含めるべきかについての固定要件はありませんpackage.jsonアプリケーション用のファイル。唯一の要件は、JSON形式を尊重することです。そうでない場合、プログラムでプロパティにアクセスしようとするプログラムで読み取ることができません。

配布したいNode.jsパッケージを構築している場合npm物事は根本的に変化し、他の人がそれを使用するのに役立つ一連のプロパティが必要です。これについては後で詳しく説明します。

これは別のpackage.jsonです:

{
  "name": "test-project"
}

それは定義しますnameこのファイルが存在するのと同じフォルダーに含まれているアプリまたはパッケージの名前を示すプロパティ。

これははるかに複雑な例で、サンプルのVue.jsアプリケーションからこれを抽出しました。

{
  "name": "test-project",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "main": "src/main.js",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "unit": "jest --config test/unit/jest.conf.js --coverage",
    "test": "npm run unit",
    "lint": "eslint --ext .js,.vue src test/unit",
    "build": "node build/build.js"
  },
  "dependencies": {
    "vue": "^2.5.2"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-eslint": "^8.2.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-jest": "^21.0.2",
    "babel-loader": "^7.1.1",
    "babel-plugin-dynamic-import-node": "^1.2.0",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-plugin-transform-vue-jsx": "^3.5.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "chalk": "^2.0.1",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "eslint": "^4.15.0",
    "eslint-config-airbnb-base": "^11.3.0",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-import-resolver-webpack": "^0.8.3",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-vue": "^4.0.0",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.4",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "html-webpack-plugin": "^2.30.1",
    "jest": "^22.0.4",
    "jest-serializer-vue": "^0.3.0",
    "node-notifier": "^5.1.2",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "ora": "^1.2.0",
    "portfinder": "^1.0.13",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.8",
    "postcss-url": "^7.2.1",
    "rimraf": "^2.6.0",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^0.5.8",
    "vue-jest": "^1.0.2",
    "vue-loader": "^13.3.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.5.2",
    "webpack": "^3.6.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.0"
  },
  "engines": {
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

があるたくさんここで起こっていることの:

  • nameアプリケーション/パッケージ名を設定します
  • version現在のバージョンを示します
  • descriptionアプリ/パッケージの簡単な説明です
  • mainアプリケーションのエントリポイントを設定します
  • privateに設定されている場合trueアプリ/パッケージが誤って公開されるのを防ぎますnpm
  • scripts実行できるノードスクリプトのセットを定義します
  • dependenciesのリストを設定しますnpm依存関係としてインストールされたパッケージ
  • devDependenciesのリストを設定しますnpm開発依存関係としてインストールされたパッケージ
  • enginesこのパッケージ/アプリが動作するノードのバージョンを設定します
  • browserslistサポートするブラウザ(およびそのバージョン)を指定するために使用されます

これらのプロパティはすべて、いずれかによって使用されますnpmまたは私たちが使用できる他のツール。

プロパティの内訳

このセクションでは、使用できるプロパティについて詳しく説明します。私は「パッケージ」と呼んでいますが、パッケージとして使用しないローカルアプリケーションにも同じことが当てはまります。

これらのプロパティのほとんどは、https://www.npmjs.com/、その他のコードと相互作用するスクリプトによるnpmまたは他の人。

name

パッケージ名を設定します。

例:

"name": "test-project"

名前は214文字未満である必要があり、スペースを含めることはできません。小文字、ハイフン(-)またはアンダースコア(_)。

これは、パッケージがに公開されたときにnpm、このプロパティに基づいて独自のURLを取得します。

このパッケージをGitHubで公開している場合、このプロパティの適切な値はGitHubリポジトリ名です。

author

パッケージの作成者名を一覧表示します

例:

{
  "author": "Flavio Copes <[email protected]> (https://flaviocopes.com)"
}

この形式でも使用できます。

{
  "author": {
    "name": "Flavio Copes",
    "email": "[email protected]",
    "url": "https://flaviocopes.com"
  }
}

contributors

作成者だけでなく、プロジェクトには1人以上の寄稿者を含めることができます。このプロパティは、それらをリストする配列です。

例:

{
  "contributors": [
    "Flavio Copes <[email protected]> (https://flaviocopes.com)"
  ]
}

この形式でも使用できます。

{
  "contributors": [
    {
      "name": "Flavio Copes",
      "email": "[email protected]",
      "url": "https://flaviocopes.com"
    }
  ]
}

bugs

パッケージ課題トラッカーへのリンク、おそらくGitHub課題ページ

例:

{
  "bugs": "https://github.com/flaviocopes/package/issues"
}

homepage

パッケージのホームページを設定します

例:

{
  "homepage": "https://flaviocopes.com/package"
}

version

パッケージの現在のバージョンを示します。

例:

"version": "1.0.0"

このプロパティは、バージョンのセマンティックバージョニング(semver)表記に従います。つまり、バージョンは常に3つの数値で表されます。x.x.x

最初の番号はメジャーバージョン、2番目はマイナーバージョン、3番目はパッチバージョンです。

これらの数値には意味があります。バグを修正するだけのリリースはパッチリリースであり、下位互換性のある変更を導入するリリースはマイナーリリースであり、メジャーリリースには重大な変更が含まれる可能性があります。

license

パッケージのライセンスを示します。

例:

"license": "MIT"

keywords

このプロパティには、パッケージの機能に関連するキーワードの配列が含まれています。

例:

"keywords": [
  "email",
  "machine learning",
  "ai"
]

これは、類似のパッケージをナビゲートするとき、またはhttps://www.npmjs.com/ウェブサイト。

description

このプロパティには、パッケージの簡単な説明が含まれています

例:

"description": "A package to work with strings"

これは、パッケージをに公開する場合に特に便利です。npm人々がパッケージが何であるかを知ることができるように。

repository

このプロパティは、このパッケージリポジトリの場所を指定します。

例:

"repository": "github:flaviocopes/testing",

に注意してくださいgithubプレフィックス。焼き付けられた他の人気のあるサービスがあります:

"repository": "gitlab:flaviocopes/testing",
"repository": "bitbucket:flaviocopes/testing",

バージョン管理システムを明示的に設定できます。

"repository": {
  "type": "git",
  "url": "https://github.com/flaviocopes/testing.git"
}

さまざまなバージョン管理システムを使用できます。

"repository": {
  "type": "svn",
  "url": "..."
}

main

パッケージのエントリポイントを設定します。

このパッケージをアプリケーションにインポートすると、アプリケーションはそこでモジュールのエクスポートを検索します。

例:

"main": "src/main.js"

private

に設定されている場合trueアプリ/パッケージが誤って公開されるのを防ぎますnpm

例:

"private": true

scripts

実行できるノードスクリプトのセットを定義します

例:

"scripts": {
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  "start": "npm run dev",
  "unit": "jest --config test/unit/jest.conf.js --coverage",
  "test": "npm run unit",
  "lint": "eslint --ext .js,.vue src test/unit",
  "build": "node build/build.js"
}

これらのスクリプトはコマンドラインアプリケーションです。あなたは呼び出すことによってそれらを実行することができますnpm run XXXXまたはyarn XXXX、 どこXXXXコマンド名です。例:npm run dev

コマンドには任意の名前を使用でき、スクリプトは文字通り任意の名前を実行できます。

dependencies

のリストを設定しますnpm依存関係としてインストールされたパッケージ。

npmまたはyarnを使用してパッケージをインストールする場合:

npm install <PACKAGENAME>
yarn add <PACKAGENAME>

そのパッケージは自動的にこのリストに挿入されます。

例:

"dependencies": {
  "vue": "^2.5.2"
}

devDependencies

のリストを設定しますnpm開発の依存関係としてインストールされたパッケージ。

彼らはとは異なりますdependenciesこれは、開発マシンにのみインストールすることを目的としており、本番環境でコードを実行する必要がないためです。

npmまたはyarnを使用してパッケージをインストールする場合:

npm install --dev <PACKAGENAME>
yarn add --dev <PACKAGENAME>

そのパッケージは自動的にこのリストに挿入されます。

例:

"devDependencies": {
  "autoprefixer": "^7.1.2",
  "babel-core": "^6.22.1"
}

engines

このパッケージ/アプリが動作するNode.jsおよびその他のコマンドのバージョンを設定します

例:

"engines": {
  "node": ">= 6.0.0",
  "npm": ">= 3.0.0",
  "yarn": "^0.13.0"
}

browserslist

サポートするブラウザ(およびそのバージョン)を指定するために使用されます。これは、Babel、Autoprefixer、およびその他のツールによって参照され、ターゲットのブラウザーに必要なポリフィルとフォールバックのみを追加します。

例:

"browserslist": [
  "> 1%",
  "last 2 versions",
  "not ie <= 8"
]

この構成は、すべてのブラウザーの最新の2つのメジャーバージョンを少なくとも1%の使用率でサポートすることを意味します(CanIUse.com統計)、IE8以下を除く。

((続きを見る

コマンド固有のプロパティ

ザ・package.jsonファイルは、たとえばBabel、ESLintなどのコマンド固有の構成をホストすることもできます。

それぞれに、次のような特定のプロパティがあります。eslintConfigbabelその他。これらはコマンド固有であり、それぞれのコマンド/プロジェクトのドキュメントでそれらの使用方法を見つけることができます。

パッケージバージョン

上記の説明で、次のようなバージョン番号を見てきました。~3.0.0または^0.13.0。それらはどういう意味ですか、そして他にどのバージョン指定子を使用できますか?

その記号は、その依存関係から、パッケージが受け入れる更新を指定します。

semver(セマンティックバージョニング)を使用すると、すべてのバージョンが3桁で、最初はメジャーリリース、2番目はマイナーリリース、3番目はパッチリリースであるため、次のルールがあります。

  • ~:あなたが書くなら~0.13.0、パッチリリースのみを更新したい:0.13.1大丈夫ですが0.14.0ではありません。
  • ^:あなたが書くなら^0.13.0、パッチとマイナーリリースを更新したい:0.13.10.14.0等々。
  • *:あなたが書くなら*、つまり、メジャーバージョンのアップグレードを含むすべての更新を受け入れることを意味します。
  • >:指定したバージョンよりも高いバージョンを受け入れます
  • >=:指定したバージョン以上のバージョンを受け入れます
  • <=:指定したバージョン以下のバージョンを受け入れます
  • <:指定したバージョンよりも低いバージョンを受け入れます

他のルールもあります:

  • 記号なし:指定した特定のバージョンのみを受け入れます
  • latest:利用可能な最新バージョンを使用したい

上記のほとんどを次のように範囲内で組み合わせることができます。1.0.0 || >=1.1.0 <1.2.0、1.0.0または1.1.0以降の1つのリリースを使用しますが、1.2.0よりも低くなります。

私の無料ダウンロードNode.jsハンドブック


その他のノードチュートリアル: