Twitter Facebook github

WebPackでES6とES7をトランスパイルする

最近趣味の開発範疇でフロント側の勉強をしています。
ビルドツールにWebPackを採用したのですが、ちょっとハマったことがあったので備忘録です。

やりたいこと

  • JSもCSSも画像もオールインワンに使えるWebPackを使ってビルドしたい
  • フロント側のJSもES6とES7の構文を取り入れて書きたい

前提

nodebrew + install-binary を使って環境構築しています。

結論

古い書き方

Babel v5 以前の書き方。 stageパラメータをv6以降で使うとエラーになる。

新しい書き方

Babelと各種プリセットを先にインストール。

どこでハマったか

2015年の夏頃の記事を見て、比較的新しいからこの手順でいけるだろう、と思って、プレーンな状態から次の手順で環境を構築しました。

初期化

WebPackとbabel-loaderをインストール

WebPackの設定は次のとおり。jsファイルには babel-loader を使うように指定します。

ビルドしてみると・・・

言われるがままに babel-core を入れてリトライ。

解決

Babel 6が15/10/30にリリースされ、それ以降にインストールした場合は babel-core と、 babel-preset-es2015 のようなプリセットを個別にインストールする必要あり。

module指定の方法も変わったみたいで、

こうする。

所感

バックエンドよりフロントエンドの開発の方が圧倒的に難しい予感…

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください