项目配置Babel

• 当前@babel/core最新版本是：7.20.12

• 当前@babel/preset-env最新版本是：7.20.2

我们知道：core-js是一种polyfill，它提供了旧版本浏览器缺失的所有的ES6+ API的方法与实现。

在这里，以及下文，我们把通过引入core-js的某个模块，来实现旧版本浏览器不支持的某个ES6+ API的过程，叫做垫平。

我们看看core-js这个包里面的主要一些模块：

pic_5.png

• es：里面只包含有稳定的ES功能。

• proposals：里面包含所有stage阶段的API

• stable：它里面包含了，只有稳定的ES功能跟网络标准

所以，我们可以这么使用：

• 当我们只需要垫平某个稳定的ES6+ API，我们可以用es这个文件夹里的polyfill来垫平 （import X from 'es/xx'）

• 当我们需要用到提案阶段的API时，我就用proposals这个文件夹里的polyfill来垫平（import X from 'proposals/xx'）

• 当我们想垫平所有稳定版本的ES6+ API，可以导入用stable文件夹（import 'core-js/stable'）

• 当我们想垫平所有的ES6+ API（包括提案阶段），可以直接import 'core-js'

• Babel大体由两个功能组成：

1. 编译ES6+最新语法（let、class、() => {}等）

2. 实现旧版本浏览器不支持的ES6+的API（Promise、Symbol、Array.prototype.includes等）

• @babel/preset-env有以下两个功能：

3. 它只编译ES6+语法

4. 它并不提供polyfill，但是可以通过配置我们代码运行的目标环境，从而控制polyfill的导入跟语法编译，使ES6+的新特性可以在我们想要的目标环境中顺利运行

• @babel/plugin-transform-runtime也有以下两个功能：

5. @babel/runtime跟@babel/plugin-transform-runtime两者配合，可以减少打包体积

6. 也有一个配置功能，用来处理polyfill如何垫平

• 如果我们想要在旧浏览器用到ES6+ API时，我们应该安装3版本的core-js（或者后续更高版本的）；

那我们可以很清楚的知道：

• 实现Babel第一个功能：我们用@babel/preset-env就可以了

• 实现Babel第二个功能：我们就需要用core-js这个包来提供polyfill，并与@babel/preset-env或者@babel/plugin-transform-runtime的配置功能相互配合使用

我们先来看看@babel/preset-env的配置项有哪些：

// babel.config.js
const presets = [
    [
        '@babel/preset-env',
        {
            modules,
            targets,
            corejs,
            useBuiltIns,
            
            spec,
            loose,
            debug,
            bugfixes,
            include,
            exclude,
            forceAllTransforms,
            configPath,
            ignoreBrowserslistConfig,
            browserslistEnv,
            shippedProposals
        }
    ]
];
module.exports = {presets};

我们可以看到配置项还是蛮多的（有一些配置项，后期可能会废弃），但是，其实我们平时项目中主要用到前四个配置，所以在这里我们重点来看看前四个配置。

modules

---

• 功能：启用ES模块语法向另一种模块类型的转换

• 默认值：auto

• 可取的值："amd" | "umd" | "systemjs" | "commonjs" | "cjs" | "auto" | false

当我们设置成false的时候，Babel编译产生的一些辅助函数的引入方式会变成ES6的模式引入（import A from 'B'）。

我们把 use-transform-runtime[6] 这个案例Babel配置改成以下配置，感受一下modules这个配置的功能。

// babel.config.js

const plugins = [
    '@babel/plugin-transform-runtime'
]

const presets = [
    [
        '@babel/preset-env',
        {
            modules: false
        }
    ]
];

module.exports = {plugins, presets};

在没设置modules配置项时，编译后的文件是：