npm(installとかrun serveとか)の処理の意味について

最近、フロントエンドを開発していくことも増えてきており、パッケージ管理ツールとして、npmを使用していますが、npmのコマンドをそんなに意味を知らずに使用していたため、理解度向上のため、記事にまとめてみました!

npmコマンドについて

frontendでvue app立ち上げ時にreadmeに記載されているコマンドを例に調べていきます!

## Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

### Lints and fixes files
```
npm run lint
```

npmとpackage.jsonについて

コマンドについて見る前に、、、まず前提の知識として必要なnpm、package.jsonについておさらいしておきます。

npmとはNode Package Managerの略で、Node.jsのパッケージを管理するものになります。そして、vueなどでアプリ開発をしていると、ソースディレクトリの直下にpackage.jsonファイルがあると思います。

Node.jsとは、javascriptをサーバーサイドで使用できるようにするツールのことらしいです。javascriptは、フロントエンドで動きをつけたりとか、そういった使われ方をよく目にすると思いますが、npmだったりCLIでjavascriptを使えるようにする便利ツールを動かすために必要なのがNode.jsになります。

npmとは、アプリなど開発する際に、様々なライブラリをインポートすると思いますが、それらに必要なパッケージを、簡単にアップデートをしたり、依存関係を解消してくれるツールがnpmとなります。

package.jsonファイルには、インストールするモジュールを一覧で記述するファイルになっています。ここにアプリに入れたいライブラリを記入して、npm installすることで、アプリにNode.jsに反映させることができます。

また、package.jsonにはscriptsと言われるエイリアスが存在しています。scripts内で定義されると、npm run ~で処理を実行することができます。上記で書かれているnpm run devとか、npm run serveとかは実は、package.jsonに書かれている処理を実行しているというわけです。詳しくみてみましょう。

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

package.jsonにこのように書かれている場合、”npm run serve”を実行した場合、”npm vue-cli-service serve”が実行されていることになります。

npm系各コマンドについて

npm install

上記は、package.jsonに書かれたモジュールをNode.jsにインストールするコマンドになります。これにより、アプリでライブラリが使用できるようになります。

npm install ⚪︎⚪︎⚪︎など、直接ライブラリ名を指定して実行することで、package.jsonに書かずにモジュールをインストールすることができます。

npm run serve

“serve”: “vue-cli-service serve”,となっており、vue-cli-service serveが実行できます。このコマンドは、ローカルの開発環境でサーバーを建てることができ、ブラウザでhttp://localhost:8080にアクセスするとvueアプリにアクセスできます。

また、ホットリロードが効いているためローカルで行ったコード変更が自動で反映されるようになります。

npm run build

“build”: “vue-cli-service build”となっており、これは、アプリケーションを本番環境用に最適化し、デプロイ用のファイルを生成するプログラムになります。

ローカルにおける開発環境では使用することはありません。

npm run lint

“lint”: “vue-cli-service lint”となっており、これはプログラム校正が実行できます。エラーが出ていたり、書き方がおかしいところを指摘してくれるコマンドになります。

npm run lint –fixとfixオプションを最後につけると、おかしいところを自動で修正してくれます。

まとめ

本記事では、npmの基本的なコマンドについて解説しました。

まだまだjavascriptに関する知識は乏しいので、これからも気になったことは調べるようにして、フロントエンドの知識を深めていきたいと思います。

コメント

タイトルとURLをコピーしました