babel7 从新明白

2019年9月1日 191次阅读 来源: donglegend

测试环境

node 10.14.1
Babel 7.4.3

Babel 是什么？

Babel 是一个东西链，重要用于将 ECMAScript2015+版本的代码转换为向后兼容的 Javascript 代码，以便能够运转在当前和旧版本的浏览器或其他环境中。

Babel 重要功用点：

  • 语法转换
  • 垫片兼容处置惩罚，经由过程 Polyfill 体式格局在目标环境中增加缺失的特征
  • 源码转换
  • 其他…

运用理念

  1. Babel 重要经由过程 插件 plugins 的情势 到达转换代码的目标。
  2. Babel 本身内置了部份环境预设 preset-env,固然项目中 须要依据现实 举行设置。
  3. 为了轻易誊写参数，平常经由过程 设置文件的体式格局 babel.config.js 或许.babelrc.js(以编程的体式格局建立设置)或许.bablerc

Babel 编译两大中心

- 语法转换
- 垫片支撑

Bable 中心模块

@babel/core

Babel 语法转换中心功用，内置 helpers 插件模块，是语法转换的重要辅助东西

@babel/preset-env

这是一个异常智能的环境预设模块，依据 env 设置自动 剖析查找对应的 helper 和 plugins 举行代码编译转换
基础运用：

presets: [
  [
    '@babel/preset-env',
    {
      targets: {
        chrome: '77',
        android: '2',
      },
      debug: true,
      useBuiltIns: false,
    },
  ],
],

其他参数参考文档设置就好了，这里重点剖析一下 useBuiltIns 属性.
targets 可依据文档自行设置，这个比较简单。
debug 调试形式，发起开启，开启以后能够看到 那些 target 运用了那些 plugins 和 polyfill

// 开启debug 形式的构建信息
Using targets:
{
  "android": "2",
  "chrome": "77"
}

Using modules transform: auto

Using plugins:
  transform-template-literals { "android":"2" }
  transform-literals { "android":"2" }
  transform-function-name { "android":"2" }
  transform-arrow-functions { "android":"2" }
  ......
  ......

Using polyfills with `usage` option:

[/Users/weng/Documents/dongsheng/projects/bable/src/app.js] Added following core-js polyfills:
  es6.object.set-prototype-of { "android":"2" }
  es6.object.create { "android":"2" }
  es6.symbol { "android":"2" }
  es7.symbol.async-iterator { "android":"2" }

[/Users/weng/Documents/dongsheng/projects/bable/src/app.js] Added following core-js polyfills:
  es6.string.includes { "android":"2" }
  es7.array.includes { "android":"2" }
  es6.array.of { "android":"2" }

useBuiltIns 属性运用：

  • false 不开启 polyfill 处置惩罚，只做语法代码转换。
  • usage 开启 polyfill 处置惩罚（依靠@babel/polyfill 模块）
  • entry 开启 polyfill 处置惩罚（依靠@babel/polyfill 模块）
    useBuiltIns 的值只需不为 false,就不启动 polyfill 兼容，其他值都邑引入 polyfill，存在全量变量污染的特征。

@babel/plugin-transform-runtime & @babel/runtime & @babel/runtime-corejs2

一般状况下，每一个文件都有部分引入本身的 helpers 函数完成，打包后安排在文件的最顶部。
所以存在一个状况，多个文件运用了一样的语法，那末一样的 helpers 会屡次引入。
transform-runtime 就是处理这个题目的。
transform-runtime 为了削减代码量，引入的 helpers 只保存一份
看个栗子：
源代码:

//app.js
import { add } from './add';
function app() {
  add(1, 2);
  console.log(Object.assign({}, { ...{ name: 'd' } }));
  const _a = Array.of(3, 11, 8);
}
app();
export function add(a, b) {
  console.log('加法:');
  console.log(Object.assign({}, { ...a }));
}
// 不启动 transform-runtime 构建后：
// 包含了多个一样的 helpers

《babel7 从新明白》

plugins: ['@babel/plugin-transform-runtime'];
// 一样的helpers只加载一次,然则没有 要领api的完成

《babel7 从新明白》

// corejs设置版本号：2或许3，都邑引入非实例要领api的兼容完成
plugins: [
  [
    '@babel/plugin-transform-runtime',
    {
      corejs: 2,
    },
  ],
];

《babel7 从新明白》

transform-runtime 也是做兼容的:

  • @babel/runtime 只做 语法转换的(helpers 和 regenerator),只做语法转换, 没有新 api 的完成
  • @balel/runtime-corejs2 除了 helpers 和 regenarator ，另有 core-js 垫片兼容完成,替代 非实例要领

prest-env 影响 语法转换 和 垫片兼容
而且本身还兼容了 默许的 代码转换功用，依据详细 env 剖析要运用的 plugins

语法转换 和 垫片兼容 是两个 自力功用，只不过都是 依据 env 来 完成目标转换.

    原文作者：donglegend
    原文地址: https://segmentfault.com/a/1190000019373000
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞