Babel 入门
写代码的时候跟babel也打了不少交到，我对babel可以说的基本不懂的，每次要修改相关配置什么的我都是直接百度的， 网上的东西又不一定适用自己的项目，经常折腾大半天才能解决一个小小的问题。我这里就记录一些babel相关的知识， 不求什么都懂，只求下次要处理babel相关问题的时候知道去哪里找到解决方法，不要盲目百度查找别人的博客。
介绍
babel官网 里面有一些感觉挺智能的操作，比如你选择顶部导航栏的 Setup -> gulp 然后
就会展示出在gulp中使用babel的用法，包括一些例子，很方便。
官网都是英文的，随我来说读起来可能会有些难，我在里面发现了一些外链有中文的介绍：jamiebuilds/babel-handbook，里面的文档说的都是很基础的东西，最好全部看完。
中文翻译的有些没有翻译，这是就只能去官网文档查看了：文档
.babelrc
Plugin/Preset merging 配置合并规则
合并规则也比较简单，一般不会出现类似的情况，直接看官方文档就好啦
Plugin/Preset entries 配置
插件 和 预置项可以有几种不同的结构，是固定形式，不要写错了。以 插件 为例：
{
"plugins": [
// 单独的插件
'@babel/plugin-transform-classes',
// [EntryTarget, EntryOptions] 单独的插件 + 选项
['@babel/plugin-transform-arrow-functions', { spec: true }],
// [EntryTarget, EntryOptions, string] 带有选项和名称的独立插件
['@babel/plugin-transform-for-of', { loose: true }, "some-name"],
// ConfigItem 由babel.createConfigItem()创建的插件配置项。我还没有见过这种配置
babel.createConfigItem(require("@babel/plugin-transform-spread")),
]
}
EntryOptions 一般都可以在官方文档上查找得到。
这个 EntryTarget 的可选值为： string | {} | Function，可以是 String 形式 也可以是 require(xxx) 形式。
Plugin/Preset Path 还可以指定预置的相对/绝对路径，指定自己定义的预设
{
presets: [
'@babel/plugin-transform-classes',
require("@babel/preset-env"),
"./myProject/myPreset"
],
plugins: [
[require("@babel/plugin-proposal-class-properties"), { loose: true }],
require("@babel/plugin-proposal-object-rest-spread"),
],
}
Preset Ordering 预设顺序
预置 顺序是颠倒(从最后到第一)的，从数组最后一个开始。
Plugin Ordering 插件顺序
- 插件 在 预置 之前运行
- 插件顺序是先到后的。按顺序
name-normalization 命名标准化
这个文件在博客里面讲的很清楚，我想补充的是，presets 选项 和 plugins 选项 所指定的是有缩写形式的，注意一下就好。
官方文档在这， Babel希望插件的名称中有一个Babel -plugin或Babel - pre置前缀。为了避免重复，Babel有一个名称规范化阶段，它将在加载项时自动添加这些前缀。
大概意思是可以省略一些类似 babel-plugin- 或者 babel-preset- 的前缀，具体规则可以看官方文档，我觉得写全称会比较好。
{
"presets": [
"es2015", // babel-preset-es2015
"react", // babel-preset-react
"stage-2" // babel-preset-stage-2
],
"plugins": [
"@babel/mod" // @babel/plugin-mod
]
}
@babel/preset-env
[@babel/preset-env 是 babel 官方提供的非常强大的 预设。
你也可以使用你 自己制作的 预设，
比如我们常用的 Vue 框架，用的就是vue官方提供的 @vue/babel-preset-app
这里主要记录一些平时比较疑惑的问题。
Browserslist Integration
默认情况下 @babel/preset-env 将使用 browserslist 配置源，除非设置了目标(targets)或ignoreBrowserslistConfig选项。
当 useBuiltIns: entry 时，然后将 import '@babel/polyfill' 添加到您的输入文件中。这将根据 .browserslistrc 文件导入所有的polyfills，这样您就不再需要担心依赖项polyfills了，但是可能会使用一些未使用的polyfills增加最终的bundle大小。
Browserslist 文档在此，我觉得我们关注的主要是如何写配置，我看了文档，里面也没有太多相关的信息，不过有列举一些例子的含义， 这个网站特别好用 输入配置项之后会展示这个配置包含的所有浏览器，也可以在项目中使用 npx browserslist 这个命令生成包含的浏览器列表。
