Yarnやwebpackを使ったことがなかったので、 以下の記事をトレースする形で勉強がてらES6の環境を作ってみました。

webpack+babel環境でフロントエンドもES6開発

環境

  • macOS Sierra 10.12.3
  • Node.js v6.10.0
  • Yarn v0.21.3

1. Yarnインストール

Yarnが入ってない人はインストールしてください。

2. webpack + babelインストール

最初にYarnを使ってwebpackとbabelをインストールします。

3. Yarnとwebpackの設定

ディレクトリ構成は以下のようにします。

それに合わせてwebpack.config.jsを以下のように書きます。

webpackでES6をコンパイルするときのコマンドをpackage.jsonのscriptsに書いておきます。

4. ES6でコードを書く

ES6でコードを書きます。 この辺は元記事とだいたいいっしょです。

5. コンパイル&確認

webpackでコンパイルして、ブラウザで確認してみましょう。 alertが出ればOKです。

ちなみに最後のhshttp-serverというnpmモジュールで、 さくっとwebサーバを立てるのに便利です。