风动之石的博客

Babel 7

官方中文文档: https://www.babeljs.cn/open in new window

preset

plugins

preset 和 plugins 使用顺序

  • 插件在 Presets 前运行。
  • 插件顺序从前往后排列。
  • Presets 顺序是颠倒的（从后往前）。

配置方式

配置共有三种方式：

  1. 在package.json中设置babel字段。
  2. .babelrc文件或.babelrc.js文件。
  3. babel.config.js文件。

配置方式 1

第1种方式，需要在package.json文件里添加babel配置项，配置如下：

{
   "name":"babel-test",
   "version":"1.0.0",
   "devDependencies": {
       "@babel/core":"^7.4.5",
       "@babel/cli":"^7.4.4",
       "@babel/preset-env":"^7.4.5"
        // ...
   },
   "babel": {
       "presets": ["@babel/preset-env"]
   }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

配置方式 2

第2种方式，需要创建.babelrc文件或.babelrc.js文件。

.babelrc文件：

{
    "presets": ["@babel/preset-env"]
}
1
2
3

或.babelrc.js：

// Webpack 的配置文件也是这种写法
module.exports = {
    presets: ['@babel/preset-env']
};
1
2
3
4

该类配置文件是针对文件夹级别的配置，即项目根目录文件夹下或其子文件夹下都可以配置和应用该类配置文件，但子文件夹里的配置文件会覆盖祖先文件夹里的配置文件（TODO: 是配置对象整体覆盖还是合并配置对象覆盖相同的选项），因此通过这种方式，可以给不同的文件夹层级设置不同的规则。

配置方式 3

第3种方式，需要在项目根目录创建babel.config.js文件，该配置文件是针对整个项目，整个项目仅能有一个该类配置文件，且必须放置在项目根目录里。

module.exports = {
    presets: ['@babel/preset-env']
};
1
2
3

需要注意的是，

  • 方式1这种在package.json里添加babel配置项的方式，和方式2和3这种创建配置文件的方式，没有本质区别，主要看个人习惯。
  • .babelrc文件若是放置在项目根目录，其效果跟babel.config.js是一致的，若两种类型的配置文件都存在，则.babelrc文件会覆盖babel.config.js文件。

常用插件

包名功能说明
@babel/plugin-transform-runtime复用工具函数非必装开发依赖，和@babel/runtime同时存在
@babel/cli命令行执行babel命令工具非必装开发依赖，packages.json的script中使用了babel命令则需安装
babel-loaderwebpack中使用babel加载文件非必装开发依赖，webpack项目中使用
@babel/plugin-*babel编译功能实现插件开发依赖，按照需要的功能安装
@babel/preset-*功能实现插件预设开发依赖，按照需要的功能安装，js语言新特性转换推荐使用preset-env
@babel/polyfill低版本浏览器兼容库非必装生产依赖，已不推荐使用，推荐通过preset-env的useBuiltIns属性按需引入
core-js@*低版本浏览器兼容库非必装生产依赖，通过preset-env引入polyfill需安装此包，并通过corejs指定版本
@babel/runtime-corejs*不污染变量的低版本浏览器兼容库非必装生产依赖，plugin-transform-runtime设置开启后，可以不污染变量的引入polyfill

@babel/core

Babel 编译的核心包，提供了一些方法如：

  • transform/transformSync/transformAsync
  • transformFile/transformFile/transformFile
  • transformFromAst/transformFromAstSync/transformFromAstAsync
  • parse/parseSync/parseAsync
  • 以及其他一些高级 API

详情请见Babel 官网 - @babel/coreopen in new window。

需要注意的是，若是不使用插件或预设，则 Babel 会原封不动的将源码输出。

@babel/runtime

@babel/runtime，以模块化方式包含了 Babel 运行时辅助工具函数的实现的包，@babel/plugin-transform-runtime插件依赖该插件作为运行时依赖。

@babel/plugin-transform-runtime

@babel/plugin-transform-runtime。

TODO

  • 理清 Babel 各个插件之间的关系。

以前的 babel-transform-runtime 是包含了 helpers 和 polyfill。而现在的 @babel/runtime 只包含 helper，如果需要 polyfill，则需主动安装 core-js 的 runtime版本 @babel/runtime-corejs2 。并在 @babel/plugin-transform-runtime 的插件中做配置。

参考：

常用 preset

@vue/babel-preset-app

默认会包含以下polyfill：

  • es6.array.iterator
  • es6.promise
  • es6.object.assign
  • es7.promise.finally

详见vue-cli 之 @vue/babel-preset-appopen in new window