package.json と最も一般的なスクリプトフィールドについて話しましょう

かわいい子の自己救済
私のオープンソースツールライブラリ: mdollar
の後に学ぶ準備をする: unocss、ブラウザーのガベージコレクションメカニズム (v8)

序文

現在のフロントエンド開発はvueとreactの3大フレームワークに置き換わり、日々の開発ではpackage.jsonファイルに触れることになりますが、本当に理解していますか？このファイル？

package.jsonとは何ですか

package.json ファイルは、Node.js プロジェクトのメタデータと依存関係情報が含まれる JSON 形式のファイルです。これは、Node.js システムの中核であり、npm の構成ファイルです。package.json ファイルを使用すると、プロジェクトに必要な外部モジュールを簡単に管理およびインストールしたり、コマンドラインで実行できるいくつかのスクリプトを定義したりできます。また、package.json ファイルにより、プロジェクトの名前、説明、作成者、ライセンスなどに関する情報が提供されるため、他の開発者がプロジェクトを見つけやすくなり、使用しやすくなります。

package.jsonファイル構造の詳細説明

package.json ファイルはキーと値のペアで構成されるオブジェクトであり、各キーと値のペアには特定の意味と役割があります。package.json ファイルの例を次に示します。

{
    
    
  "name": "my-project",
  "version": "1.0.0",
  "description": "一个测试项目",
  "main": "index.js",
  "scripts": {
    
    
    "start": "node index.js",
    "test": "mocha"
  },
  "dependencies": {
    
    
    "lodash": "^4.17.21"
  },
  "devDependencies": {
    
    
    "mocha": "^9.1.3"
  },
  "author": "作者名字 <[email protected]>",
  "license": "MIT",
  "homepage": "https://example.com/my-project",
  "bugs": {
    
    
    "url": "https://github.com/myname/my-project/issues"
  },
  "repository": {
    
    
    "type": "git",
    "url": "https://github.com/myname/my-project.git"
  }
}

name: これはパッケージの名前です。小文字で 1 つの単語のみを含める必要があります。ハイフンとアンダースコアを含めることができます。パッケージを公開する予定がある場合、バージョンフィールドとともに一意の識別子を形成するため、このフィールドは必須です。
version: これはパッケージのバージョン番号であり、セマンティックバージョン仕様 (つまり、xxx の形式) に準拠する必要があります。このフィールドは、名前フィールドとともに一意の識別子を形成するため、パッケージを公開する場合にも必須です。パッケージを公開する予定がない場合、両方のフィールドはオプションです。
description: これはパッケージの紹介であり、文字列です。このフィールドは、他の人が npm 検索でパッケージを発見するのに役立ちます。
main: これはパッケージのエントリファイルで、通常はindex.jsです。このファイルは、他の人が require() 関数を使用してパッケージを導入するときにロードされます。
scripts: これは、npm run コマンドを通じて実行できるいくつかのスクリプトを定義するために使用されるオブジェクトです。たとえば、開始スクリプトはパッケージを開始する方法を定義し、テストスクリプトはパッケージをテストする方法を定義します。
依存関係: これは、パッケージが依存する他のパッケージとそのバージョン範囲をリストするオブジェクトです。これらの依存関係は、パッケージをインストールまたは公開するときに自動的にインストールされます。たとえば、lodash は一般的に使用されるツールライブラリであり、そのバージョン範囲を ^4.17.21 として指定できます。これは、4.17.21 以上 5.0.0 未満の最新バージョンをインストールすることを意味します。
devDependency: これは、開発またはテスト中にパッケージが依存する他のパッケージとそのバージョン範囲をリストするために使用されるオブジェクトでもあります。これらの依存関係は開発環境にのみインストールされ、運用環境には影響しません。たとえば、mocha は一般的に使用されるテストフレームワークであり、そのバージョン範囲を ^9.1.3 として指定できます。
author: これはパッケージの作成者情報であり、文字列またはオブジェクトにすることができます。文字列の場合は、通常、作成者の名前と電子メールアドレスが含まれます。オブジェクトの場合は、名前、電子メール、URL などのフィールドを含めることができます。
ライセンス: これはパッケージが使用するライセンスのタイプで、通常は文字列です。たとえば、MIT は MIT ライセンスを使用することを意味します。
ホームページ: これはパッケージのプロジェクトホームページアドレスで、通常は文字列です。たとえば、https://example.com/my-project は、プロジェクトのホームページが example.com にあることを意味します。
bugs: これは、パッケージの問題トラッカーアドレス、またはバグを報告するための電子メールアドレスです。文字列またはオブジェクトにすることができます。文字列の場合は、通常、問題トラッカーのアドレスを表します。オブジェクトの場合は、url と電子メールの 2 つのフィールドを含めることができます。
リポジトリ: これは、パッケージが配置されているコードリポジトリのアドレスとタイプで、通常はオブジェクトです。type と URL の 2 つのフィールドを含めることができます。type は、git などのウェアハウスのタイプを表します。url は、https://github.com/myname/my-project.git などのウェアハウスのアドレスを表します。

スクリプトの詳しい説明

scripts はおそらく私たちが最もよく使うフィールドです。scripts フィールドについて詳しく話しましょう。scripts フィールドはオブジェクトです。その各属性はスクリプトコマンドの名前であり、対応する値はスクリプトコマンドです。処刑される。例えば：

{
    
    
  "scripts": {
    
    
    "build": "node build.js",
    "test": "mocha test/*.js",
    "start": "node index.js"
  }
}

ここでは、build、test、start の 3 つのスクリプトコマンドが定義されています。npm run build を通じてノード build.js を実行し、npm run test を通じて mocha test/*.js を実行し、npm run start を通じてノードindex.js を実行できます。

npm run は現在のプロジェクトの下にある node_modules/.bin ディレクトリを PATH 環境変数に追加するので、完全なパスを指定せずにローカルにインストールされたモジュールのコマンドを直接使用できることに注意してください。たとえば、上記の例では、node_modules/.bin/mocha を記述せずに、mocha を直接使用できます。

スクリプトフィールドの特別なスクリプトコマンドは何ですか?

カスタムスクリプトコマンドに加えて、スクリプトフィールドでは、特定の状況下で自動的に実行されるいくつかの特別なスクリプトコマンドもサポートされています。これらの特別なスクリプトコマンドは次のとおりです。

start: npm start を直接実行すると、このスクリプトコマンドが実行されます。通常、プロジェクトを開始するために使用されます。
test: npm test を直接実行すると、このスクリプトコマンドが実行されます。通常はテストを実行するために使用されます。
install: 現在のプロジェクトで npm install を実行すると、インストールの完了後にこのスクリプトコマンドが実行されます。通常、インストール後にいくつかの初期化操作を実行するために使用されます。
uninstall: 現在のプロジェクトで npm uninstall を実行すると、アンインストールの完了後にこのスクリプトコマンドが実行されます。通常、アンインストール後にクリーンアップ操作を実行するために使用されます。
public: 現在のプロジェクトで npm public を実行すると、このスクリプトコマンドは公開前に実行されます。通常は、リリース前の検査または準備作業を行うために使用されます。
prexxx と postxxx: スクリプトコマンドを実行するとき、対応する prexxx または postxxx スクリプトコマンド (xxx は任意の名前) がある場合、prexxx または postxxx スクリプトコマンドはスクリプトコマンドの前後で実行されます。通常、いくつかの前後の操作を実行するために使用されます。

スクリプトフィールドの利点は何ですか?

スクリプトフィールドを使用すると、次の利点があります。

一部の複雑なコマンドは簡略化できます。たとえば、node build.js --envproduction --minify --sourcemap などの代わりに npm run build を使用できます。
異なるオペレーティングシステムや環境でコマンドを統合できます。たとえば、rm -rf dist や del /s /q dist の代わりに npm run clean を使用できます。
npm によって提供されるいくつかの変数とパラメーターを使用できます。たとえば、npm_package_name を使用して package.json の name フィールドの値を取得したり、npm_config_xxx を使用して npm 構成の xxx フィールドの値を取得したりできます。
他のスクリプトコマンドを簡単に呼び出すことができます。たとえば、npm run xxx を使用して script フィールドで定義された xxx script コマンドを呼び出したり、npm explore – npm run xxx を使用して依存パッケージで定義された xxx script コマンドを呼び出すことができます。

スクリプト欄の注意点は何ですか？

スクリプトフィールドを使用する場合は、いくつかの考慮事項があります。

スクリプトコマンドにスペースまたは特殊文字が含まれる場合は、「echo "Hello World"」または「echo "Hello World"」のように二重引用符または一重引用符で囲む必要があります。
スクリプトコマンドで複数のコマンドを使用する必要がある場合は、「echo "Hello" && echo "World"」または「echo "Hello" || echo "World"」のように、&& または || を使用してそれらを接続する必要があります。。
スクリプトコマンドで環境変数を使用する必要がある場合は、「echo $PATH」または「echo %PATH%」のように、$ または % で囲む必要があります。
スクリプトコマンドでコメントを使用する必要がある場合は、「# これはコメントです」または「// これはコメントです」のように、# または // で始める必要があります。

スクリプトフィールドの例は何ですか?

最後に、インスピレーションと参考にしていただけるよう、スクリプトフィールドの例をいくつか見てみましょう。

例 1: スクリプトフィールドを使用してプロジェクトをコンパイルおよびパッケージ化する

TypeScript と Webpack を使用して開発されたプロジェクトがあると仮定すると、script フィールドで次のスクリプトコマンドを定義できます。

{
    
    
  "scripts": {
    
    
    "build": "npm run clean && npm run compile && npm run bundle",
    "clean": "rimraf dist",
    "compile": "tsc",
    "bundle": "webpack"
  }
}

このようにして、npm run build を通じてワンクリックでプロジェクトをコンパイルしてパッケージ化できます。で：

ビルドは、クリーン、コンパイル、バンドルスクリプトコマンドを順番に実行する結合スクリプトコマンドです。
clean は、rimraf モジュール (rm -rf と同様) を使用して dist ディレクトリを削除するクリーニングスクリプトコマンドです。
COMPILE は、tsc モジュール (TypeScript コンパイラ) を使用して src ディレクトリ内のすべての .ts ファイルをコンパイルし、dist ディレクトリに出力するコンパイル済みスクリプトコマンドです。
Bundle は、webpack モジュール (パッケージングツール) を使用して dist ディレクトリ内のすべての .js ファイルをパッケージ化し、dist ディレクトリに出力するパッケージングスクリプトコマンドです。

例 2: スクリプトフィールドを使用してプロジェクトを実行およびデバッグする

Express と Nodemon を使用して開発されたプロジェクトがあると仮定すると、スクリプトフィールドで次のスクリプトコマンドを定義できます。

{
    
    
  "scripts": {
    
    
    "start": "node index.js",
    "dev": "nodemon index.js",
    "debug": "node --inspect index.js"
  }
}

このようにして、npm start、npm run dev、または npm run debug を通じてプロジェクトを実行およびデバッグできます。で：

start は、ノードモジュールを使用して、プロジェクトのエントリファイルであるindex.js ファイルを実行する起動スクリプトコマンドです。
dev は開発スクリプトコマンドです。nodemon モジュールを使用してindex.js ファイルを実行し、ファイルが変更されると自動的に再起動します。これにより、変更の効果をリアルタイムで確認できます。
debug はデバッグスクリプトコマンドです。ノードモジュールの –inspect パラメータを使用して、index.js ファイルを実行し、デバッグモードをオンにします。これにより、Chrome DevTools または他のデバッグツールを使用してブレークポイント、ステップスルー、およびデバッグを行うことができます。変数などを表示します。

例 3: スクリプトフィールドを使用してプロジェクトをテストおよび公開する

Jest と npm-publish-git-tag を使用して開発されたプロジェクトがあると仮定すると、スクリプトフィールドで次のスクリプトコマンドを定義できます。

{
    
    
  "scripts": {
    
    
    "test": "jest",
    "prepublishOnly": "npm test",
    "publish": "npm-publish-git-tag"
  }
}

このようにして、npm test、npm pub、または npm run pub を通じてプロジェクトをテストして公開できます。で：

test は、jest モジュール (テストフレームワーク) を使用して、test ディレクトリ内のすべてのテストケースを実行し、テスト結果とカバレッジレポートを出力するテストタイプのスクリプトコマンドです。
prepublishOnly は、公開前にすべてのテストに合格することを確認するために、npm 公開前に実行されるプレリリーススクリプトコマンドです。
publish は公開スクリプトコマンドです。npm-publish-git-tag モジュール (公開ツール) を使用してプロジェクトを公開し、package.json の version フィールドと同じ git タグを自動的に作成して、それをプッシュします。遠隔倉庫。

結論

以上が package.json フィールドと scripts フィールドの紹介でしたので、皆様のお役に立てれば幸いです。スクリプトフィールドは非常に強力で柔軟な機能で、package.json ファイルでさまざまなスクリプトコマンドを定義および管理できるため、開発およびメンテナンスプロジェクトの効率と品質が向上します。もちろん、スクリプトの分野には他にも多くの使用法やテクニックがあるので、すべてをリストすることはしません。興味のある友人は自分で調べて試してみてください。

私のブログ記事を読んでいただきありがとうございます。役に立ったと思われる場合は、「いいね！」をするか、コメントを残してください。間違いや不足があると思われる場合は、私に指摘してください。すぐに修正し、改善します。最後に、皆さんがプログラミングを楽しんでいることを祈っています。