Babel 配置工程师应知应会

caikeal 发布于2019-08-21 17:57 / 1011人阅读

摘要：，标题党了，本文仅介绍相关生态和一些配置心得。函数是在时候常用的工具函数，对编译模块时，会将用到的放到模块顶部。用来看最终引入了哪些必须配合，貌似加入了此项以后，会得到类似于的效果。

Babel

Sorry，标题党了，本文仅介绍 Babel 相关生态和一些配置心得。

Babel 各个 package 的用途

babel-core: 核心部分

babel-cli: 允许使用命令行

babel-node: babel-node 直接执行 es6/jsx 文件，自动加载 polyfill

babel-register: 以文件形式实现 babel-node 功能，多用于实时编译

// 以下相当于 babel-node ./test --presets react
require("babel-register")({ presets: ["react"] });
require("./test")

babel-plugin-external-helpers: 把 helpers 收集到一个共享模块或共享文件。
helper 函数是 babel 在 transform 时候常用的工具函数，对编译模块时，会将用到的 helpers 放到模块顶部。如果编译多个文件，就会重复引用，导致每个模块都定义一份。

polyfill 相关

babel-runtime: polyfill （内含 core.js 和 regenerator）、helpers 集合

babel-polyfill: 和 babel-runtime 类似，但直接整体引入目标环境中

babel-plugin-transform-runtime: 和 babel-polyfill 一样，但是不是一次性引入全部 polyfill，而是根据你该文件用到多少，引多少

对比上述两种 polyfill 方案，写库用 transform-runtime，写应用就 babel-polyfill

babel-polyfill 优点是全面，反过来说就是污染原生、增大体积

transform-runtime 优点是按需，纯净，不会污染原生，但会拖慢编译速度

stage

stage-x 是会根据 tc39 动态调整的

stage-0 > stage-1 > stage-2 > stage-3
比如你引入了 stage-1，自动包含了 stage-2 和 stage-3

一般化的 Babel 配置

基本都是使用 preset-env + 几个 stage，一般来说到 stage-2 就可以了。

babel-preset-env

debug: 用来看最终引入了哪些 polyfill、plugins

useBuiltIns: 必须配合 babel-polyfill，貌似加入了此项以后，会得到类似于 babel-plugin-transform-runtime 的效果。但是根据实验得出，还是 transform-runtime 在减肥上的效果更好。而且它不处理 helpers，你还是不能省略 external-helpers 这个插件

modules: 是否编译模块导入导出语句
webpack 和 rollup 都可以对 es 模块做 Tree Shaking，所以要设置 modules 为 false

loose: 宽松模式，编译的结果在运行时，其内部并不严格遵循 es6 标准
通过减少判断和限制，有效提高效率甚至包体积

exclude/include: 编译时排除或使用某插件

env

这个 env 和上面那个不同... 这里的 env 是指，一个 babel 文件针对不同环境（读取 NODE_ENV、BABEL_ENV），做不同配置

{
  "env": {
    "development": {
      "presets": [
        [
          "env",
        ]
      ]
    },
    "production": {
      ...
    }
  }
}

好用的 plugins 和 presets

babel-plugin-transform-remove-console
生产时，代码中应该不包含 console.log。

babel-plugin-transform-decorators-legacy
装饰器

babel-preset-minify
用于生产时压缩代码，包括前述的 remove-console。但是没有 uglify 牛逼。

React 相关

babel-preset-react 已经包含了一组 plugins

preset-flow: 编译 flow

syntax-jsx: 识别 jsx 语法

transform-react-jsx: 编译 jsx

transform-react-display-name: 自动添加组件的 displayName

但上面这些只是满足基础编译而已，你额外可以添加下面这个 preset 提高 React 应用的性能

npm i babel-preset-react-optimize

项目主页有详细的说明，简要概括下

transform-react-constant-elements
识别并转换可以转成常量的组件

transform-react-remove-prop-types
删除 propTypes

transform-react-pure-class-to-function
尽可能把 class 组件转为 functional 组件

References

你真的会用 Babel 吗?

React Plugins · Babel

thejameskyle/babel-react-optimize: A Babel preset and plugins for optimizing React code.

GPU云服务器云服务器应知 Babel babel cdn babel7

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90266.html

JSON应知应会

摘要：两种格式对象对象是一个无序的名称值对集合。数组数组是值的有序集合。值之间使用逗号分隔。这两个方法分别用于把对象序列化为字符串和把字符串解析为原生值方法用于将字符串转化成对象对应的表示利用将对象转换成字符串 JSON简介简介：JSON（JavaScriptObject Notation）、轻量级数据交换格式、非常适合于服务器与 JavaScript 的交互。 JSON两种格式： 1、对...

Flink_China 2019-08-16 10:52 评论0 收藏0
JSON应知应会

摘要：两种格式对象对象是一个无序的名称值对集合。数组数组是值的有序集合。值之间使用逗号分隔。这两个方法分别用于把对象序列化为字符串和把字符串解析为原生值方法用于将字符串转化成对象对应的表示利用将对象转换成字符串 JSON简介简介：JSON（JavaScriptObject Notation）、轻量级数据交换格式、非常适合于服务器与 JavaScript 的交互。 JSON两种格式： 1、对...

lijy91 2019-08-21 17:47 评论0 收藏0
【应知应会】15个常用的JavaScript字符串操作方法

摘要：输出和字符串大小写转换方法，和是针对特定地区的实现。输出输出输出输出基于指定的分割符将一个字符串分割成多个子串。 1 初始化 //常用初始化方法 var stringVal = hello iFat3; //构造函数创建方法 var stringObj = new String(hello iFag3); 2 length属性 var stringVal = hello iFat3; ...

wwq0327 2019-08-20 18:28 评论0 收藏0
【译】async/await 应知应会

摘要：原文地址原文作者翻译作者是在版本中引入的，它对于中的异步编程而言是一个巨大的提升。可能会产生误导一些文章把和进行了比较，同时说它是异步编程演变过程中的下一代解决方案，对此我不敢苟同。结论在中引入的关键字无疑是对异步编程的一大加强。原文地址: https://hackernoon.com/javasc...原文作者: Charlee Li 翻译作者: Xixi20160512 asy...

Ku_Andrew 2019-08-23 18:17 评论0 收藏0