哞牛翻轉中

js 的 compiler 工具、語法，是愈來愈多。

從 node 、react 的出現後，js 能做的事是愈來愈多了，

要做 web server ？ 要寫 app？要寫 系統？ 行~~~通通 js 搞就行了。

當然人各有好！

最近因為工作關系，寫了些side project 的東西，

就來寫一下 es2015 的一些語法，用法，有時是閱讀了官方文件後，所以gist 出的 idea。

大致寫寫作一下筆記之用吧~~~~

首先一樣先做好 npm 的部署。

再來安裝以下：

    babel-cli
    babel-core,
    babel-eslint,
    babel-loader,
    babel-plugin-transform-es2015-classes,
    babel-plugin-transform-es2015-destructuring,
    babel-plugin-transform-es2015-modules-commonjs,
    babel-plugin-transform-es2015-parameters,
    babel-plugin-transform-es2015-spread,
    babel-plugin-transform-export-extensions,
    babel-plugin-transform-runtime,
    babel-plugin-transform-strict-mode,
    babel-preset-es2015,
    babel-preset-stage-2,
    babel-runtime,

上面這些都是 babel 相關，而帶有 plugin 的，就是如果你要寫 es2015 的話，就必需裝

而 babel-cli 是 cli 能直接執行 es2015 的語法，來看結果，debug 的話，是蠻好用的。

其它的就是 babel 的必要裝的，eslint 的話，你知道的就不多做說明了。

    css-loader,
    eslint,
    extract-text-webpack-plugin,
    file-loader,
    sass-loader,
    url-loader,
    webpack,
    webpack-dev-server

剩下的就是

是否要支援 sass、css 的語法

url-loader 是不用將在 tpl 上出現的 img 之類的 resource 打包，而是以外連的方式進來。

最後是，我們使用 webpack 來做為打包的工具。

另外請在 root 下新增一個 .babelrc

的檔案，內容為 json 的配置。

{
  "presets": ["es2015", "stage-2"], 
  "ignore": ["node_modules/*"],
  "plugins": [
    "transform-strict-mode",
    "transform-es2015-modules-commonjs",
    "transform-es2015-spread",
    "transform-es2015-destructuring",
    "transform-es2015-parameters",
    "transform-runtime",
    "transform-export-extensions",
    ["transform-es2015-classes", { "loose": true }]
  ]
}

大致上是指，在 compiler 中，需要使用的 plugin

當然，webapck 的預設 webpack.config.js 檔內，也是可以設置 plugins 的

比如下面，我們在 root 新增一個 webpack.config.js 檔，

內容如下：

const path = require('path')
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
    devtool: '#source-map',
    entry: {
        app: './src/app.js',
    },
    resolve: {
        modules: [path.resolve(__dirname, 'src'), 'node_modules'],
        extensions: ['', '.js', '.jsx'],
        alias: {
            'src': path.resolve(__dirname, '../src'),
            'resource': path.resolve(__dirname, '../src/resource'),
			'components': path.resolve(__dirname, '../src/components'),
        }
    },

    output: {
        path: path.resolve(__dirname, '../dist'),
        publicPath: '/dist/',
        filename: '[name]-bundle.js'
    },
	plugins: [
	],
    module: {
        loaders: [
			{
                test: /\.js$/,
                loader: 'babel',
                exclude: /node_modules/,
                query: { compact: false }
            }, {
                test: /\.sass$/,
                loader: ExtractTextPlugin.extract('style-loader', 'css-loader!sass-loader'),
                exclude: /(node_modules)/
            }, {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract('style-loader', 'css-loader'),
                exclude: /(node_modules)/
            }, {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract('style-loader', 'css-loader!sass-loader'),
            }, {
                test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
                loader: 'url-loader?limit=8192',
                exclude: /(node_modules)/
            }

        ]
    }
}

這樣基本的 webpack 設定就完成了。

要打包時，你可以 webapck -p

也可以將這個打在 package.json 的 script 內

比如：

  "scripts": {
    "build": "set NODE_ENV=production && webpack --config webpack.config.js --progress --hide-modules",
  },

這樣，你就可以使用 npm run build 來 compile 了。