最小構成のES6モジュールを用いたフロントエンド開発環境

はじめがき

フロントエンドの開発環境複雑スギィ！
ES6モジュールが使える最小構成を目標とした覚書です。
間違ってることあったら教えてください。

環境

MacbookPro
node.js v6.5.0

インストール

# プロジェクトフォルダの作成
mkdir myProject && $_

# package.jsonの生成 (エンター連打)
npm init

# webpackのグローバルインストール
npm i -g webpack

# webpackのローカルインストール
npm i --save-dev webpack

# babelの一連パッケージをインストール
npm i --save-dev babel-core
npm i --save-dev babel-loader
npm i --save-dev babel-preset-es2015

サンプルファイル

mkdir src/ && $_
touch animal.js  dog.js app.js cats.js

animal.js

class Animal {
  constructor(name) {
    this.name = name;
  }
}
export default Animal;

dog.js

import Animal from './animal';

class Dog extends Animal {
  callName() {
    alert(this.name);
  }
}

const dog = new Dog('Natsu');
dog.callName();

app.js

import cats from './cats';

console.log(cats);

cats.js

const cats = ['tama', 'kuro', 'tora'];

export default cats;

ファイル構成はこうなります

tree

myProject
|-- node_modules/
|-- src
|    |-- animal.js
|    |-- app.js
|    |-- cats.js
|    +-- dog.js
|
|-- .babelrc
|-- package.json
+-- webpack.config.js 

babelの設定

.babelrc

{
  "presets": [
    "es2015"
  ]
}

webpackの設定

webpackをコマンドラインで実行することでentryの依存関係を解決したファイルがoutputで記述したファイルで生成されます。

webpack.config.js

module.exports = {
  entry: ['dog.js', 'cats.js'],
  output: {
    path: './dist',
    filename: 'bundle.js',
  },

  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
    ],
  },
},

webpack.config.jsの書き方

上の例ではbundle.jsにひとまとめされてしまうので、依存関係のあるファイルごとにファイルを生成する場合、以下のようにentryをオブジェクトで指定します

webpack.config.js

...
- entry: ['dog.js', 'cats.js'],
+ entry: {
+   'dog': 'src/dog.js',
+   'app': 'src/app.js',
+ }
  output: {
    path: './dist',
-   filename: 'bundle.js',
+   filename: '[name].js'
  },

todo

webpack.config.jsの詳細
webpack -watch

参考
webpack.config.jsの読み方、書き方
ECMAScript6で書こう！WebPackとES6-loaderで環境を作り、ES6を先取り体験する方法