NPMコマンドは何ですか？

パッケージマネージャーとして、NPMは、GruntやGulpなどの以前のコマンドラインタスクランニングツールと同様のタスクを実行することもできます。前の章にSASSパッケージをインストールした後、使用を開始できます！

章をガイドします

1. このガイドは誰ですか？
2. 「NPM」とはどういう意味ですか？
3. コマンドラインとは何ですか？
4. ノードとは何ですか？
5. パッケージマネージャーとは何ですか？
6. NPMをインストールする方法は？
7. NPMパッケージをインストールする方法は？
8. NPMコマンドとは何ですか？ （あなたの現在の場所！）
9. 既存のNPMプロジェクトをインストールする方法は？

詳細なNPMコマンド

package.jsonファイルをテストフォルダーで開くと、現時点では多くのコンテンツが表示されます。現在、 dependencies関係は1つだけです。

 <code>{ "dependencies": { "sass": "^1.43.4" } }</code>

ただし、 package.jsonファイルには、依存関係以上のものが含まれています。また、プロジェクトに関する多くのメタ情報も含まれています。その中で最も興味深い部分はscriptsと呼ばれるオプションであるが非常に有用なプロパティです。

SASSのすべてのサブ依存関係は、自動化されたpackage-lock.jsonに記録されており、手動で編集しないでください。 package.jsonには通常、トップレベルの依存関係のみが含まれており、自由にカスタマイズできます。

package.jsonファイルのscriptsオブジェクトを使用すると、プロジェクトで実行できるコマンドを作成して、単一の実行または継続的な実行プロセスであろうと、さまざまなタスクを処理するのに役立ちます。通常、これらの「タスク」は、ローカルに開発された開発サーバーを開始し、リソースをコンパイルし、テストを実行するために使用されます。実際、SASSやJavaScriptを順番にコンパイルするなど、同時に実行する必要があるすべてのタスクを処理するために、 startまたはdevコマンドがプロジェクトに組み込まれていることがよくあります。

まだ実行するスクリプトはありませんが、これを修正しましょう！

例：SASSをCSSにコンパイルします

package.jsonファイルのscriptsセクションでは、インストールされているすべてのパッケージにアクセスできます。 SASSコマンドを今すぐ端末に直接入力できない場合でも、NPMスクリプトの一部としてSASSコマンドを実行できます。

SASSがグローバルにインストールされている場合（特定のプロジェクトフォルダーではなく、システム全体のインストールを意味します）、ターミナルでSASSコマンドを実行できます。これまでのところ、このフォルダーにSASSのみをインストールしています（これは、パッケージをインストールするときにデフォルトの動作です）。ただし、グローバルインストールにより、SASSコマンドはシステム上のどこでも利用可能になります。

まず、このコードブロックをpackage.jsonファイルに貼り付けます{ Curly Braces：

 <code>"scripts": { "sass:build": "sass style.scss style.css" },</code>

JSON構文は非常に厳しいです。問題がある場合は、JSONバリーターを使用してファイルのコンテンツを実行してみてください。

これによりnpm run sass:build Scriptにアクセスできます。これにより、SASSがCSSにコンパイルされます。

コマンドの名前は、連続した文字列である限り、重要ではありません。また、コロンはここで特別sass効果を持っていないbuildも注目に値します。

SASSコマンドを以前に使用したことがある場合（または事前に見たことがあります）、これはプロジェクトフォルダーのルートにstyle.scssファイルを作成する必要があることを意味する場合があります。これを行い、任意のSASSコードを入れましょう。

コピーして貼り付けたい場合は、以下が使用しているSASSコードを次のとおりです。

 <code>$myColor: #ffd100; .a { .nested { .selector { color: $myColor; } } }</code>

素晴らしい！プロジェクトルートディレクトリのstyle.scssとしてファイルを保存してから、新しいコマンドを実行してみましょう。

 <code>npm run sass:build</code>

このタスクが完了したら、プロジェクトフォルダーに2つの新しいファイルがすぐに表示されるようになりました： style.css and style.css.map 。

必要に応じて、 style.cssファイル（コンパイルされたCSSコードを含む）を開いて、それが実際に期待していることを確認できます。

SASSパッケージは、ブラウザのDevToolsでスタイルをチェックするときにどのスタイルが.scssファイルにあるかを確認できるようにすることができます。素晴らしい！

エラーが発生した場合： package.jsonの構文を再確認して、それが有効なJSON（オンラインJSONバリデーターを使用できる）であることを確認し、 .scssファイルには有効なSASS（オンラインSASSコンバーター）が含まれています。確認するもう1つのことは、ファイル名がコマンドのファイル名と一致するかどうかです。

開発のみのコマンドを作成します

これは素晴らしいことですが、開発を行うと、コマンドを何度も実行することにうんざりするかもしれません。それでは、2番目のコマンドを設定して、SASSに私たちのファイルを監視し、変更を保存したときに自動的に再コンパイルするように指示しましょう！

package.jsonのscriptsオブジェクトに以下を追加します。

 <code>"sass:watch": "sass style.scss style.css --watch"</code>

重要な注意： 2つのスクリプトの間にコンマ（、）があることを確認してください。順序は問題ではありませんが、それらの間のコンマは重要です。繰り返しになりますが、JSONは非常に厳しいので、必要に応じてJSONバリエーターに依存しています。

sass:watch （Sasquatchと混同しないように）を実行すると、ターミナルに「SASSが変更を監視している。CTRL-Cを押して停止する」というメッセージが表示されます。

style.scssファイルを開き、変更を加えて保存すると、ターミナルにSASSがCSSに再コンパイルされていることを確認するメッセージが自動的に表示される場合があります。

今これは便利です！それだけでなく、これらのファイルをリポジトリに送信すると、SASSをインストールおよび実行するための正確な指示があり、簡単なコマンドを使用します。

このテストプロジェクトを終了します。開始方法を確認すると便利ですが、ほとんどの場合、NPMコマンドをゼロから作成する代わりに、事前に構成されたプロジェクトを使用します。これは、このNPMガイドの最後の章でまさに行うことです。

NPMパッケージをインストールするための最終的な手順

実際にNPMパッケージをインストールする2つの方法があることを知っておく必要があります。これは、パッケージが生産ビルドの一部であるかどうか、または純粋に開発目的であるかどうかによって異なります。

• npm install （またはnpm i ）は、プロジェクトにパッケージを追加するための標準（およびデフォルト）方法です。
• npm install --save-dev （またはnpm i -D ）は、「開発依存関係」にパッケージのみを追加します。つまり、プロジェクトの最終生産バージョンが構築されたときではなく、プロジェクトが開発されたときにのみインストールされます。

開発依存関係としてインストールされているパッケージには、テストライブラリ、コードチェックツール、プレビューサーバー、および開発中にのみ役立つその他のツールが含まれます。通常、Webサイト自体をコンパイルまたは実行するために使用されません。

また、知る価値のある最終フラグもあります： npm install --global （またはnpm i -g ）。これは、以前にSASSをインストールするときに説明したように、パッケージをグローバルにインストールする方法です。たとえば、マシンのどこでもsassを実行できるようにする場合は、この方法を使用できます。グローバルインストールの他の一般的なユースケースには、どこでも使用するCLIツール、またはYarnなどの別のパッケージマネージャーが含まれる場合があります。

次のステップ

私たちは旅を終えようとしています！もう1つ知っておくべきこと、およびNPMを使用して既存のプロジェクトをすばやく開始するために必要なすべてのこと。したがって、NPMを使用してプロジェクトを継承するとします。どこから始めましたか？他の人と一緒に働き続けることをどのように保証しますか？これは、このNPMガイドの最後のセクションの焦点です。

←第7章第9章→

以上がNPMコマンドは何ですか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。