package.json ファイルはプロジェクト構成ファイルであり、一般的な構成には、プロジェクトの起動の構成、コマンドのパッケージ化、依存パッケージの宣言が含まれます。 package.json ファイルは JSON オブジェクトであり、オブジェクトの各メンバーは現在のプロジェクトの設定です。
{
"name": "monorepo_frame",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"install:all": "sh script/installAll.sh",
"doc:api": "sh script/api_doc.sh",
"build:ui": "pnpm --filter @web/ui run build ",
"test:ui": "pnpm --filter @web/ui test ",
"test:core": "pnpm --filter @web/core test ",
"dev:exproject": "pnpm --filter @@zqxx/exproject dev ",
"build:demo": "rimraf docs/demo && pnpm --filter @web/demo build ",
"dev:rest": "pnpm --filter @web/rest dev ",
"build:rest": "rimraf docs/rest && pnpm --filter @web/rest build ",
"build:all": "pnpm run build:demo",
"publish": " sh script/publish.sh",
"prettier": "prettier --write ."
},
"workspaces": [
"packages/*"
],
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@element-plus/icons": "^0.0.11",
"@element-plus/icons-vue": "^2.0.10",
"@types/lodash-es": "*",
"@types/node": "^17.0.45",
"@vitejs/plugin-vue": "^4.0.0",
"@vitejs/plugin-vue-jsx": "^3.0.0",
"@vue/compiler-sfc": "^3.2.45",
"element-plus": "2.3.3",
"eslint": "^8.27.0",
"minimist": "^1.2.7",
"mockjs": "^1.1.0",
"sass": "^1.56.1",
"typescript": "^4.9.3",
"unplugin-auto-import": "^0.12.0",
"unplugin-vue-components": "^0.22.11",
"vite": "^4.0.0",
"vite-plugin-dts": "^1.7.1",
"vite-plugin-mock": "2.9.6",
"vite-plugin-top-level-await": "^1.2.4",
"vue": "^3.2.45",
"vue-router": "^4.1.6",
"vue-tsc": "^0.32.1"
},
"dependencies": {
"@element-plus/icons-vue": "^2.0.10",
"@element-plus/utils": "^0.0.5",
"@kangc/v-md-editor": "^2.3.15",
"@vueuse/core": "^8.9.4",
"codemirror": "^5.65.9",
"crypto-js": "^4.1.1",
"echarts": "^5.4.0",
"highlight.js": "^11.7.0",
"ismobilejs": "^1.1.1",
"mockjs": "^1.1.0",
"normalize.css": "^8.0.1",
"nprogress": "^0.2.0",
"pinia": "^2.0.35",
"pinia-plugin-persistedstate": "^3.1.0",
"terser": "^5.16.3",
"vite-plugin-inspect": "^0.7.7",
"vue-i18n": "9.1.10",
"vuex": "^4.1.0"
}
}
新しいプロジェクトをローカルにクローンする場合、npm install (yarn install) コマンドを実行して、プロジェクトに必要な依存関係ファイルをインストールする必要があります。このコマンドを実行すると、package.json ファイル内の構成情報に基づいて必要なモジュールが自動的にダウンロードされ、プロジェクトに必要な実行環境および開発環境が構成されます。
1. 必須の属性
package.json の 2 つの最も重要なフィールドは名前とバージョンです。これらは両方とも必須です。これらがないと、npm install コマンドは正常に実行できません。 npm では、package.json ファイルが名前とバージョン番号によって一意に識別されることが規定されています。
1.名前
name は分かりやすく、プロジェクトの名前であり、文字列です。名前フィールドに名前を付けるときは、次の点に注意する必要があります。
-
名前の長さは 214 文字以下である必要があり、「.」と「_」で始めることはできず、大文字を含めることはできません (これは、パッケージが npm で公開されるときに、これに基づいて独自の URL を取得するためです)属性があるため、URL セーフでない文字 (URL セーフでない) を含めることはできません)。
-
名前は、モジュールをインポートするためのパラメーターとして require("") に渡すことができるため、できるだけ短く、セマンティックである必要があります。
-
名前を他のモジュールの名前と同じにすることはできません。npm view コマンドを使用して、モジュール名が繰り返されているかどうかを確認できます。繰り返されていない場合は、404 メッセージが表示されます。
-
npm パッケージに対応するパッケージがある場合は、そのパッケージの詳細情報が表示されます。
-
実際、私たちが普段開発しているプロジェクトの多くは npm で公開されていないため、名前が標準かどうかはプロジェクトの通常の動作には影響しないため、それほど重要ではないかもしれません。 npm で公開する必要がある場合は、名前フィールドが要件を満たしている必要があります。
2.バージョン
version フィールドは、プロジェクト パッケージのバージョン番号を文字列で表します。プロジェクトが変更されるたびに、プロジェクトがリリースされるときに、プロジェクトのバージョン番号を同期して変更する必要があります。バージョン番号の使用仕様は以下のとおりです。
-
バージョン番号の命名はセマンティック バージョン 2.0.0 仕様に従い、形式は次のとおりです。「メジャー バージョン番号。マイナー バージョン番号。リビジョン番号」 通常、メジャー バージョン番号の変更は大幅な機能変更を意味し、マイナー バージョン番号の変更は新機能の追加を意味し、リビジョン番号の変更はいくつかのバグの修正を意味します。
-
特定のバージョンに大きな変更があり不安定で、期待される互換性要件を満たしていない可能性がある場合は、先行バージョンをリリースする必要があります。先行バージョンが合格した場合は、バージョン番号の末尾に追加され、接続されます。ドットで区切られた「-」記号 識別子とバージョンのコンパイル情報: 内部バージョン (アルファ)、公開テスト バージョン (ベータ) および候補バージョン (rc、リリース候補)。
2. 説明情報
package.jaon には、プロジェクトのパッケージ記述情報に関連する 5 つの設定フィールドがありますが、それぞれのフィールドの意味を見てみましょう。
1. 説明
description フィールドは、このプロジェクト パッケージを説明するために使用され、他の開発者が npm 検索でプロジェクト パッケージを発見できるようにする文字列です。
2. キーワード
キーワード フィールドは、このプロジェクト パッケージのキーワードを表す文字列の配列です。説明と同様に、これらはプロジェクト パッケージの露出を増やすために使用されます。以下は、eslint パッケージの説明とキーワードです。
3.著者
author は、名前が示すように、プロジェクト パッケージの作成者を示す作成者です。これには 2 つの形式があり、1 つは文字列形式です。
"author": "CUGGZ <[email protected]> (https://juejin.cn/user/3544481220801815)"
もう 1 つはオブジェクト形式です。
"author": {
"name" : "CUGGZ",
"email" : "[email protected]",
"url" : "https://juejin.cn/user/3544481220801815"
}
4. 貢献者
contributors はプロジェクト パッケージの貢献者を表します。author とは異なり、このフィールドはすべての貢献者を含む配列です。また、2 つの書き方があります。
"contributors": [
"CUGGZ0 <[email protected]> (https://juejin.cn/user/3544481220801815)",
"CUGGZ1 <[email protected]> (https://juejin.cn/user/3544481220801815)"
]
"contributors": [
{
"name" : "CUGGZ0",
"email" : "[email protected]",
"url" : "https://juejin.cn/user/3544481220801815"
},
{
"name" : "CUGGZ1",
"email" : "[email protected]",
"url" : "https://juejin.cn/user/3544481220801815"
}
]
5. ホームページ
Homepage はプロジェクトのホームページ アドレスであり、文字列です。
6. リポジトリ
リポジトリは、コード ストレージ ウェアハウスのアドレスを通常 2 つの記述形式で表します。 1つ目は文字列形式です
3. 依存関係の設定
通常、プロジェクトは 1 つまたは複数の外部依存関係パッケージに依存します。依存関係パッケージのさまざまな用途に応じて、依存関係、devDependency、peerDependency、bundleDependency、およびOptionalDependency の 5 つの属性で構成できます。それぞれの属性の意味を見てみましょう。
1. 依存関係
依存関係フィールドで宣言されるのは、プロジェクトの実稼働環境に必要な依存関係パッケージです。 npm または Yarn を使用して npm パッケージをインストールすると、npm パッケージはこの構成項目に自動的に挿入されます。
npm install <PACKAGENAME>
yarn add <PACKAGENAME>
依存関係をインストールするときに --save パラメーターを使用すると、新しくインストールされた npm パッケージも依存関係属性に書き込まれます。
npm install --save <PACKAGENAME>
このフィールドの値はオブジェクトです。オブジェクトの各メンバーは、モジュール名と、依存するモジュールとそのバージョン範囲を示す、対応するバージョン要件で構成されます。
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
},
ここでの各構成はキーと値のペアであり、キーはモジュール名を表し、値はモジュールのバージョン番号を表します。バージョン番号は「メジャー バージョン番号. マイナー バージョン番号. リビジョン番号」: の形式に従います。
-
「修正バージョン:」 上記の反応スクリプトのバージョン 4.0.3 は修正バージョンです。インストール中には、この指定されたバージョンのみがインストールされます。
-
「チルダ:」 たとえば、~ 4.0.3 は、最新バージョンの 4.0.x (4.0.3 以上) をインストールすることを意味し、インストール中に変更されないことを意味します。メジャー バージョン番号とマイナー バージョン番号;
-
「番号を挿入:」 たとえば、^17.0.2 より上のバージョンの React は、最新バージョン 17.x.x (17.0.2 以上) をインストールすることを意味します。つまり、インストールしてもメジャー バージョン番号は変更されません。メジャー バージョン番号が 0 の場合、キャレットとチルダは同じように動作します。
-
最新: 最新バージョンをインストールします。
運用環境での予期せぬ問題を避けるために、テスト依存関係や移行依存関係を依存関係に含めないように注意してください。
2. devDependency
devDependency は、開発を支援するために、Webpack、Eslint、Babel などの開発フェーズ中に必要な依存関係パッケージを宣言します。これらは、運用環境でコードを実行せずに開発デバイスにインストールするだけでよいという点で依存関係とは異なります。これらのパッケージは、パッケージがオンラインのときは必要ないため、これらの依存関係を devDependency に追加できます。これらの依存関係は、npm install がローカルに指定されている場合でもインストールおよび管理されますが、運用環境にはインストールされません。
npm または Yarn を使用してパッケージをインストールする場合、次のパラメーターを指定すると、新しくインストールされた npm パッケージがこのリストに自動的に挿入されます。
npm install --save-dev <PACKAGENAME>
yarn add --dev <PACKAGENAME>
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1"
}
3. ピアの依存関係
場合によっては、プロジェクトとそれが依存するモジュールが別のモジュールに同時に依存しますが、依存するバージョンが異なります。たとえば、プロジェクトはモジュール A とモジュール B のバージョン 1.0 に依存し、モジュール A 自体はモジュール B のバージョン 2.0 に依存します。ほとんどの場合、これは問題ではなく、B モジュールの両方のバージョンが共存して同時に実行できます。ただし、問題が発生する状況があります。つまり、この依存関係がユーザーに公開されることになります。
最も一般的なシナリオはプラグインです。たとえば、モジュール A はモジュール B のプラグインです。ユーザーがインストールした B モジュールはバージョン 1.0 ですが、A プラグインはバージョン 2.0 の B モジュールでのみ使用できます。このとき、ユーザーがBのバージョン1.0のインスタンスをAに渡すと問題が発生します。したがって、テンプレートのインストール中に、A と B を一緒にインストールする場合、B は 2.0 モジュールである必要があることをユーザーに通知するメカニズムが必要です。
peerDependency フィールドは、プラグインが必要とするメイン ツールのバージョンを指定するためにプラグインによって使用されます。
"name": "chai-as-promised",
"peerDependencies": {
"chai": "1.x"
}
上記のコードは、chai-as-promized モジュールをインストールするときに、メイン プログラムの chai も一緒にインストールする必要があり、chai のバージョンが 1.x である必要があることを指定しています。プロジェクトで指定された依存関係が Chai のバージョン 2.0 である場合、エラーが報告されます。
npm バージョン 3.0 以降、peerDependency はデフォルトでインストールされなくなったことに注意してください。
4. オプションの依存関係
パッケージが見つからない場合、またはパッケージのインストールが失敗した場合に npm を実行し続ける必要がある場合は、そのパッケージをOptionalDependency オブジェクトに置くことができます。optionalDependency オブジェクト内のパッケージは、依存関係内の同じ名前のパッケージを上書きします。それを 1 か所で行うには、セットアップするだけです。
オプションの依存関係が正常にインストールされない可能性があるため、例外処理を行う必要があることに注意してください。そうしないと、この依存関係を取得するときに、取得できない場合はエラーが報告されます。
5.バンドルされた依存関係
上記の依存関係関連の設定項目はすべてオブジェクトであり、bundleDependency の設定項目は配列であり、一部のモジュールは配列で指定することができ、本パッケージのリリース時にこれらのモジュールもパッケージ化されます。
このフィールド配列の値は、依存関係と devDependency で宣言されたパッケージである必要があることに注意してください。
6. エンジン
古いプロジェクトをメンテナンスする場合、npm パッケージのバージョンや Node のバージョンに特別な要件があり、条件が満たされていない場合、プロジェクトが実行できない場合があります。プロジェクトをそのまま使用できるようにするには、エンジン フィールドに特定のバージョン番号を指定します。
"engines": {
"node": ">=8.10.3 <12.13.0",
"npm": ">=6.9.0"
}
なお、エンジンは単なる説明であり、ユーザーがインストールしたバージョンが要件を満たしていなくても、依存パッケージのインストールには影響しません。