NPMスクリプトを使用したフロントエンド開発ワークフローオートメーション

NPMスクリプトを使用して、複雑なツールなしでフロントエンド開発オートメーションワークフローを有効にします。 1.保守性を向上させるために、start、dev、build、lint、test、deployなど、タスクタイプによって均一に分類し、名前を付けます。 2。&&またはnpm-run-allを使用してコマンドを組み合わせて、クリーンまたはビルドまたはテストなど、直列または並列実行のプロセスを実現します。 3.使用 - 環境変数を設定するパラメーターまたはCross-ENV、および構成するマルチENVをサポートします。 4。リリースプロセスを簡素化するために、スクリプトを介してGH-Pageまたはシェルスクリプトを呼び出すことにより、展開を完了できます。

フロントエンド開発ワークフローを自動化しても、実際には、最初から多数のビルドツールや複雑な構成を導入する必要はありません。 NPMスクリプトを適切に使用することにより、コード検査、コンピレーション、パッケージング、テスト、展開など、最も一般的なタスクを自動化できます。シンプルで軽量で、ほぼすべてのプロジェクトにnode.jsとNPMがインストールされており、すぐに機能します。

以下は、プロジェクト構造を明確に保ちながら効率を改善するために実際の開発で一般的に使用されるNPMスクリプトを使用するためのいくつかのヒントと提案です。

1。基本的なタスクの分類と命名仕様

NPMスクリプトの大きな利点の1つは、単純なコマンドの組み合わせにより複雑なプロセスを完了できることです。最初に一般的なタスクを分類し、検索とメンテナンスを促進するためにネーミング方法を統合することをお勧めします。

• 開発関連： start 、 dev 、 serve
• 関連するビルド： build 、 compile
• テスト関連： test 、 lint 、 format
• 関連： deploy 、 publish

例えば：

 「スクリプト」：{
  「start」：「node app.js」、
  "dev"： "webpack-dev-server  - モード開発"、
  「ビルド」：「ウェブパック - モード制作」、
  「Lint」：「Eslint」、
  「フォーマット」：「きれいな -  write」、
  「テスト」：「jest」
}

このようにして、チームメンバーは、対応するタスクを一目で実行する方法を知ることができ、CI/CDプロセスのその後の統合も促進します。

2。複数のコマンドを組み合わせてプロセスを実行します

完全なプロセスでは、複数のコマンドを実行する必要がある場合があります。これは&&または||に接続できます。 、または複数のスクリプトを並列または順番で実行できます。NPM npm-run-allなどのツールを使用して。

例えば：

 「スクリプト」：{
  「クリーン」：「rimraf dist」、
  「ビルド」：「ウェブパック - モード制作」、
  「ビルド：クリーン」：「npm run clean && npm run build」
}

build:cleanスクリプトは、「最初にdistディレクトリをクリーニングしてからビルドを実行する」を意味します。

複数のタスクを並行して実行する場合（同時に糸くずとテストを実行するなど）。

 「スクリプト」：{
  「Lint」：「Eslint」、
  「テスト」：「jest」、
  「チェック」：「npm run lint && npm run test」
}

npm-run-all --parallel lint testを使用して並列性を実装することもできますが、最初にnpm-run-allをインストールする必要があります。

3.環境変数を使用してパラメーターを渡します

開発、テスト、生産など、さまざまな環境に応じてさまざまなロジックを実行したい場合があります。 NPMスクリプトは、パラメーターを通過する--をサポートし、 .envファイルと組み合わせて環境変数を設定することもできます。

例えば：

 「スクリプト」：{
  「start」：「webpack-dev-server」、
  「スタート：製品」：「webpack-dev-server  - モード制作」
}

また、 cross-envクロスプラットフォーム環境変数で設定することもできます。

 「スクリプト」：{
  「ビルド：ステージング」：「Cross-ENV node_env =ステージングWebpack  - モードステージング」、
  「ビルド：製品」：「Cross-ENV node_env = production webpack  - モード制作」
}

これにより、対応する構成ファイルまたは動作ロジックは、さまざまな環境に従ってロードできます。

4.自動展開は難しくありません

展開Webサイトは、NPMスクリプト、特にGitHubページへのアップロード、Netlify、Vercelなどの静的サイトとして記述できます。

たとえば、githubページに展開します。

 「スクリプト」：{
  「展開」：「gh -pages -d dist」
}

gh-pagesをインストールして、ビルド出力ディレクトリがdistであることを確認してください。

サーバーにアップロードされている場合は、SCP/RSYNC操作を実行するシェルスクリプトを作成して、スクリプトに配置することもできます。

 「スクリプト」：{
  「デプロイ」：「bash deploy.sh」
}

スクリプトに実行アクセス許可がある限り、NPMは正常に呼ばれます。

基本的にそれだけです。 NPMスクリプトのパワーは、その柔軟性と使いやすさであり、最初からWebpack、Gulp、またはViteの複雑な構成を必要としません。多くの一般的なタスクは、簡単なスクリプトで実行できます。重要なのは、プロセスを明確にし、徐々に最適化することです。

以上がNPMスクリプトを使用したフロントエンド開発ワークフローオートメーションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。