认识Babel***

Babel是什么?
用于解析ES6,甚至比ES6更高级的语法,到ES5或ES4级别,满足浏览器的兼容性

环境搭建 & 基本配置

① package.json配置安装:

"devDependencies": {
  "@babel/cli": "^7.7.5",
  "@babel/core": "^7.7.5",
  "@babel/preset-env": "^7.7.5"
  "@babel/plugin-transform-runtime": "^7.7.5",
},
"dependencies": {
  "@babel/polyfill": "^7.7.0",
  "@babel/runtime": "^7.7.5"
}

.babelrc文件 配置:

  • plugins 里配置插件负责进行语法的转换
  • preset 预设,常用的plugins的集合,可以作为 Babel 插件的组合。
{
    "presets": [
        [
            "@babel/preset-env", //es6+常用语法的解析
        ]
    ],
    "plugins": [
    ]
}

babel-polyfill 补丁

前置知识:

polyfill补丁:

polyfill是补丁,例如Array.IndexOf方法,根据浏览器的兼容情况,若不兼容,polyfill做一个补丁,使之兼容。

core-js 标准库:

core.js 是一个标准的库,集成了 ES6 ES7等所有新语法的polyfill(补丁),缺点是不支持regenerator的兼容性。

regenerator 运行时库:

这是 Facebook 提供的 facebook/regenerator 库,用来实现 ES6/ES7 中 generators、yield、async 及 await 等相关的 polyfills。

babel-polyfill是什么?
  • babel本身只解析ES6的语法,如箭头函数;对于新的API, 如Promise,includes(),本身符合ES5的语法规范,babel不会进行解析;
  • babel-polyfill 通过补丁的方式实现的ES6+新的API解析;
  • babel-polyfill 是 core-js 标准库和regenerator库的集合。
  • babel 7.4之后弃用 balel-polyfill
  • 推荐直接使用core.js 和 regenerator
babel-polyfill 如何按需引入?

修改.babelrc文件的配置按需引入:

{
    "presets": [
        [
            "@babel/preset-env", //es6+常用语法的解析
      {
                "useBuiltIns": "usage",//按需引用
                "corejs": 3 //corejs版本
            }
        ]
    ],
    "plugins": [
    ]
}

babel-polyfill 的问题

污染全局环境

使用ES6的API Promise、includes时:

// 新的 API
Promise.resolve(100).then(data => data);
[10, 20, 30].includes(20)

babel-polyfill兼容处理后:

window.Promise = function() {}
Array.prototype.includes = function () {}

重新定义了window.Promise和Array原型的方法,污染了全局环境.

babel-polyfill 的问题:

  • 如果做一个独立的web系统,则无碍;
  • 如果做一个第三方的库(lib),则会有问题:

如使用方定义:window.Promise = function() {},与之前兼容处理 window.Promise = function() {} 出现冲突:

babel-runtime

babel-runtime配置使用:
① package.json 配置安装插件 @babel/plugin-transform-runtime@babel/runtime ,具体参见上面package.json配置;

② .babelrc文件配置plugins:引用plugin-transform-runtime,并配置选项:

{
    "presets": [
        [
            "@babel/preset-env", //es6+常用语法的解析
        ]
    ],
    "plugins": [
    [
            "@babel/plugin-transform-runtime",
            {
                "absoluteRuntime": false,
                "corejs": 3,
                "helpers": true,
                "regenerator": true,
                "useESModules": false
            }
        ]
    ]
}

babel-runtime兼容处理后:
Promise->_Promise,includes->_includes

所以babel-runtime不会污染全局环境

babel-polyfill VS babel-runtime

babel-polyfill:

  • 需要在你自己的代码中手工引入(最好放在 vendor 里)
  • 它会以全局变量污染的方式 polyfill 内建类(如 Map、Set、Promise 等),同时也会通过修改 Array、String、Object 等原型的方式添加实例方法(如 Array.prototype.includes()、String.prototype.padStart() 等),内建类的静态方法(如 Array.from() 等)也会被 polyfill
  • babel-polyfill 适合于开发独立的业务应用,及时全局污染、prototype 被修改也不会受到太大的影响,babel-polyfill 不适合开发第三方类库。

babel-plugin-transform-runtime:

  • 需要你在 .babelrc 或 Babel 编译选项中将该插件添加到 plugins 中
  • 插件只会 polyfill 你用到的类或方法,由于采用了沙盒(Sandbox)机制,它不会污染全局变量,同时也不会去修改内建类的原型,带来的坏处是它不会 polyfill 原型上的扩展(例如 Array.prototype.includes() 不会被 polyfill,Array.from() 则会被 polyfill)
  • 插件的方式适合于开发第三方类库,不适合开发需要大量使用 Array 等原型链扩展方法的应用。

你可能感兴趣的:(认识Babel***)