从Babel 6.0开始,不再直接提供浏览器版本,需要配合webpack等构建工具使用。如果你的项目相当简单,并不需要使用构建工具,而你又想在Web项目中使用ES6的语法,Babel+Browserify可以满足你的需求。
第一步:安装 babelify
模块
$ cnpm install -save-dev babelify babel-preset-es2015
第二步:修改package.json
在package.json中添加以下配置:
{
"browserify": {
"transform": [["babelify", { "presets": ["es2015"] }]]
}
}```
#####第三步:在命令行执行转换命令
```$ browserify main.js -o bundle.js```
Browserify编译的时候,会将脚本所依赖的模块一起编译进去。因此,只需要转换web项目的入口文件。上面命令将ES6脚本main.js,转为bundle.js,浏览器直接加载后者就可以了。
-----
######如果你的项目使用的是 `require` 的方式加载模块,单独的Browserify就能满足你。
#####首先,安装Browserify
`$ npm install -g browserify`
#####将CommonJS格式的文件转换为浏览器支持的格式:
`$ browserify main.js -o bundle.js`
浏览器直接加载 `bundle.js` 就可以了。