Babel @ Modern Web and App Programming

Babel 是 ES6、ES7 的 transpiler，可以把 ES6、ES7 轉成 ES5，讓大多的主流瀏覽器都可以讀的懂。


在 Terminal 輸入以下指令安裝 babel

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

安裝好後當然要去 webpack.config.js 做設定如下
其中 module: false 的原因是
不要 babel 去 translate module 相關的部份 i.g. import & export，因為 webpack 2.0 已經看的懂了，不會去包裝尺寸也較小

module.exports = {

context: path.resolve(__dirname, './src'),

entry: {

main: './main.js',

vendor: ['lodash']

},

output: {

path: path.resolve(__dirname, 'dist'),

filename: '[name].bundle.js'

},

module: {

rules: [

{

test : /\.js$/,

exclude : [/node_module/],

use: [{

loader: 'babel-loader',

options: {

presets: [

[

'es2015', {

modules: false

}

]

]

}

}]

},

{

test: /\.css$/,

use: ['style-loader', 'css-loader']

}]

},

plugins: [

new webpack.optimize.CommonsChunkPlugin({

name: 'vendor',

filename: 'vendor.bundle.js',

minChunks: 2

}),

]

};

接著再安裝 babel polyfill 套件

npm install --save-dev babel-polyfill

最後在自己的 js 中 import 即可

import 'babel-polyfill';

或者也可以去 webpack.config.js 裡新增如下
就不用每個檔案都額外需要 import

module.exports = {

context: path.resolve(__dirname, './src'),

entry: {

main: './main.js',

vendor: ['lodash','babel-polyfill']

},

output: {

path: path.resolve(__dirname, 'dist'),

filename: '[name].bundle.js'

}, }