JavaScript 開発に必須

昨今の JavaScript 開発において ECMAScript 6 で記述してビルド時にブラウザで解釈できるレガシーな JavaScript に変換するために Babel などのトランスパイラの設定は必須になっていると思うが、私は以前より Laravel Mix という Laravel に付属している簡単に使えるトランスパイラを愛用している。以前書いた記事だと Laravel プロジェクトからファイルを引っ張ってくる方法だったが、今回試した方法だともっとシンプルにいけたのでメモ。尚、これを試すのに arms inc. Engineers' Blog 様の記事が大変参考になった。前提条件として Node.js は既にインストールされているものとする。

1. 新規 Node.js プロジェクトを作成しインストール

まず PhpStorm で新規プロジェクトを作成する時に Node.js プロジェクトにする。こうすると package.json のみが含まれたシンプルな Node.js プロジェクトが生成される。ここで以下を叩き Laravel Mix と cross-env をインストールする:

npm install laravel-mix cross-env --save-dev

そして package.json に Laravel Mix のビルド用のスクリプトを配置する (各コマンドの説明は省略する):

{
  "scripts": {
    "dev": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js --watch",
    "prod": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  }
}

ちなみに私の環境だと --hide-modules オプションがついているとスクリプト実行時にエラーになった。この場合 --hide-modules を削除すると実行できた。

2. webpack.mix.js ファイルの配置と動作確認

webpack.mix.js はビルド用の設定ファイルとなっている。今回は JavaScript と SASS で書くことにする。 TypeScript や LESS を使いたかったりする場合は別途書き換える。プロジェクト配下に webpack.mix.js というファイルを以下のように作る:

const mix = require('laravel-mix');
mix.js('src/app.js', 'dist/')
    .sass('src/app.scss', 'dist/')

この例の場合 src/app.js に置かれた JavaScript が dist/app.js にビルドされ src/app.scss に書かれた SCSS が dist/app.css にビルドされることとなる。ということで src と dist ディレクトリを作成し src/app.js と src/app.scss に適当な記述をしたファイルを作成し npm run dev を叩く。 webpack compiled successfully が表示され、正しく dist/app.js と dist/app.css が作成されることを確認する。更に npm run watch を叩いて適当に src/app.js か src/app.scss を書き換えて保存するとそれぞれビルドされて dist/app.js か dist/app.css が書き換わることを確認する。