2022-03-20

Front

Babel

一、简介

Babel 是一个 JavaScript 编译器。
Babel 是一个广泛使用的转码器，可以将 ES6 代码转为 ES5 代码，从而在现有环境执行。

二、Babel 配置文件

Babel 是可以配置的，许多其他工具具有类似的配置：ESLint (.eslintrc), Prettier (.prettierrc)。
所有 Babel API 参数都可以被配置。然而，如果该参数需要用到 JavaScript 代码，你可能需要使用 JavaScript 代码版的配置文件。

1、babel.config.js

babel.config.js 是项目范围配置，主要用于以下功能： -

采用的是单一仓库（monorepo）模式
需要编译 node_modules

JavaScript 格式

module.exports = function (api) {
  api.cache(true);
  const presets = [ ... ];
  const plugins = [ ... ];
  return {
    presets,
    plugins
  };
}

2、babelrc.json

如果你的配置文件仅适用于项目的某个部分？那么 .babelrc.json 文件适合你！
.babelrc适用于简单单个包的静态配置。
在你的项目中创建名为 .babelrc.json 的文件，并输入以下内容：

{
 "presets": [...],
 "plugins": [...]
}

3、package.json

或者，还可以选择将 .babelrc.json 中的配置信息作为 babel 键（key）的值添加到 package.json 文件中，如下所示：

{
  "name": "my-package",
  "version": "1.0.0",
  "babel": {
    "presets": [ ... ],
    "plugins": [ ... ],
  }
}

三、babel 配置

1、预设（Presets）

Babel 的预设（preset）可以被看作是一组 Babel 插件和/或 options 配置的可共享模块。
官方已经针对常用环境编写了一些预设（preset）：

@babel/preset-env for compiling ES2015+ syntax
@babel/preset-typescript for TypeScript
@babel/preset-react for React
@babel/preset-flow for Flow

presets: [
    '@vue/cli-plugin-babel/preset'
],

@vue/cli-plugin-babel/preset 是 babel 的 vue 插件，在官方网站上面并没有找到。

2、插件（plugins）

Babel 的代码转换是通过在配置文件中应用插件（或预设）来实现的。

'env': {
    'development': {
        'plugins': ['dynamic-import-node']
    }
}

env 定义环境模式下插件，此处定义的是development 模式下的 dynamic-import-node 插件。

四、babel 常用功能

1、babel-cli

Babel 自带了一个内置的 CLI 命令行工具，可通过命令行编译文件。

2、babel-node

babel-cli 工具自带一个 babel-node 命令，提供一个支持 ES6 的 REPL 环境。它支持 Node 的 REPL 环境的所有功能，而且可以直接运行 ES6 代码。

它不用单独安装，而是随 babel-cli 一起安装。然后，执行 babel-node 就进入 PEPL 环境。

3、babel-register

babel-register 模块改写 require 命令，为它加上一个钩子。此后，每当使用 require 加载 .js、.jsx、.es 和 .es6 后缀名的文件，就会先用 Babel 进行转码。

4、babel-core

如果某些代码需要调用 Babel 的 API 进行转码，就要使用 babel-core 模块。

5、babel-polyfill

Babel 默认只转换新的 JavaScript 句法（syntax），而不转换新的 API，比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码。

举例来说，ES6 在Array 对象上新增了 Array.from方法。Babel 就不会转码这个方法。如果想让这个方法运行，必须使用babel-polyfill，为当前环境提供一个垫片。

参考：

https://www.babeljs.cn/docs/

暂无