テンプレート作った理由

純粋なJavaScriptと違って若干手軽にかけないんですよね。ES6って。Babelでトランスパイルしないといけないので。

そうなるとES6触ってみたいけど、って人にはちょっと敷居が高い気がするんですよね。なので、すぐに始められるように開発環境作っておこうと思ったのが理由です。
自分でも色々試したいときとか本を読んで勉強したことをES6で書きたいときとかに重宝するかなと思ったというのもあります。

ダウンロードはこちら

こちらから一式ダウンロードできます。
Takumi0901/webpack-es6

使い方

一式cloneをしたら

必要なパッケージをまずインストール

$ npm install

次に、ビルドファイルを作成

$ npm run build

ここまでやったらあとは

$ npm start

をすると開発サーバーが立ち上がってhttp://localhost:5000/でブラウザで確認できます。
あとは好きなようにsrc/index.jsにES6を書いてください。

ざっくり中身のご紹介

ダウンロードすれば上記のようにあっという間にできるんですが、一応ざっくり中身を説明します。

package.json

必要パッケージはこれだけです。eslintも入れていて、lintもできるようにしています。僕はIntelli Jを使っているので設定をしてlintするようにしています。実際に仕事でも必ずlintするようにして、最低限のクオリティを出せるようにしています。

"devDependencies": {
  "babel-core": "^6.26.0",
  "babel-eslint": "^8.0.1",
  "babel-loader": "^7.1.2",
  "babel-plugin-transform-class-properties": "^6.24.1",
  "babel-plugin-transform-object-rest-spread": "^6.26.0",
  "babel-preset-es2015": "^6.24.1",
  "babel-preset-react": "^6.24.1",
  "eslint": "^4.8.0",
  "eslint-plugin-react": "^7.4.0",
  "webpack": "^3.6.0",
  "webpack-dev-server": "^2.9.1"
}

webpack.config.js

こちらも本当に最小限の記述しかしていません。

var webpack = require("webpack");
module.exports = {
  entry: __dirname + "/src/index.js",
  output: {
    path: __dirname + "/public/assets",
    filename: "bundle.js",
    publicPath: "assets"
  },
  devServer: {
    inline: true,
    contentBase: __dirname + "/public",
    port: 5000
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: ["babel-loader"]
      }
    ]
  }
}

今後の展望

今回はES6をBabelでトランスパイルしかしていませんが、今後はSassとかPostCSSとかもできるようにしたものも作る予定です。
これでいつでもES6で書けるので、機会があればコーポレートサイトとかでも使ってみようかな。
ES6ライフを楽しめそうです ^ ^