Webpack之Babel的运行过程和使用

Babel是一个 JavaScript 编译器，它是独立的，可以在webpack外使用。
Babel和Webpack各自负责不同的任务，它们可以可以协同工作来优化和构建现代JavaScript应用。

官网：Babel · Babel (babeljs.io)

Babel 是一个工具链，主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。下面列出的是 Babel 能为你做的事情：

• 语法转换
• 通过 Polyfill 方式在目标环境中添加缺失的功能（通过引入第三方 polyfill 模块，例如 core-js
• 源码转换（codemods）

老规矩，一句话概括：babel是用来转化js确保其兼容性的

例如：

1. 将现代JavaScript代码（如ES6/ES7/ES8+）转换为向后兼容的老版本JavaScript
2. 处理JSX（React语法）、TypeScript等其他JavaScript变种。

在官网上可以在线转换玩一玩：

Babel与Webpack合作流程

Babel的使用

Babel是可以独立于webpack单独使用的，

如果要独立的使用babel，需要安装下面两个库：

• @babel/core：babel核心库，提供了编译所需的所有api
• @babel/cli：提供一个命令行工具，调用核心库的api完成编译

但在实际项目中主要是和构建工具一起使用

babel本身没有做任何事情，真正的编译要依托于babel插件和babel预设来完成

1. 插件和预设

插件(plugin)和预设(preset)是Babel中两个重要的概念

Babel 的插件用于处理具体的代码转换任务；预设是一组预定义的插件集合，方便用户快速设置 Babel 的转换规则。

具体细节详见下文

2. 配置

Babel有配置文件，这里介绍两种比较常用的配置方法：

• babel.config.json

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

• .babelrc

  同上

3. 编译

@babel/cli提供了一个命令babel

npx babel src --out-dir dist

将 src 目录下的所有 JavaScript 文件编译到 dist 目录中

插件plugin

babel的插件plugin和预设preset都能转换代码。那么，如果同时配置了plugin和preset，它们转换代码的顺序是什么？

如上图所示，Plugins在Presets前运行，plugin的顺序是从前往后，而preset的顺序是从后往前。

举一个例子：

// babel.config.json
{  
    "plugins": ["transform-decorators-legacy", "transform-class-properties"],
    "presets": ["@babel/preset-env", "@babel/preset-react"]  
}

执行顺序：transform-decorators-legacy ——> transform-class-properties ——> @babel/preset-react ——> @babel/preset-env

plugin列表：Plugins List · Babel (babeljs.io)

示例： babel-plugin-transform-remove-console

移除控制台输出语句

安装：

npm install babel-plugin-transform-remove-console --save-dev

配置

{  
    "plugins": [["transform-remove-console", { "exclude": ["error", "warn"] }]]  
    // 可以添加参数 上面配置即是除去error和warn类型的控制台输出语句
}

预设preset

预设是一组预定义的插件集合

官方对常用环境编写了一些预设

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

以最常用的@babel/preset-env为例

{  
    "presets": [  
        [  
            "@babel/preset-env",  
            {  
            "useBuiltIns": "entry",  
            "corejs": "3.22"  
            }  
        ]  
    ]  
}

写法和plugins类似，都可以写配置参数，具体参数参考：https://babeljs.io/docs/babel-preset-env#options

@babel/preset-env需要根据兼容的浏览器范围来确定如何编译，可以使用 .browserslistrc 文件来指定目标环境

#支持每个浏览器厂商（例如 Chrome、Firefox、Safari）的最新两个主要版本
last 1 version 
# 支持市场份额超过1%的浏览器版本
> 1% 
# 支持当前维护的Node.js版本
maintained node versions

关于上面preset-env配置的corejs，其实是一个用来兼容新的api的库，这里有详细的解释core-js介绍及安装使用-CSDN博客

需要注意的是，需要先安装它才能配置。 npm i core-js