ES6始めたいけど開発環境作るのがめんどくさいと思っている方のためにざっくりテンプレート作ってみました

ES6始めたいけど開発環境作るのがめんどくさいと思っている方のためにざっくりテンプレート作ってみました

仕事ではReactのサービスに携わっているのでES6には慣れているのですが、いざ自宅などでES6で書きたいときとかbabelとかwebpackやらやらないとならず気軽にやろうかなとはなりにくい印象でした。特に初めてES6触る人には。なので少しでも敷居が低く慣れればいいなと思ってES6の開発環境のテンプレ作ってみました。

Ads

テンプレート作った理由

純粋な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ライフを楽しめそうです ^ ^

いいなと思ったらシェアお願いします

同じタグで検索

Ads
ページの先頭へ