webpack配置之babel-loader
我们在做项目的时候，都会用到babel-loader,今天来重温一下它的详细配置，gogogo!!!
官网地址：babeljs.cn
第一：Babel 是什么？
Babel 是一个 JavaScript 编译器
Babel 是一个工具链，主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。
下面列出的是 Babel 能为你做的事情：
// Babel 输入： ES2015 箭头函数
[1, 2, 3].map(n => n + 1);
// Babel 输出： ES5 语法实现的同等功能
[1, 2, 3].map(function(n) {
return n + 1;
});
第二：核心依赖包
@babel/core：babel转译器本身，提供了babel的转译API，如babel.transform等，用于对代码进行转译。webpack的babel-loader就是调用这些API来完成转译过程的。
@babel/parse：JS解释器模块内容。提供parse接口解释，最新的 ECMASCRIPT 标准，以及JSX，Flow，TypeScript，和其他实验性语言。这个模块便是以前的babylon。
@babel/traverse：JS遍历AST节点模块。用于遍历解释器模块解析出来的AST节点。
@babel/generator：JS生成器，主要用于将解释器解释得到的AST生成成为可解析的JS代码。
其他功能包：
@babel/cli：命令行工具，cmd运行babel解析过程。并可以设置包括输出路径等等信息。
@babel/types：用于验证，构建，和修改AST节点。
@babel/polyfill：包装了core-js和 regenerate-runtime。
@babel/runtime：和polyfill相似，但是不会修饰全局环境将会和plugin-transform-runtime一同使用。
@babel/registor：通过使用node.js的require字段来引入。会自动的通过babel解析当前文件。
第三：babel在解析JS文件的一个过程：
input string -> @babel/parser parser -> AST -> transformer[s] -> AST -> @babel/generator -> output string
image.png
第四：webpack配置
安装依赖
npm install babel-loader @babel/core @babel/preset-env
当下在好我们的依赖包之后，我们可以通过.babelrc文件来进行配置，或者我们也可以通过webpack.config.js来进行配置。
{
test: /\.(js|jsx|ts\tsx)$/,
use: 'babel-loader',
exclude: 'node_modules/'
},
配置.babelrc
.babelrc主要是为了配置preset和plugins内容项
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
//目标环境
"edge": "17",
"firefox": "60",
"chrome": "67",
"safari": "11"
},
"corejs": 2,
"useBuiltIns": "usage"
}
],
"@babel/preset-react"
]
}
其中的options可以有许多的关键字段，其中一个options是一个对象内容，当然依据不同的preset和plugins会提供不太相同的options的字段进行设置，这里我们是使用了preset-env预设所以暂时只介绍相关的字段。其中主要可用字段是有：
targets:
String | Array | { [String]: string } 。默认为{}，这一属性说明了当前的项目的适用环境。可以编写字符串的内容，作为boswerlist的遍历条件。例如："targets": "> 0.25%, not dead" 或者也可以使一个对象。来设置对于每一个浏览器最低版本的控制。例如：{ "targets": { "chrome": "58", "ie": "11" } }，其中的浏览器关键字从如下之中选取：chrome, opera, edge, firefox, safari, ie, ios, android, node, electron。
targets.esmodules
布尔值，是targets属性对象之中的一个值，其表示的是是否开启ES模式。可以和type='module'结合是用，来简化脚本。当检查到当前的属性的时候，targets之中的浏览器属性设置将会被无视。
module
其可以取值是："amd" | "umd" | "systemjs" | "commonjs" | "cjs" | "auto" | false默认值是 false。将当前的ES编译模式转化成为其他的语法模式，其中的cjs是commonjs的别名。
debug
布尔值，默认是false。将当前版本号和环境输出到控制台。
include
Array<String|RegExp>。这一属性表示的是永远包含的插件内容。当然输入的字符串内容是有一定规范的。要么是全名输入，或者可以使用*号表示，某一目录下所有的内容，或者是使用正则表达式的形势匹配需要引入的插件内容。
exclude
同include相同，不过它表示的是需要排除或者移除的插件内容。
useBuiltIns
"usage" | "entry" | false三个值之一，这一属性确定preset-env如何处理polyfills。
useBuiltIns：false：此时不对 polyfill 做操作。如果引入 @babel/polyfill，则无视配置的浏览器兼容，引入所有的 polyfill。
useBuiltIns：entry：根据配置的浏览器兼容，引入浏览器不兼容的 polyfill。需要在入口文件手动添加 import '@babel/polyfill'，会自动根据 browserslist 替换成浏览器不兼容的所有 polyfill。
"useBuiltIns": "entry",
"corejs": 2,
这里需要指定 core-js 的版本, 如果 "corejs": 3, 则 import '@babel/polyfill' 需要改成
import 'core-js/stable';
import 'regenerator-runtime/runtime';
usage：usage 会根据配置的浏览器兼容，以及你代码中用到的 API 来进行 polyfill，实现了按需添加。
"useBuiltIns": "usage",
"corejs": 2,
plugins
在设置文件之中我们也可以引入plugins（插件内容）。常见内容也和preset的是相通的，只是引入属性的关键字变成了plugins。当然每个插件也有自己的属性字段可以设置咯。
//要指定参数，请传递一个以参数名作为键（key）的对象
{
"plugins": [
[
"transform-async-to-module-method",
{
"module": "bluebird",
"method": "coroutine"
}
]
]
}
插件和Presets执行顺序：
插件在 Presets 前运行。
插件顺序从前往后排列。
Preset 顺序是颠倒的（从后往前）。
ignore
忽视文件属性配置。注意不能忽略nodemodule包中的包文件。例如：
{
ignore：[
index.js //当前文件将会被babel忽略编译。
]
}
如果要忽略node_modules的文件 ，需要找到webpack的配置文件，
minified
用于设置编译后是否压缩，当使用cli的进行打包配置的时候将会产生效果，但是如果使用其他的架构引入babel的话，当前配置可能会无效果。
comments
布尔类型，表示打包编译之后不产生注释内容。在webpack之中使用UglifyJsPlugin插件也是一样的效果。
env
{
"env": {
// test 是提前设置的环境变量，如果没有设置BABEL_ENV则使用NODE_ENV，如果都没有设置默认就是development
"test": {
"presets": ["env", "stage-2"],
// instanbul是一个用来测试转码后代码的工具
"plugins": ["istanbul"]
}
}
}
在打包编译的时候，env的值将会从process.env.BABEL_ENV之中获取，如果没有，则将会获取pocess.env.NODE_ENV，如果还是没有信息的话，将会默认是development。
