1. "babel-plugin-transform-runtime": "^6.23.0",
2. "babel-preset-es2015": "^6.24.1",
3. "babel-polyfill": "^6.26.0"
4. "babel-preset-stage-2": "^6.24.1",
https://google.github.io/traceur-compiler/demo/repl.html#
但是这个对于promise转译问题没有解决。(有待发掘新功能);
babel-preset-es2015:
是一个babel的插件,用于将部分ES6 语法转换为ES5 语法。转换的语法包括:
- const let 转换
- 箭头函数的转换
- 解构赋值
- 反引号字符串拼接转换等
const str1 = '小明';
const str2 = '学生';
const str3 = `${str1}是${str2}!`
编辑为
var str1 = '小明';
var str2 = '学生';
var str4 = str1 + '是' + str2 + '!';
并没有对比如 Promise、generator、Set、Symbol、Array.from、async 函数进行转译,需要babel-polify转译(例如报错:regeneratorRuntime is not defined)
babel-plugin-transform-runtime
babel-plugin-transform-runtime 实际上是依赖babel-runtime
因为babel编译es6到es5的过程中,babel-plugin-transform-runtime这个插件会自动polyfill es5不支持的特性,
这些polyfill包就是在babel-runtime这个包里
详细说明可以参考https://www.jianshu.com/p/7bc7b0fadfc2
babel-preset-stage-2
对于异步函数的转译(async);
es6转译为es5过程:
-
安装node环境
-
创建文件夹es6test, 文件夹里创建src文件夹, 进入src创建index.js
![image.png](https://img.haomeiwen.com/i12174514/4584ce7335827386.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
-
进入es6test执行npm init,按照提示初始化项目,完成后会有package.json
-
执行cnpm install babel-cli babel-plugin-transform-runtime babel-polyfill babel-preset-es2015 --save-dev
-
根目录新建文件.babelrc
{
"presets": [
"es2015"
],
"plugins": [
[
"transform-runtime",
{
"helpers": false,
"polyfill": true,
"regenerator": true,
"moduleName": "babel-runtime"
}
]
]
}
-
package.json在scripts中,配置"build": "babel src --out-dir dist"
-
执行npm run build src中的js会转译到dist中。
网友评论