Babel 笔记

Babel 笔记

Babel 是什么？

Babel是一个工具集，用于将高版本的 js代码 （如：ES6） 转换为版本低兼容性好的代码，从而可以运行在低版本浏览器或其它环境中。

安装

npm install -g npx # 安装 npx
npm init # npm 初始化
npm i @babel/cli @babel/core @babel/preset-env --save-dev # 安装 babel 依赖

配置文件

1. .babelrc.js、.babel.config.js

   module.exports = {
     presets: ["@babel/env"] // @babel/env 是 @babel/preset-env 的简写
   }
   

2. .babelrc

   {
     "presets": ["@babel/env"] // presets 预设
   }
   

3. 在 package.json

   {
       ...
       "babel": {
           "presets": ["@babel/env"]
       }
   }
   

以上四种配置效果相同，推荐使用.js的方式，可以进行动态配置。

编译

# 本地安装 @babel/cli 使用 npx 进行启动 -o 是--out-file 的简写 参数为输出的文件
npx babel main.js -o comiled.js

// 转换前 main.js
let fn = count => ++count

let p = Promise.resolve(0)
// 转换后 comiled.js
"use strict"; // 编译后默认采用严格模式

var fn = function fn(count) {
  return ++count;
};

var p = Promise.resolve(0);

可以看出 Babel 没有对 Promise 进行转换，因为 Babel 默认只转换新的语法，而不转换新的 API。

新的API分类两类：

1. 一类是Promise、Map、Symbol、Proxy、Iterator等全局对象及其对象自身的方法。
2. 一类是新的实例方法，例如数组实例方法 find()

如果像转换 Promise 可以使用 @babel/plugin-transform-runtime 插件

安装

npm i --save-dev @babel/plugin-transform-runtime

配置

module.exports = {
  presets: ["@babel/env"],
  plugins: [["@babel/plugin-transform-runtime", {
    corejs: 3
  }]]
}

编译

// 转换前 main.js
let p = Promise.resolve(0)

p.then(r => console.log(r))
// 转换后 comiled.js
"use strict"; 

var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");

var _promise = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/promise"));

var p = _promise["default"].resolve(0);

p.then(function (r) {
  return console.log(r);
});

Promise 被转换成了 _promise 辅助函数，同时采用 require 引入的方式，避免不同 js 文件内辅助函数的重复声明，只是对内置对象进行重命名（Promise => _promise），没有污染全局环境。

browserslist

目标环境配置表，用于配置编译文件的，浏览器运行环境，使用了@babel/preset-env这个预设，此时Babel就会读取browserslist的配置。

// 在 package.json
{
    ...
    "browserslist": [
        "> 1%",
        "not ie <= 8"
    ]
}
// 目标环境是市场份额大于1%的浏览器同时不考虑IE8及以下的IE浏览器。

// 新建一个 .browserslistrc 文件
> 1%
not ie <= 8

配置项

配置项使用以 @babel/env 为例

module.exports = {
  presets: [["@babel/env", {
      targets: {
          "ie": "8",
      },
      useBuiltIns: false,
      corejs: 2,
      modules: "auto"
  }]]
}

1. targets：写法与browserslist是一样的，如果对@babel/preset-env的targets参数项进行了设置，那么就不使用browserslist的配置，而是使用targets的配置。
2. useBuiltIns：这个参数项主要和 polyfill 的行为有关。取值为 false 的时候，会将 polyfill 全部引入到最终的代码里。参数有 entry, usage, false，默认 false ，相关包 @babel/polyfill
3. corejs：core-js 的版本，参数有 2,3 ， 默认 2，相关包 core-js
4. modules：该项用来设置是否把ES6的模块化语法改成其它模块化语法，参数有 "amd","umd", "systemjs","commonjs","cjs","auto",false，具体使用参考文档，默认 “auto“

@babel/plugin-transform-runtime 配置项

目前（babel 7）比较常用的预设

• @babel/preset-env
• @babel/preset-flow
• @babel/preset-react
• @babel/preset-typescript

目前（babel 7）比较常用的插件

• @babel/plugin-transform-runtime