webpack tutorial to use Bootstrap (Part1)

あらすじ

webpack はイケてるツールなんだけど、いまいち何やっているか分かっていなかったので調べた。 Part1 では ES6 を導入する手順を説明します。

Lesson 0: 準備

mkdir practice-webpack && cd $_
mkdir src www
echo 'node_modules' > .gitignore
npm init --yes
git init && git add . && git commit -m 'first commit'  
npm install --save-dev webpack webpack-dev-server

create webpack.config.js

const path = require('path');
const webpack = require('webpack');

const PATHS = {
  src: path.join(__dirname, 'src'),
  www: path.join(__dirname, 'www')
};

module.exports = {
  entry: [`${PATHS.src}/app.js`],
  output: {
    path: PATHS.www,
    filename: 'bundle.js',
  },
  devtool: 'inline-source-map',
  devServer: {
    contentBase: PATHS.www,
    port: 3000,
    hot: false,
    inline: true,
    colors: true
  },
  resolve: {
    extensions: ['', '.js'],
  }
};

試しに moment.js を使ってみる

npm install moment --save
cat << EOS > src/app.js
const moment = require('moment');
const now = moment();
console.log(now.format('YYYY-MM-DD hh:mm:ss'));
EOS

動作確認

% $(npm bin)/webpack && node www/bundle.js

Lesson1: ES6 で書く

フロントエンドでも ES2015 で定義されている便利な関数を使いたいと思うのでそのようにしておく。

npm install --save-dev babel-core babel-loader babel-preset-es2015

edit webpack.config.js

   resolve: {
     extensions: ['', '.js'],
+  },
+  module: {
+    loaders:[{
+      test: /\.js$/,
+      exclude: /node_modules/,
+      loader: 'babel'
+    }],
   }
 };

create .babelrc

{
  "presets": ["es2015"]
}

edit src/app.js:

import moment from 'moment';
sayNow();
function sayNow(format = 'YYYY-MM-DD hh:mm:ss') {
  const now = moment();
  console.log(now.format(format));
}

動作確認

% $(npm bin)/webpack && node www/bundle.js

Lesson2: async, await を使えるようにする

npm install --save-dev babel-preset-stage-0 babel-polyfill

今のままでは動かないので以下を追加

{
  "presets": [
    "es2015",
+   "stage-0"
  ]
}

edit src/app.js

import "babel-polyfill";
import moment from 'moment';
(async () => {
  sayNow();
  await sleep(2000);
  sayNow();
})();

function sayNow(format = 'YYYY-MM-DD hh:mm:ss') {
  const now = moment();
  console.log(now.format(format));
}

function sleep(msec) {
  return new Promise((resolve) => {
    setTimeout(resolve, msec);
  }); 
}

動作確認

% $(npm bin)/webpack && node www/bundle.js

参考URL

webpack(v1)とbabelでES6コードをさくっと書く - getalog