❓ 🍮 👨🏻‍🔬 単なる人間のnpm 👩‍🎤 🤾🏻 👲🏼

この記事は、Node.jsにあまり馴染みがないが、Grunt、Gulpなどのアプリケーションを使用したい人を対象としています。これらのアプリケーションを使用するプロセスには、package.jsonファイルの編集とnpmコマンドの使用が含まれるため、npmの動作を理解することは困難に対処するのに役立ちます。

5分でNode.js

Node.jsとは何かを理解すると、npmをよりよく理解するのに役立ちます。簡単に言えば、Node.jsはJavaScriptインタープリターです。 Node.js自体は、入力でJavaScriptコードを受け取って実行するC ++アプリケーションです。

簡単なプログラムを作成しましょう。 helloworld.jsファイルを作成し、次のコードを挿入します。

console.log("Hello World");

ターミナルを開き、プログラムのあるフォルダーに移動して、 node helloworld.js

を実行しnode helloworld.js

。 helloworld.jsの代わりに、 JavaScriptコードを含む他のファイルを含めることができます。 Node.jsがインストールされていることを確認してください。プログラムの結果は次のようになります。

helloworld.jsの実行結果

プログラムは、単に「Hello World」という文字列を端末に表示します。

Node.jsのパッケージ

つまり、Node.jsのパッケージは、何らかの種類のライブラリまたはツールである1つ以上のJavaScriptファイルを指します。

npm（abbr。node package manager）は、Node.jsとともに自動的にインストールされる標準のパッケージマネージャーです。 npmクラウドサーバーからパッケージをダウンロードするため、またはこれらのサーバーにパッケージをダウンロードするために使用されます。

Package.jsonファイル

package.jsonファイルには、アプリケーションに関する情報（名前、バージョン、依存関係など）が含まれています。このファイルがあるディレクトリはすべてノードとして解釈されます。 js package 、公開する予定がない場合でも。

package.jsonファイルの使用方法は、パッケージをダウンロードするか公開するかによって異なります。

パッケージをダウンロードする

パッケージを手動でダウンロードする場合、このためにpackage.jsonを使用する必要はありません。ターミナルでコマンドへの引数として目的のパッケージの名前を指定してnpmコマンドを実行すると、パッケージが現在のディレクトリに自動的にダウンロードされます。例：

 $ npm install canvas-chart

package.jsonを使用してパッケージをダウンロードすることもできます。 package.jsonファイルをプロジェクトのディレクトリに作成し、次のコードをその中に追加します（パッケージの名前とバージョンは指定しません。公開する予定がないため、ダウンロードするパッケージの名前とバージョンを指定します）。

 { "devDependencies": { "canvas-chart": "~1.3.0" } }

次に、ファイルを保存し、ターミナルでnpm install

コマンドを実行します。

プロジェクトで多くのパッケージを使用する場合は、毎回ターミナルからダウンロードするのではなく、package.jsonを指定することをお勧めします。

package.jsonを使用してパッケージをダウンロードすると、パッケージを作成してパッケージをダウンロードすることがわかります。これは奇妙なことですが、動作します。

パッケージに依存関係がある場合、npmはダウンロードしたパッケージのpackage.jsonでそれらを見つけてダウンロードします。この場合、 canvas-chartパッケージには、依存関係が記述されたpackage.jsonファイルもあります。

パッケージを公開

パッケージを公開するには、すべてのソースコードとpackage.jsonファイルを1つのディレクトリに収集する必要があります。 Package.jsonには、パッケージの名前、バージョン、および依存関係を含める必要があります。例：

 { "name": "canvas-project", "version": "0.1.0", "devDependencies": { "canvas-chart": "~1.3.0" } }

このコードを見ると、 canvas-projectパッケージはcanvas-chartパッケージに依存していると言えます。 npm publish

コマンドを使用してパッケージを公開できます。

パッケージを実行可能ファイルとして使用する

npmはパッケージをダウンロードするときに、package.jsonファイルで「bin」プロパティを探します。このプロパティが見つかった場合、このパッケージを実行可能ファイルに変換し、指定されたディレクトリに配置します。

たとえば、次のコマンドはgrunt-cliを現在のディレクトリにロードし、ソースを実行可能ファイルに変換します。実行可能ファイルは、すべての実行可能ファイルを含むフォルダーに配置されます。この結果、 grunt-cliコマンドを呼び出すことができます。

 $ npm install grunt-cli

これで、パッケージとは何か、他のパッケージに依存する方法がわかりました。また、npmがパッケージでどのように機能するかを学びました。理論から実践に移り、Gruntをインストールしましょう。

npmでGruntをインストールする

Gruntは、画像の圧縮やcssファイルの縮小など、日常の多くのタスクを自動化できるタスクランナーです。

次の手順に従ってGruntをインストールし、Gruntを使い始めます。

プロジェクトのディレクトリを作成します。サーバーの観点からは、このディレクトリがルートになります。
端末からこのディレクトリを開きます。

Gruntをダウンロードしてインストールします。 -g

引数は、現在のディレクトリではなく、パッケージを保存するためのメインフォルダーにパッケージをダウンロードするようnpmに指示します。

 $ npm install -g grunt-cli

gruntによって実行されるタスクごとに個別のパッケージがあります。たとえば、JavaScriptの縮小、ファイルの接着などのためのパッケージを見つけることができます。独自のパッケージを作成して、タスクを実行することもできます。そのようなパッケージはGruntプラグインと呼ばれます。プロジェクトのディレクトリに必要なパッケージをインストールしましょう。これを行うには、package.jsonファイルを作成し、その中に以下のコードを配置する必要があります。次に、 npm install

コマンドを実行します。彼女は必要なパッケージをダウンロードします。 package.jsonを含むディレクトリ自体がパッケージであることを忘れないでください。
```
 { "devDependencies": { "grunt-contrib-concat": "~0.3.0" } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
```

ファイルを接着するためのパッケージをインストールしました。次に、Gruntのタスクを説明する必要があります。これは、 Gruntfile.jsファイルを使用して行われます。プロジェクトディレクトリでgrunt

コマンドを実行すると、GruntはGruntfile.jsを検索してタスクをロードおよび完了します。ファイル接着プラグインをプラグインして、簡単なタスクを説明しましょう。

 module.exports = function(grunt) { // 1.   grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), concat: { // 2.     dist: { src: [ 'js/libs/*.js', //  js-   libs 'js/global.js' //   ], dest: 'js/build/production.js', } } }); // 3. ,      grunt.loadNpmTasks('grunt-contrib-concat'); // 4.    ,       grunt  . grunt.registerTask('default', ['concat']); };

この原則により、必要なプラグインを自分でダウンロードして接続できます。
これで、プロジェクトディレクトリでgrunt

コマンドを実行して、 jsファイルを接着できます。

まとめ

この記事では、Node.jsの初心者向けにnpmがどのように機能するかを説明しようとしました。これで、さまざまなノードをインストールして使用できるようになります。 jsアプリケーション。読んでくれてありがとう！

単なる人間のnpm