最近趣味の開発範疇でフロント側の勉強をしています。
ビルドツールにWebPackを採用したのですが、ちょっとハマったことがあったので備忘録です。
Contents
やりたいこと
- JSもCSSも画像もオールインワンに使えるWebPackを使ってビルドしたい
- フロント側のJSもES6とES７の構文を取り入れて書きたい
前提
nodebrew + install-binary を使って環境構築しています。
|
1 2 3 4 |
$ node -v v5.7.1 $ npm -v 3.6.0 |
結論
古い書き方
Babel v5 以前の書き方。 stageパラメータをv6以降で使うとエラーになる。
|
1 |
loader: "babel-loader?stage=0" |
新しい書き方
Babelと各種プリセットを先にインストール。
|
1 |
$ npm install --save-dev babel-loader babel-core babel-preset-es2015 babel-preset-stage-0 |
|
1 2 3 4 5 6 7 8 9 10 |
$ cat webpack.config.js （略） ・・・ module: { loaders: [ {test: /\.js$/, loader: "babel", query: {presets: ["es2015", "stage-0"]}} ] } ・・・ （略） |
どこでハマったか
2015年の夏頃の記事を見て、比較的新しいからこの手順でいけるだろう、と思って、プレーンな状態から次の手順で環境を構築しました。
初期化
|
1 2 3 4 |
$ mkdir testproj $ cd testproj $ npm init enterキー連打でpackage.json作成 |
WebPackとbabel-loaderをインストール
|
1 |
$ npm install --save-dev webpack babel-loader |
WebPackの設定は次のとおり。jsファイルには babel-loader を使うように指定します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$ cat webpack.config.js module.exports = { entry: __dirname + "/src.js", output: { path: __dirname, filename: "bundle.js" }, module: { loaders: [ {test: /\.js$/, loader: "babel-loader?stage=0"} ] } }; |
ビルドしてみると・・・
|
1 2 3 4 5 6 7 8 |
$ touch ./src.js $ webpack Hash: 0231ab2c7ace0be07b92 Version: webpack 1.12.14 Time: 34ms + 1 hidden modules ERROR in Cannot find module 'babel-core' |
言われるがままに babel-core を入れてリトライ。
|
1 2 3 4 5 6 7 8 9 10 11 |
$ npm install --save-dev babel-core （略） $ webpack Hash: 0231ab2c7ace0be07b92 Version: webpack 1.12.14 Time: 261ms + 1 hidden modules ERROR in ./src.js Module build failed: ReferenceError: [BABEL] /path/to/testproj/src.js: Using removed Babel 5 option: base.stage - Check out the corresponding stage-x presets http://babeljs.io/docs/plugins/#presets at Logger.error ....（略） |
解決
Babel 6が15/10/30にリリースされ、それ以降にインストールした場合は babel-core と、 babel-preset-es2015 のようなプリセットを個別にインストールする必要あり。
|
1 |
$ npm install --save-dev babel-preset-es2015 babel-preset-stage-0 |
module指定の方法も変わったみたいで、
|
1 2 3 4 5 6 |
module: { loaders: [ - {test: /\.js$/, loader: "babel-loader?stage=0"} + {test: /\.js$/, loader: "babel", query: {presets: ["es2015", "stage-0"]}} ] } |
こうする。
所感
バックエンドよりフロントエンドの開発の方が圧倒的に難しい予感…