Babel

ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，使其能够运行在旧版本的浏览器；

语法转换：ECMAScript 2015+语法转换
Polyfill 即在目标环境中添加缺失的特性（core-js）：Promise
源码转换：JSX，TS

基础使用

安装

npm i --save-dev @babel/core @babel/cli @babel/preset-env -D

配置

新增 babel.config.json 配置

{
  "presets": [
    ["@babel/preset-env", {
      "targets":  "> 0.25%, not dead",
      "useBuiltIns": "usage", // 此配置项需安装 core-js@3
      "corejs": "3.6.5" // 对应core-js版本号
    }]
  ]
}

注：如果使用 Babel 旧版本，则配置文件应为 babel.config.js

运行

对 src 目录下所有代码编译至 lib 目录下

直接运行

./node_modules/.bin/babel src --out-dir lib

npm运行

// package.json
{
  // ...
  "scripts": {
    "babel": "./node_modules/.bin/babel"
  }
}

npm run babel -- src --out-dir lib

npx运行

npx babel src --out-dir lib

Polyfill

旧版本

安装：npm install --save @babel/polyfill

全局引入：require("@babel/polyfill") （仅 useBuiltIns 不为 usage时需要）

新版本

全局引入 import "core-js/stable"

按需引入

npm i core-js@3 --save

@babel/preset-env 预设配置 useBuiltIns: usage， corejs: 3.x.x

即转换代码时自动按需引入polyfill

配置

插件

按顺序执行插件代码转换

"plugins": [
  // 插件名称
  "@babel/plugin-transform-runtime",
  [
    "transform-async-to-module-method",
    // 插件参数
    {
      "module": "bluebird",
      "method": "coroutine"
    }
  ]
]

@babel/plugin-transform-runtime

优化babel转换代码后每个文件头的 helper 重复代码，转而依赖 runtime-corejs 函数包

避免直接从 core-js 注入polyfill覆盖环境的全局变量，提供沙盒环境

npm i @babel/plugin-transform-runtime -D // 开发环境编译所需
npm i @babel/runtime-corejs3 -S // 生产环境打包输出依赖

presets: [
  [
    "@babel/preset-env",
    {
      targets: "> 0.25%, not dead",
      loose: true,
    },
  ],
],
plugins: [["@babel/plugin-transform-runtime", { corejs: 3 }]],

注：该插件不可与 "@babel/preset-env 的 `useBuiltIns`` 配置项同时存在，否则沙盒环境失效

babel-plugin-import

转换为按需引入插件 babel-plugin-import

预设

预设基于插件，是对一组插件的使用

官方预设包括：

按逆序执行预设代码转换

{
  "presets": [
    ["@babel/preset-env", {
      "targets":  "> 0.25%, not dead",
      "useBuiltIns": "usage",
      "corejs": "3.6.5",
      "loose": true
    }]
  ]
}

@babel/preset-env

根据编译目标自动选择语法转换插件，实现快速配置的预设

targets： 编译目标

推荐使用 .browserslistrc 文件内声明

例：市场份额大于1% 或最新两个版本或未停止更新浏览器

> 1%
last 2 versions
not dead

useBuiltIns： 配置presets 如何处理 polyfill

entry 根据编译目标单独导入polyfill部分内容

usage 根据所使用到的特性按需导入polyfill部分内容

corejs： useBuiltIns配置时必须安装并声明polyfill来自corejs的版本

保证与package依赖包 corejs版本一致

@babel/preset-react

工具

@babel/register

Babel 提供的一个注册器（register），实现运行时转译代码；可用于CommonJS规范中使用ESModule

// index.js
require("@babel/register");

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

Babel关键插件与预设