Babel工具理解
Babel 是什么
最简单直白的说法是Babel 是一个编译器, 一个将es6+(等)其他更高级的javascript语法编译到指定版本(主要是一些比较老的浏览器所支持的版本)的js语法的 js -> js编译器
怎样使用Babel
浏览器端
体验Babel最简单的方式就是通过在<script>标签中直接使用babel-standalone了, 该软件包取代了已经过时的babel-browser包
<script type="text/babel">
// some es6 javascript code
// ...
</script>
需要注意的是使用script标签定时候type指定为text/babel
node api
在node环境中, Babel可以集成到node来使用
const babel = require("@babel/core");
import {transform } from "@babel/core";
import * as babel from "@babel/core";
// do something with babel
//...
Babel cli
第三种方式大概是最常用的方式了，该方式也可以和很多其他工具非常方便的集成
npm install @babel/cli
npx babel <dir> --outDir <some dir>
Babel 的架构
和众多的javascript世界的工具一样, "可扩展性"是Babel的一大重点, 所以随着Babel版本的发展，babel把核心组件@babel/core 变得越来越轻量化, 用官网的话来说就是babel核心几乎“什么也不做”，语言的转换编译和语法检查都是通过plugin和preset来实现的
Plugin
Babel的plugin用来实现babel的真正编译功能以及一些其他的附带功能。Babel的plugin又分为两种：1. transform plugin 转换插件和grammar plugin 语法插件
Transform plugin
Transfrom插件就是可以实现编译功能的插件, 在实现语法检查的同时可以实现编译, 也就是说加载transform插件以后不需要再单独加载grammar插件
Grammar plugin
语法检查插件, 仅仅进行语法检查而不进行编译转换的插件
Preset
插件作为配置单元来说粒度有时候太小了, 所以Babel允许你将一组插件放到一起组合成一个Preset, 以便于进行统一的配置
Babel 配置
正如上文所提到的内容, Babel的配置最主要是针对plugin和preset进行配置
{
"presets": [...],
"plugins": [...]
}
Babel的配置有多种方式, 需要注意的时候其中plugin的顺序和preset的顺序是相反的，plugin是从前到后，preset是从后到前，插件总在preset前运行。
一共有三种方式对Babel进行配置
在CLI命令行中配置
在CLI命令行中配置babel
babel --plugins @babel/plugin-transfrom-arrow-functions script.js
Node环境中使用API进行配置
在Node环境中使用API进行配置
require('@babel/core').transform('code', {
plugins: ["/*some plugin...*/"]
})
使用配置文件
在babel 7 中有两种类型的配置文件：1. project-wide 2. file-realtive
通常使用babel.config.json 作为project-wide的配置文件, 放在项目的root目录下(package.json)存在的目录。但是由于各种原因，可能需要在项目中使用多种不同的babel配置(比如monorepos), 所以babel 7 通过file-relative配置文件来实现了相对独立的babel配置。
babel.config.json
在项目的根文件使用babel.config.json对项目的babel进行配置
babelrc.json
babelrc.json 大体与babel.config.json起到相同的作用。但是是用来配置sub-package的
配置文件加载方式
抛开在CLI中使用命令行参数指定配置文件和在node api中使用参数指定配置文件的方式不谈，在@babel/cli中不指定配置文件的时候, @babel/cli会根据cwd来作为root文件夹，然后在root文件夹中寻找babel.config.json文件(而不是.babelrc.json)，可以通过指定rootMode配置参数修改查找root文件夹路径的方式。
我仔细查阅的官方文档关于加载配置文件的部分, 我感觉说的不是很清楚.猜测是进行编译的时候会以cwd为基点, 如果在root 下直接 编译sub package下的文件就不会加载.babelrc.json文件, 需要在root下的babel.config.json中配置babelrcRoot字段option或者进入sub-package的文件夹下进行编译才可以。
(猜测)这时候babel会向上搜寻root(或者使用root参数)找到babel.config.json文件, 然后再找到.babelrc.json文件, 然后对两份配置文件中的配置进行merge和replace, 最后按照特定的配置编译sub-package的文件
配置选项
具体的配置选项可以查阅官方文档来了解, 这里只说一点我觉得比较重要的地方
不同的调用babel的方式所能传递的配置参数是不同的, 最简单的例子是，写到配置文件中的配置参数中的configFile字段是意义不明的。
babel官方文档中也对这些参数类型做了分类, 其中programmatic是指可以在@babel/cli 命令行调用红中传递的参数, 以及直接在@babel/core 的node api中transform函数中传递的配置参数。在babel的集成环境下不应该传递这些参数