babel使用笔记

babel使用配置笔记

es6及以上新增了很多语法和api，但是浏览器引擎却不支持这些语法和api，所以很好用的babel便成了很好的工具。

基础概念

• 语法：就是像es6的箭头函数一样的，称为语法
• api：比如es6新增的方法，promise，Map等

babel底层原理

babel编译实际上就是把写好的代码脚本（大部分编译器都是如此），变成浏览器可识别的脚本文件的过程，它有一下三个过程

• 解析(sytanx)
  • 标记有意义的字符串序列
  • 语法分析，生成相关的节点
  • 组合节点生成抽象语法树AST
• 转换(transform)
  • 转换一些关键的节点，比如let转换成var
• 生成
  • 将抽象语法树AST转换成浏览器可识别的代码

babel从本质上看，只是一个平台，它是基于插件架构的，我们可以开发插件，然后在这个平台上运行，如果什么插件也不提供，就会发现编译出来的文件没有变化，因为没有经过插件的加工。

babel插件

• babel核心
  • npm install @babel/core
  • 根据配置文件(.babelrc | | babel.config.js)转换代码
  • 这个是babel的核心插件
• babel脚手架
  • npm install @babel/cli
  • babel 输入文件名 --watch --out-file 输出文件名 命令执行
  • 有这个插件，就可以通过命令编译文件
• 杂七杂八的插件
  • @babel/plugin-transform-arrow-functions 箭头函数解析插件
  • @babel/plugin-transform-destructuring es6解构
• @babel/polyfill
  • 这个包本身是没有内容的，它依赖于core-js和regenerator-runtime这两个包
  • 解析es6的新语法

.babelrc

• plugins

/* .babelrc */
{
  "plugins": [
  	"@babel/plugin-transform-arrow-functions",
  	"@babel/plugin-transform-destructuring",
  	......
  ]    
}

我们会发现，插件要是一个个添加的话特别麻烦，所以有了`presets`，官方提供了很多`preset`（预置）

/* .babelrc */
{
  "presets": [
    ["@babel/preset-env"]
  ]
}

编译出来的文件，会发现箭头函数解决了，但是
这里还会有个问题就是，新的api没有被转换，这里我们改动下（在需要使用新api的文件里面引入@babel/polyfill），就可以正常使用了。
但是这个包是非常大的，所以需要改一下.babelrc

/* .babelrc */
{
  "presets": [
    ["@babel/preset-env",{
		"modules": false,
     	"useBuiltIns": "entry",
	}]
  ]
}

修改之后，会发现打包好的文件多了许多引入，正常行为；
但是我们想按需引入，就需要配置

/* .babelrc */
{
  "presets": [
    ["@babel/preset-env",{
		"modules": false,
     	"useBuiltIns": "usage",
	}]
  ]
}

"useBuiltIns": "usage"会扫描代码，实现按需引入。

。。。待续