Halo，Babel

时间 2019-11-08

标签 halo babel 繁體版

原文原文链接

本文基于 babel 7 作叙述，若是以前一直使用 babel 6 的同窗能够先看本文关于 babel 6 升级 babel 7 的相关模块javascript

Babel 是如何工做的呢？

Babel 的编译过程能够分为三个阶段：java

解析（Parsing）：将代码字符串解析成抽象语法树。
转换（Transformation）：对抽象语法树进行转换操做。
生成（Code Generation）: 根据变换后的抽象语法树再生成代码字符串。

解析：@babel/parser (Babylon）

使用 @babel/core 中的 parse API 来进行词法分析（分词+语法分析），转化成 AST，为 Transform 准备。
Tip：感兴趣的同窗能够阅读这篇文章深刻了解下：www.alloyteam.com/2017/04/ana… 本文重在讲述 babel 在项目中的实践呀。node

转换：使用者能够决定的过程

使用 @bable/core 中的 transform API 来进行转义；咱们熟知的插件就是应用在这一过程，若是这一阶段不使用任何插件，Babel 将在生成阶段输出原样的代码；react

plugins 和 presets 如何配合工做的呢？

Preset 是 Babel 官方作的一些插件集，能够把它理解成一些插件集合预设，减轻繁琐的配置。每一年每一个 Preset 只会编译当年批准的内容；
plugin/preset 执行顺序：对于转义的节点，babel 先按照配置文件的 plugins 数组配置去执行，执行完，再倒序读取 presets 配置项里每个预设，以下图：

2. 经常使用插件 plugins: 能够根据项目开发须要去引入对于的插件，在 Bable plugins 查询文档中查询，对于大部分插件能够经过升级 @bebel-preset-env 来引入，而对应实验性的语法，则须要单独引入对于的 plugin 来支持，在 Babel 各个阶段插件集合中 Experimental 对应的插件列表中去查询；例如：

@babel/plugin-proposal-class-properties
@babel/plugin-proposal-decorators
@babel/plugin-proposal-export-default-from
babeljs.io/docs/en/bab…

经常使用预设 presets:

@babel-preset-env：根据用户的自定义的配置项，来将 ES2015+ 转化为 ES5，详细说明能够看一下@babel-preset-env 配置说明
@babel/preset-react：转义 react 代码，详情能够阅读：www.babeljs.cn/docs/babel-…
@babel-preset-typescript：转义 typescript 代码，能够阅读该文章来加深对该插件的认识喔：iamturns.com/typescript-… 一般对于 react 项目，presets 使用 @babel/preset-env + @babel/preset-react 便 ok 了，可是随着 TypeScript 的火热，babel 7 为开发者带来了 @babel/preset-typescript ，用于支持 ts 开发，从下图能够看出，这个插件使用趋势在增加势头很猛呀；

配置推荐

// react + typescript 
"presets": [
    [
      "@babel/preset-env",
      {
        "targets": "cover 95%, safari >= 7", # 根据项目实际状况配置
        "modules": "cjs",
        "useBuiltIns": "usage"
      }
    ],
    "@babel/react",
    "@babel/preset-typescript", # 若是项目使用 typescript 开发须要安装这个预设
  ]
复制代码

生成：

用 babel-generator 经过 AST 生成 ES5 代码； TIP：若是在 babel 的配置中，不使用任何 presets 和 plugins，那么生成的代码和原代码无异；webpack

你须要知道的 @babel-polyfill

背景：

因为 babel 自己只负责语法转换，好比将 ES6+ 语法转化为 ES5。可是若是有些对象、方法，浏览器自己不支持，好比：
- 全局对象：Promise、WeakMap 等。
- 全局静态函数：Array.from、Object.assign 等。
- 实例方法：好比 Array.prototype.includes 等。此时，须要引入 @babel-polyfill 来模拟实现这些对象与方法。
@babel-polyfill 主要包含了core-js和regenerator两部分。
- babel-polyfill：提供了如 ES五、ES六、ES7 等规范中中新定义的各类对象、方法的模拟实现。
- regenerator：提供 generator 支持，若是应用代码中用到 generator、async 函数的话用到。

不足：

@babel-polyfill 形成代码代码体积过大以往项目中使用 polyfill，常规的作法有两种：
- 在入口 js 文件中 import @babel-polyfill
- 在webpack 的 entry 配置里写入 @babel-polyfill
@babel-polyfill 的会污染全局空间和内置原型对象像Map，Array.prototype.find这些就存在于全局空间中。

@babel-polyfill VS @babel-runtime

@babel-runtime 出现背景

@babel-polyfill 的不足，在平常业务开发中，影响不是很大的，可是若是在通用的第三方库的开发中引入 @babel-polyfill，就会带来潜在的问题：好比咱们项目中自定义了一份新的 API 的实现，可是引入的第三方通用库使用了polyfill，而且实现了一样的方法，就会将咱们原有的方法覆盖（至少会有存在这样的风险），为了不这样的问题，babel 推出了 @babel-runtime 来实现 @babel-polyfill 的绝大部分的功能，它将开发者依赖的全局内置对象等，单独抽成模块，经过模块导入的方式，避免了对全局做用域的污染。 因此，若是是开发库、工具，能够考虑使用 @babel-runtime；git

如何使用 @babel-runtime 来实现 polyfill

安装 @babel/plugin-transform-runtime 和 @babel-runtime

# babel-plugin-transform-runtime 用于构建过程的代码转换
npm install --save-dev babel-plugin-transform-runtime 
npm install --save babel-runtime
复制代码

.babelrc plugins 中添加 @babel/plugin-transform-runtime

{
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "absoluteRuntime": false,
        "corejs": false,
        "helpers": true,
        "regenerator": true,
        "useESModules": false
      }
    ]
  ]
复制代码

@babel-runtime + @babel/plugin-transform-runtime 实现细节

@babel/plugin-transform-runtime 插件主要作了以下三件事情：es6

core-js aliasing：自动导入 @babel-runtime/core-js，将全局静态方法、全局内置对象映射到对应的模块；

# js
var sym = Symbol();

var promise = new Promise();

console.log(arr[Symbol.iterator]());
# 转化后
"use strict";

var _getIterator2 = require("@babel/runtime-corejs2/core-js/get-iterator");

var _getIterator3 = _interopRequireDefault(_getIterator2);

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

var _promise2 = _interopRequireDefault(_promise);

var _symbol = require("@babel/runtime-corejs2/core-js/symbol");

var _symbol2 = _interopRequireDefault(_symbol);

function _interopRequireDefault(obj) {
  return obj && obj.__esModule ? obj : { default: obj };
}

var sym = (0, _symbol2.default)();

var promise = new _promise2.default();

console.log((0, _getIterator3.default)(arr));
复制代码

Helper aliasing：将内联的工具函数移除，改为经过 @babel-runtime/helpers 模块进行导入

# js
class Person() {}

# 转化后
"use strict";

var _classCallCheck2 = require("@babel/runtime/helpers/classCallCheck");

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

function _interopRequireDefault(obj) {
  return obj && obj.__esModule ? obj : { default: obj };
}

var Person = function Person() {
  (0, _classCallCheck3.default)(this, Person);
};
复制代码

Regenerator aliasing：用于在项目中使用 async/generator 时，自动导入 @babel-runtime/regenerator 模块

# js
function* foo() {}

# 转化后
"use strict";

var _regenerator = require("@babel/runtime/regenerator");

var _regenerator2 = _interopRequireDefault(_regenerator);

function _interopRequireDefault(obj) {
  return obj && obj.__esModule ? obj : { default: obj };
}

var _marked = [foo].map(_regenerator2.default.mark);

function foo() {
  return _regenerator2.default.wrap(
    function foo$(_context) {
      while (1) {
        switch ((_context.prev = _context.next)) {
          case 0:
          case "end":
            return _context.stop();
        }
      }
    },
    _marked[0],
    this
  );
}
复制代码

@babel-runtime + @babel/plugin-transform-runtime 缺点

因为 @babel-runtime 和 @babel/plugin-transform-runtime 实现方式致使它不会对实例方法进行扩展（例如 Array.prototype.includes()），因此在使用中，存在很大的隐患，简单的说，若是你使用的是 @babel-runtime 实现的polyfill，那么，就会出现你使用的部分原型方法得不到支持而报错，这是不能接受的，因此我推荐在项目开发中，仍是使用 @babel-polyfill 比较稳妥。github

@babel/preset-env preset 带来的 @babel-polyfill 按需引用

TIP: 关于 @babel/preset-env 的详细内容能够查看下一小节的内容经过在 presets 里使用 @babel/preset-env preset，设置 useBuiltInts 为 usage 或者或者 entry 来实现按需引入；与@babel/preset-env一块儿使用时（注意，仍然须要安装@ babel-polyfill。）web

若是在.babelrc 中指定 useBuiltIns：'usage'，则不要在webpack.config.js 和入口 js 文件引入 @babel-polyfill。
若是在.babelrc中指定了useBuiltIns：'entry'，则经过require或import将@ babel / polyfill包含在应用程序入口点的顶部。
若是未指定 useBuiltIns 键或在 .babelrc 中使用 useBuiltIns：false 显式设置，请将@ babel / polyfill直接添加到webpack.config.js 对应的配置中去。

你须要了解的 @babel/preset-env

使用趋势

从 2018-9-17 发布至今，每周的下载量都在稳步提高，推荐小伙伴们在项目中使用基于 babel 7的 @babel/preset-env 插件预设；chrome

简单介绍

@babel-preset-env 将基于你的实际浏览器及运行环境，自动的肯定 babel 插件及 polyfill，编译ES2015 及此版本以上的语言，在没有配置项的状况下，@babel-preset-env 表现的同 babel-preset-latest同样(或者能够说同babel-preset-es201五、babel-preset-es201六、 babel-preset-es2017 结合到一块儿表现的一致)。

优势

能够根据配置的目标环境自动采用须要的 babel 插件;
- 简化了 babel 配置
- 按需引入必要插件，优化了包体积；
支持 polyfill 相关配置，按需引入相关的 polyfill，优化代码体积； TIP：能够经过 www.npmjs.com/package/@ba… 来查看项目版本使用的 @babel/preset-env 版本依赖的 plugins，保证代码中使用的 js 新的语言特性获得支持，若是没有，能够经过升级 @babel/preset-env 或者安装对应的 plugin 来支持；

不足：

对于实验属性（babel-preset-latest 不支持的）须要手动安装配置相应的 plugins 或者 presets; 能够经过 babeljs.io/docs/en/plu… 来查询相关的实验属性对应的插件，来引入支持业务开发；

配置指南

浏览器配置相关

每一个浏览器最近的两个版本和 IE 大于等于7的版本所需的 polyfill 和代码转译。

"babel": {
  "presets": [
    [
      "env",
      {
        "targets": {
          "browsers": ["last 2 versions", "ie >= 7"]
        }
      }
    ]
  ]
},
复制代码

支持市场份额超过5%的浏览器。

"targets": {
  "browsers": "> 5%"
}
复制代码

指定浏览器版本

"targets": {
   "chrome": 56
 }
复制代码

polyfill 配置: useBuiltIns（默认 false)

@babel-preset-env 默认只支持对语法的转化，须要开启useBuiltIns配置才能转化 API 和实例方法, 来为标准库中的新功能提供了 polyfill，为内置对象，静态方法，实例方法，生成器函数提供支持。 @babel-preset-env 能够实现基于特定环境引入须要的polyfill。

可选值包括："usage" | "entry" | false, 默认为 false，表示不对 polyfills 处理；
entry：根据target中浏览器版本的支持，将polyfills拆分引入，仅引入有浏览器不支持的polyfill；
usage：检测代码中ES6/7/8等的使用状况，仅仅加载代码中用到的polyfills；

Node.js 配置相关

若是你经过Babel编译你的Node.js代码，babel-preset-env 颇有用，设置 "targets.node" 是 "current"，支持的是当前运行版本的nodejs：

const presets = [
  [
    "@babel/env",
    {
      node: 'current',
    },
  ],];
module.exports = { presets };
复制代码

spec : 启用更符合规范的转换，但速度会更慢，默认为 false

loose：是否使用 loose mode，默认为 false

modules：将 ES6 module 转换为其余模块规范，可选 "adm" | "umd" | "systemjs" | #### "commonjs" | "cjs" | false，默认为 false

debug：启用debug，默认 false

include：一个包含使用的 plugins 的数组

exclude：一个包含不使用的 plugins 的数组

babel 6 迁移 babel 7

在迁移以前建议熟悉 babel 7 具体带来的改动，这样有助于咱们在项目中进行具体的优化和进行针对性的配置修改

Babel 7 带来的改动

熟悉相关重要改动，能够帮助咱们更好的去配置项目，使用最新支持的特性，提升编码效率

移除了年度预设用法
带有env 的预设已经发布了一年多，如今它会取代一下全部的用法：

babel-preset-es2015
babel-preset-es2016
babel-preset-es2017
babel-preset-latest

移除 stage 预设用法，迁移时能够参考 github.com/babel/babel… 进行升级；也能够经过 babel-upgrade 来使用命令行进行替换
移除 @babel-polyfill 中的提议：能够参考一下这里：github.com/babel/babel…
包重命名：babylon 如今从新命名为 @babel/parser (看起来是被收了）
包命名空间
babel 6 升级 babel 7 最重要的一个改动之一就是给全部的包加了命名空间，这样作能够减小不少意外或者故意的命名问题，能够与社区的其余插件有一个清晰的区分，造成一个 babel 的命名规范；例如：babel-preset-env 更名为 @babel/preset-env；
把 TC39 提议都换成 -proposal 把那些非年度预设的 TC39 插件中的-transform都换成了-propoal，这样能够更好的区分出一个提议是否为 javascript 官方的。例如：

@babel/plugin-tranform-function-bind 换成 @babel/plugin-proposal-function-bind

移除包中的年份
一些插件中还带有 -es2015等字符，如今作了统一的规范：通通去掉，例如： @babel/plugin-transform-es2015-classes 换成了 @babel/plugin-transform-classes
分离 React 和 Flow 之间的预设
解析选项修改
如今 Babel 的配置选项会比之前的 Babel6 更加严格。像这样的一个逗号分隔列表："presets": "es2015, es2016"在之前的版本中能够运行，从此都要改为数组才能够。可是这个对 CLI 不受影响，它依然可使用逗号分隔的字符串。

# right
{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
}

# wrong
{
   "presets": "@babel/preset-env, @babel/preset-react"
}
复制代码

插件/预设的暴露
从此全部的插件和预设向外暴露的都必须是一个函数，而不能是一个对象，这能够帮助咱们进行缓存。
JSX Fragment Support (<>)

render() {
  return (
    <>
      <ChildA />
      <ChildB />
    </>
  );
}

// output 👇

render() {
  return React.createElement(
    React.Fragment,
    null,
    React.createElement(ChildA, null),
    React.createElement(ChildB, null)
  );
}
复制代码

TypeScript Support (@babel/preset-typescript)
使用前（带有类型声明的 react 代码块）

interface Person {
  firstName: string;
  lastName: string;
}

function greeter(person : Person) {
  return "Hello, " + person.firstName + " " + person.lastName;
}
复制代码

使用后（移除类型声明）

function greeter(person) {
  return "Hello, " + person.firstName + " " + person.lastName;
}
复制代码

Automatic Polyfilling (experimental)
在 babel 6 中，对于 polyfill 的支持都是采用以下方式：

import "@babel/polyfill";
复制代码

但它包括整个 polyfill，若是浏览器已经支持，你可能不须要导入全部内容。这与@babel/preset-env 试图用语法解决的问题相同，因此咱们在这里将它应用于polyfill。选项 useBuiltins：“entry” 经过将原始导入仅拆分为必要的导入来实现此目的。可是咱们能够经过仅导入代码库中使用的 polyfill 来作得更好。选项“useBuiltIns：”usage“是咱们第一次尝试启用相似的东西（详细说明）。关于 @babel/preset-env 详细的说明，能够参考这篇文档：@babel-preset-env 配置说明，理解其中每个配置，来利用 babel 新增的 api 来结合项目自身特色进行配置，进行优化。

配置 Babel 支持 TypeScript 环境开发

能够参考我这篇 JavaScript 项目迁移 TypeScript 实践分享文章来作迁移（在余下时间我会从新整理发布到掘金）

安装 @babel/preset-typescript 进行 babel 配置

# .babelrc
# yarn add @babel/preset-typescript
"presets": [
    [
      "@babel/env",
      {
        "targets": "cover 95%, safari >= 7",
        "modules": "cjs",
        "corejs": 2,
        "useBuiltIns": "usage",
      }
    ],
    "@babel/react",
    "@babel/typescript"
  ],
复制代码

建立 TypeScript 配置文件 tsconfig.json

{
  "compilerOptions": {
    "module": "esnext",
    "target": "es6",
    "allowSyntheticDefaultImports": true,
    "baseUrl": ".",
    "sourceMap": true,
    "outDir": "../client-dist",
    "allowJs": true,
    "jsx": "react",
    "noEmit": true,
    "moduleResolution": "node",
    "isolatedModules": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    // `vs code`所须要的，在开发时找到对应的路径，真实的引用是在`webpack`中配置的`alias`
    "paths": {
    }
  },
  # 这里这么设计，是由于咱们项目历史缘由，js 的业务代码比较多，在跑 ci tsc 作类型检查的时候，只走 tsx? 类型文件
  "include": ["src/**/*.ts", "src/**/*.tsx"],
  "exclude": [
    "node_modules"
  ]
}
复制代码

webpack 配置修改，支持 TypeScript 开发环境
- babel-loader 扩展对 .ts?x 文件解析
- resolves 对应的 extensions 增长对 ts 与 tsx 文件的支持

4. package.json 扩展 TypeScript 类型检查命令

# package.json
{
  "scripts": {
     "tsc": "tsc --noEmit"
  }
}
复制代码

扩展 TypeScript 相关的 Eslint 配置，进行代码规范约束
- parser 由 babel-eslint 替换为 @babel-eslint/parser
- extends 属性增长对 typescript 代码约束插件
  - prettier
  - prettier/react
  - prettier/@typescript-eslint
- plugins 属性扩展 @typescript-eslint 插件

总结

本人想经过本文和你们分享一下本身关于 Babel 在项目中使用的一些心得，但愿能够给小伙伴们带来一些帮助，Babel 不是一个黑盒子，而是一个给开发者提供了各类各样选择的工具集，术业有专攻，只须要稍微花一点时间来理解它，就能够在项目中很安全地使用它，利用 Babel 团队不断努力给咱们带来的新的语言特性的支持；你们有什么疑问能够直接给我留言评论。

参考

gitissue.com/issues/5c18… juejin.im/post/5d0373… juejin.im/post/5d74d4… segmentfault.com/q/101000000… www.jianshu.com/p/d078b5f30… jsweibo.github.io/2019/08/05/… juejin.im/post/5c03a4… blog.hhking.cn/2019/04/02/… github.com/sorrycc/blo… github.com/Kehao/Blog/… juejin.im/post/5b07e7… jsweibo.github.io/2019/08/09/… github.com/SunshowerC/… zhuanlan.zhihu.com/p/43249121 pdsuwwz.github.io/2018/09/29/… - babel 升级踩坑 juejin.im/post/5b174f… juejin.im/entry/5b108… github.com/lmk123/blog… segmentfault.com/a/119000001… segmentfault.com/a/119000001… www.zcfy.cc/article/bab… juejin.im/entry/5b108…