社内でカンタンな勉強会をしたので、その手順メモ。
カリキュラム
- package.jsonとは何か。
- npm scriptsを読み書きできるようになろう。
- npmパッケージをインストールして、npm scriptsから呼び出せるようになろう。
今回はnpmパッケージの例として、ターミナルからbabelを実行できるbabel-cliを使います。
前準備
node + npm
nodeとnpmのインストールは割愛します。
ちなみに、node.jsはnodebrewでインストールすることをオススメします。
Macにnodebrew（node.js, npm）をインストールする手順
プロジェクト作成
作業する場所を作ります。
$ mkdir babel-cli-trial // ディレクトリ作成
$ cd babel-cli-trail // ディレクトリ移動
$ npm init -y // プロジェクト初期化
yオプションについては、こちらを。
babel cliの準備
パッケージインストール
ターミナルからBabelを実行できるbabel-cliをインストールします。
$ npm intall babel-cli --save-dev
// 省略形：npm i babel-cli -D
さらに、ES2015をトランパイルするためには、もう１つパッケージをインストールします。
$ npm install babel-preset-es2015 --save-dev
// 省略形：npm i babel-preset-es2015 -D
これでパッケージの準備ができました。
npm scripts
package.jsonとは
npm init コマンドでpackage.jsonが生成されたと思います。これはプロジェクトの設定ファイルになります。
npm scriptsとは
package.json内に、scriptsという項目がありますが、これがnpm scriptsです。
npm scriptsにはシェルやUnixコマンドを記述でき、タスクランナーとしての機能を持たせることができます。
最近では、gulpやgruntを排して、npm scriptsだけで賄うケースもあるみたいですね。
npm scriptsに追記
さて、新しいscriptを追記します。
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build:js": "babel hoge.js --out-file huga.js" // ← 新規追加行
},
さらにいくつかの下準備が必要なのですが、手順については、以下の記事を参考にして下さい。
お試しでES2015を書く時は、CLIでBabelを動かすと便利
ここでは、npm scriptsから、パッケージを実行するという点にフォーカスします。
npm scriptsの実行
あとはターミナルからnpm scriptsを実行するだけですね。
$ npm run build:js
これでJSのコンパイルが行われます。良かったですね。
ちなみに、npm scriptsの利点としては、bashの再読み込みが不要です。node_modules/を探しに行ってくれるので、インストールしたパッケージをすぐに使うことができます。
おしまい。
もっと知りたい方向け
先人のポストのリンクを貼らせていただきます。