2019-03-05 对es6语法转换相关

2019-03-06  本文已影响0人  坨坨_ea46

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://babeljs.io/repl/#?babili=false&evaluate=true&lineWrap=false&presets=es2015,react,stage-2&targets=&browsers=&builtIns=false&debug=false&code=

https://google.github.io/traceur-compiler/demo/repl.html#

但是这个对于promise转译问题没有解决。(有待发掘新功能);

babel-preset-es2015:

是一个babel的插件,用于将部分ES6 语法转换为ES5 语法。转换的语法包括:

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过程:

![image.png](https://img.haomeiwen.com/i12174514/4584ce7335827386.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

{
  "presets": [
    "es2015"
  ],
  "plugins": [
    [
      "transform-runtime",
      {
        "helpers": false,
        "polyfill": true,
        "regenerator": true,
        "moduleName": "babel-runtime"
      }
    ]
  ]
}
上一篇 下一篇

猜你喜欢

热点阅读