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

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 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://upload-images.jianshu.io/upload_images/12174514-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中。