本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。
Babel 简介
Babel 是一个工具链，主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。
主要有以下功能：
- 语法转换
- 通过 Polyfill 方式在目标环境中添加缺失的特性（通过第三方
polyfill模块，例如 core-js，实现） - 源码转换 (codemods)
- 转换JSX 语法，高亮React代码
- 类型注释和推断（Flow和TypeScript）
- 丰富的插件转换管道
- 生成Source map 文件，便于开发调试
- 标准的代码编写规范
项目使用
将
ES5+(ES6 ES7 ES8 ...) 的代码编译转化为当前浏览器可执行的代码：
1， package安装依赖包
npm install --save-dev @babel/core @babel/cli @babel/preset-env
复制代码2， 在src根目录下创建.babelrc或者babel.config.json 官方建议第二种扩展性更高
{
"presets": [ # 预设配置
["@babel/env",
{
"targets": {
"edge": "17",
"firefox": "60",
"chrome": "93",
"safari": "11.1"
},
"useBuiltIns": "usage",
"corejs": "3.6.5"
}
]
],
"plugins":["a", "b", "c"] # 插件配置
}
复制代码Presets：一组 Babel 插件和/或 options 配置的可共享模块,按照倒序的顺序执行。(从最后一个执行)；
Plugins：将某一种需要转化的代码，转为浏览器可以执行代码,按照顺序依赖编译，即为a --> b --> c；
3，运行此命令将 src 目录下的所有代码编译到 lib 目录
./node_modules/.bin/babel src --out-dir lib
# 或者
npx babel src --out-dir lib
复制代码主要插件 Plugins 详解
babel-preset-es2015 ( ES2015 / ES6 插件集合 )
将 ES2015(es6) 的 javascript 代码 转化浏览器兼容的代码，配置都包含在 @babel/preset-env 中，主要属性有以下几种，ps:点击对应链接即可查看代码转换示例。
- arrow-functions：箭头函数
- block-scoped-functions：函数命名的方式转话，改为赋值的形式
- block-scoping：let 转为 var
- classes： es6 的类转化
- computed-properties：属性命名的转化
- destructuring：析构函数转化
- duplicate-keys：属性优化
- for-of：for of 的转化
- function-name：优化函数命名
- instanceof：instanceof 转化
- new-target：继承 extends 转化
- object-super：super 转化
- spread：扩展属性转化 {...other}
- template-literals：字符串模版
- unicode-regex：将正则的匹配字符串转为 unicode
- 。。。
babel-preset-es2016 （ ES2016 / ES7 插件集合 ）
将 ES2016(es7) 的 javascript 代码转为浏览器兼容代码
babel-preset-stage-x （ ES2018/stage 插件集合 ）
将 stage 阶段的代码转化浏览器兼容代码
- async-generator-function：将异步函数进行转化
- dotall-regex：点号正则优化
- object-rest-spread：解析构优化
- optional-catch-binding：catch 加 finally 优化
- unicode-proprty-regex：将 Unicode 正则表达式转换为非 Unicode 正则表达式
Modules 模块化
将项目中不同的 export default * 转为输出不同的模块类型：
Experiental （ 试验阶段 ）
- class-properties：class 的静态属性转化
- decorators：装饰器转化
- export-default-from：export 优化
Presets 介绍
文件介绍
{
"presets": [
[
"@babel/preset-env", # 主要用于 es 的语法转义，下面为具体配置
{
"target": { # 为项目配置的支持/定位的环境
"browser": ["ie>=8", "chrome>=62"],#浏览器支持情况
"node": "8.9.0",# 指定node 版本号
"safari": "tp" # 指定safari 的版本
},
"modules": false,# 关闭 开启es6模块转化
"debug": true, # 是否开启console.log调试
"uglify": true,# 代码压缩
"useBuiltIns": true #根据preset-env引入polyfill
}
]
]
}
复制代码引入polyfill文件
# 在main入口文件引入
require("@babel-polyfill");
#es环境
import "@babel-polyfill"
# webpack环境
entry:["@babel-polyfill", "./main.js"]
# HTML独立文件
<script src = "./babel-polyfill.js"></script>
复制代码.babelrc 配置详解
{
"presets":[ #预设，插件的集合，倒序执行
"react",
["env",{...}],
"stage-0"
],
"plugins":[# 插件，优先执行插件，其次执行预设
"pluginName",
["transform-runtime",{...}]
],
"ignore":["public",'dist'], # 忽略文件
"minified":boolean,# 是否压缩代码
"comments":boolean,# 是否显示注释
"env":{# 设置环境变量 取值BABEL_ENV
"test":{ # test环境的配置
"presets":[],
"plugins":[]
}
},
...
}
复制代码Vue 项目配置
{
"presets": [
[
"env",
{
"modules": false # 是否输出模块
}
],
"stage-2"
],
"comments": false, # 不输出注释
"plugins": ["transform-runtime", "syntax-dynamic-import"],# 插件集合 运行编译和动态引入
"env": {
"test": {# 环境变量名称
"presets": ["env", "stage-2"], # 预设配置
// instanbul是一个用来测试转码后代码的工具
"plugins": ["istanbul"]
}
}
}
复制代码React 项目配置
{
"presets": [["env", { "modules": false }], "stage-2", "react"],# 预设配置
"plugins": ["transform-runtime"],# 插件集合 运行编译
"comments": false,# 不输出注释
"env": {
"test": {# 环境变量名称
"presets": ["env", "stage-2"], # 预设配置
"plugins": ["istanbul"] # 测试转码后代码的工具
}
}
}
复制代码总结
由于之前没有认真的学习过，都是东拼西凑的得到的知识，信息量有点大，很多配置属性在开发工程中都没有使用过，这里也是大概的把经常使用的属性介绍下，更多更加详细的配置说明，建议大家去官网参详。自勉的一句话送给大家：学习不分轻重缓急，只要有进步，有收获就好！！