不讲为什么使用es6,只讲es6如何在各种环境下使用。目前浏览器…环境都不支持es6,所以我们需要babel
浏览器中使用
1 | <script src="node_modules/babel-core/browser.js"></script> |
Note:Babel
可以用于浏览器环境,但是从Babel 6.0
开始,不再直接提供浏览器版本,而是要用构建工具构建出来。所以,我们只是做简单的html
时,又不想使用构建工具,可以通过安装5.x版本的babel-core模块获取
。
1 | npm install babel-core@5 |
命令行转换使用
我们创建了一个用es6
写的js文件,想要运行,但是不想使用构建工具,可以使用babel
提供的命令行工具。
安装命令行工具:
1
npm install babel-cli -g // 全局安装
配置编译规则
添加
babel
用来转换的依赖包1
2
3
4
5
6
7ES2015转码规则
npm install --save-dev babel-preset-es2015
ES7不同阶段语法提案的转码规则(共有4个阶段),选装一个
npm install --save-dev babel-preset-stage-0
npm install --save-dev babel-preset-stage-1
npm install --save-dev babel-preset-stage-2
npm install --save-dev babel-preset-stage-3在根目录下创建
.babelrc
文件并添加配置:1
2
3
4
5
6
7
8// 只是为了演示添加的简单配置
{
"presets": [
"es2015",
"stage-2"
],
"plugins": []
}
使用:
放个官方链接,懒得写了。
因为我不想让babel
编译了之后重新生成个文件,所以我一般用babel-node
命令测试:1
babel-node 文件名
即可在命令行看到结果。
构建工具中使用
…未完待续