bable 【实用教程】

简介

bable 用于将 ES6 的语法编译为 ES5

  • 只关心语法,不关心 API 是否正确。
  • 不处理模块化(webpack 会处理)

搭建开发环境

  1. 安装相关的包
js 复制代码
npm i @babel/cli @babel/core @babel/preset-env
  1. 新建文件 .babelrc,内容为
json 复制代码
{ 
    "presets": [
        [
            "@babel/preset-env"
        ]
    ],
    "plugins": [
    ]
}
  • presets 内为预设的 plugins 的集合
    • 编译 jsx,用 @bakel/preset-react
    • 编译 TS,用 @babel/preset-typescript
  • bable 本身是个空壳,所有的编译是通过一个个 plugins 实现的

执行编译

dos 复制代码
npx babel src/index.js

babel-polyfill

babel-polyfill 是 core-js 和 regenerator 的集合。

  • core-js 除了不支持生成器语法,其他都能编译
  • regenerator 可编译生成器语法,弥补了 core-js 的不足

注意事项:

Babel 7.4之后弃用了 babel-polyfil,推荐直接使用 core-js和 regenerator,但面试中还是可能考察。

按需引入的配置方法

按需引入:只引入代码中使用的部分,其他部分不引入,可减少最终打包的体积。

.babelrc

json 复制代码
"presets": [
    [
        "@babel/preset-env",
        {
            "useBuiltIns": "usage",
            // corejs 的最新版本号
            "corejs": 3
        }
    ]
],

Babel 7.4之后弃用了 babel-polyfil,但也是按此方式配置,因为它直接用的 corejs ,没有用到 babel-polyfil

存在的问题

会污染全局环境,因为其实现方式是:

可能会覆盖用户的定义。

babel-runtime

用于解决 babel-polyfil 污染全局环境的问题。

仅自己开发的系统,可以不使用 babel-runtime ,但若是开发第三方库,则一定要用 babel-runtime

实现原理

使用 _promise ,_includes 等自定义名称的方式,避免和用户的定义冲突。

配置方法

  1. 安装 @babel/plugin-transform-runtime 在 devDependencies 中
  2. 安装 @babel/runtime 在 dependencies 中
  3. .babelrc 的 plugins 中添加
json 复制代码
    "plugins": [
        [
            "@babel/plugin-transform-runtime",
            {
                "absoluteRuntime": false,
                "corejs": 3,
                "helpers": true,
                "regenerator": true,
                "useESModules": false
            }
        ]
    ]

通常按此官方配置即可。