Babel入门和配置

Babel是什么

Babel是一个javascript编译器，是一个工具链，主要讲ECMAScript2015+版本的代码转换为向后兼容的javascript语法。是其能够运行在旧版本的浏览器或者其他环境中。Babel能做事情：

• 语法转换
• 通过Polyfill能够在添加目标环境缺失的特性（@babel/polyfill模块提供）
• 源码转换

Babel尽可能用最少的代码并且不依赖太大量的运行环境。通过Babel提供的loose选项，可以在特定转换情况下在符合规范、文件大小和速度之间做折中

使用Babel

在项目中添加Babel的配置过程如下：

1. 安装所需要的包

   npm install --save-dev @babel/core @babel/cli @babel/preset-env
   npm install --save @babel/polyfill

   babel中的不同模块都放在不同的包下面。

2. 在项目根目录下创建babel.config.js的配置文件，其内容为：

   const presets = [
   	[
   		"@babel/env",
   		{
   			targets: {
   				edge: "17",
   				firefox: "60",
   				chrome: "67",
   				safari: "usage",
   			},
   			useBuiltIns: "usage", // 这个选项用于配置@babel/env如何处理polyfill
   			//有三种取值，usage、entry、false
   			//usage: 为polyfill添加特殊的import当他们被每个文件使用的时候
   			//打包工具仅仅之后加载一次相同的polyfill
   			//需要自己添加和安装corejs
   			corejs: "3.0.1"
   		}
   	]
   ]
   

   如果不添加useBuiltIns，有写API不会被编译，比如Array.from。

   babel配置文件细节请看文章后面的部分。

3. 运行babel命令进行转换，如下面将src目录下所有代码编译到lib目录：

   ./node_modules/.bin/babel src --out-dir lib

通过以上三步我们就可以使用babel，通过babel我们可以使用新的javascript语法来编写程序，然后通过babel编译，让他们能够在旧的浏览器上或其他能够执行javascript的环境上执行。

plugin和preset

代码转换的功能以插件的形式出现，插件是小型javascript程序，用于指导Babel如何对代码进行转换。

preset是一组预设的插件。如果不进行任何的配置，preset包含的插件将支持所有最新的javascript特性。

可以通过命令行或者配置文件的方式对插件和preset进行配置。

Polyfill

Polyfill转换目标环境不支持的特性。Polyfill包括core-js和一个自定义的regenerator runtime模块用于模拟完整的ES2015+环境。

polyfill应该和@babel/preset-env以及useBuiltIns选项一起使用，这样就不会自动导入没有被引入的polyfill。

为了使用polyfill，需要在入口的前面使用require/import导入polyfill

require("@babel/polyfill");
// 或者
import "@babel/polyfill";

在webpack中使用polyfill

1. 使用@babel/preset-env

• 如果使用了useBuiltIns: 'usage’选项，不需要再任何文件中引入@babel/polyfill，只需要使用npm install安装@babel/polyfill。
• 如果useBuiltIns: 'entry’选项使用，需要在入口文件的顶部通过require或者import导入polyfill
• 如果没有制定useBuiltIns或者useBuiltIns:false，需要在webpack.config.js中通过如下使用：

module.exports = {
	entry: ["@babel/polyfill", "./app/js"],
}

配置文件

配置文件的所有选项：https://babeljs.io/docs/en/options
常用的选项有下面两个：

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