用 ECMAScript 6 编写模块化的 js
阶段一
用 babel 5.0 的 cli 将单个 es6 文件编译成 umd 形式的 es5
将文件拼接在一起 > cat ./build/a.js ./build/b.js > ./dest/index.js
阶段二
使用到了 babel 和 browserify
用 babel 5.0 的 cli 将单个 es6 文件编译成 cmd 形式的 es5
用 browserify 输出为同一个文件
阶段三
使用 browserify 插件 babelify
> browserify ./src/index.js -t babelify -o ./dest/index.js
阶段四
babel 升级到了 6.0 ，对所有功能进行了细化拆分，如果用到 es6 的规范，则需要安装 babel-preset-es2015
此处需要对上个阶段的项目进行升级
首先安装依赖
npm i --save-dev babelify babel-preset-es2015
修改 package.json 添加 browserify 的配置
// ...
"browserify": {
"transform": [
[
"babelify",
{
"presets": [
"es2015"
]
}
]
]
} // ,
// ...
编译的指令变成了 browserify ./src/index.js -o ./dest/index.js
这里可以把原本的 makefile 去除了，改由 npm run make 命令来执行编译，在 package.json 中添加
// ...
"scripts": {
"build": "browserify ./src/index.js -o ./dest/index.js"
} // ,
// ...
阶段五
使用 webpack 和 babel
上个阶段中每次编译的时间都是漫长的，不便于调试，使用 webpack-dev-server 可以解决调试慢的问题
安装依赖 npm i --save-dev webpack webpack-dev-server babel-loader babel-core babel-preset-es2015
项目下新建 webpack 配置文件 webpack.config.js
/**
* @since 2015-12-07 16:43
* @author vivaxy
*/
'use strict';
module.exports = {
entry: {
index: './src/index.js' // 项目主入口文件
},
output: {
filename: './[name].js' // 输出的文件
},
module: {
loaders: [
{
test: /src\/.+\.js?$/,
loader: 'babel?presets[]=es2015' // 定义了 loader
}
]
}
};
loader 中的配置可以参考这里
配置完成后，在命令行中执行 > webpack 就能得到输出的文件，执行 > webpack-dev-server 就能在 8080 端口启动本地服务，调试 es6 代码
如果想在文件变动后自动刷新页面，可以在 html 中加入 <script src="http://localhost:8080/webpack-dev-server.js"></script>
