wordpress首页添加logo不错宁波seo公司
简介
bable 用于将 ES6 的语法编译为 ES5
- 只关心语法，不关心 API 是否正确。
- 不处理模块化（webpack 会处理）
搭建开发环境
- 安装相关的包
npm i @babel/cli @babel/core @babel/preset-env
- 新建文件 .babelrc，内容为
{ "presets": [["@babel/preset-env"]],"plugins": []
}
- presets 内为预设的 plugins 的集合
- 编译 jsx，用
@bakel/preset-react - 编译 TS，用
@babel/preset-typescript
- 编译 jsx，用
- bable 本身是个空壳，所有的编译是通过一个个 plugins 实现的
执行编译
npx babel src/index.js
babel-polyfill
babel-polyfill 是 core-js 和 regenerator 的集合。
- core-js 除了不支持生成器语法，其他都能编译
- regenerator 可编译生成器语法，弥补了 core-js 的不足
注意事项：
Babel 7.4之后弃用了 babel-polyfil，推荐直接使用 core-js和 regenerator，但面试中还是可能考察。
按需引入的配置方法
按需引入：只引入代码中使用的部分，其他部分不引入，可减少最终打包的体积。
.babelrc
"presets": [["@babel/preset-env",{"useBuiltIns": "usage",// corejs 的最新版本号"corejs": 3}]
],
Babel 7.4之后弃用了 babel-polyfil，但也是按此方式配置，因为它直接用的 corejs ，没有用到 babel-polyfil
存在的问题
会污染全局环境，因为其实现方式是：
可能会覆盖用户的定义。
babel-runtime
用于解决 babel-polyfil 污染全局环境的问题。
仅自己开发的系统，可以不使用 babel-runtime ，但若是开发第三方库，则一定要用 babel-runtime
实现原理
使用 _promise ，_includes 等自定义名称的方式，避免和用户的定义冲突。
配置方法
- 安装 @babel/plugin-transform-runtime 在 devDependencies 中
- 安装 @babel/runtime 在 dependencies 中
- .babelrc 的 plugins 中添加
"plugins": [["@babel/plugin-transform-runtime",{"absoluteRuntime": false,"corejs": 3,"helpers": true,"regenerator": true,"useESModules": false}]]
通常按此官方配置即可。