babel

1.其实babel-loader是用了babel-core的transform方法转换的
2.通过JavaScript Parser把代码转化为一颗抽象语法树（AST），是源代码的抽象语法结构的树状表现形式
JavaScript Parser，把js源码转化为抽象语法树的解析器。浏览器会把js源码通过解析器转为抽象语法树，再进一步转化为字节码或直接生成机器码。
esprima、estraverse 和 escodegen 模块是操作 AST 的三个重要模块，也是实现 babel 的核心依赖，下面是分别介绍三个模块的作用。
    esprima 将 JS 转换成 AST
    estraverse 遍历和修改 AST
    escodegen 将 AST 转换成 JS
    // 获取树节点
    // 获取参数和函数体
    // 生成一个函数表达式树结构
    // 用新的树结构替换掉旧的树结构
3.那么我们什么时候用babel-polyfill，什么时候用babel-runtime？
babel-polyfill会污染全局空间，并可能导致不同版本间的冲突，而babel-runtime不会
从这点看应该用babel-runtime。
但记住，babel-runtime有个缺点，它不模拟实例方法，即内置对象原型上的方法，所以
类似Array.prototype.find，你通过babel-runtime是无法使用的。
最后，请不要一次引入全部的polyfills（如require('babel-polyfill')），
这会导致代码量很大。请按需引用最好。

@babel/plugin-transform-runtime 不能单独使用，它需要指定 preset 为 es2015，env,
typescript 还是 其他，才知道要转换的特性有哪些
babel 在每个需要的文件的顶部都会插入一些 helpers
代码，这可能会导致多个文件都会有重复的 helpers 代码。
@babel/plugin-transform-runtime + @babel/runtime 可以避免编译构建时重复的 helper
代码
此转换器的另一个目的是为您的代码创建沙盒环境。如果您使用@ babel /
polyfill及其提供的内置函数（例如Promise，Set和Map），那些将污染全局范围。虽然
这可能适用于应用程序或命令行工具，但如果您的代码是您打算发布供其他人使用的库，
或者如果您无法准确控制代码运行的环境，则会出现问题。
适用于不需要修改 全局变量的工具/库，同时，适用这种方法也不会转换实例的方法（如
：Array.prototype.includes）
es2015里不仅只有新的语法，还有实例的扩展，比如String，其实这里只是调用了String
实例的一个方法，我们无论怎么语法转换也没有什么用吧，如果我们在不支持
Polyfill提供的就是一个这样功能的补充，实现了Array、Object等上的新方法，实现了
Promise、Symbol这样的新Class等。
所以polyfill是线上使用的，因为新的方法编译完成之后还得使用，但是新的语法就可以
考编译完成，所以babel-core是不用发布到线上，他只作用再编译的时候



怎么使用呢：
 {
    test:/\.js$/, // normal 普通的loader
    use:{
      loader:'babel-loader',
      options:{ // 用babel-loader 需要把es6-es5
        presets:[
          '@babel/preset-env'
        ],
        plugins:[
          ["@babel/plugin-proposal-decorators", { "legacy": true }],
          ["@babel/plugin-proposal-class-properties", { "loose": true }],
          "@babel/plugin-transform-runtime"
        ]
      }
},
polyfill：可以再全局引入，再enter中前面引入，也可以按需引入