Babel7|Babel7 使用总结 Babel7使用总结

一、基础配置
1、基础依赖包 npm i babel-loader @babel/core -D
2、添加.babellrc配置文件

{ "presets":[], //预设 "plugins":[]// 插件 }

3、package.json声明 【Babel7|Babel7 使用总结】package.json 中声明的browserslist影响babel和postcss,babel 是优先读取.babelrc 文件中@babel/preset-env 的 targets 属性，为了统一建议在package中声明

"browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ]

二、转码
Babel 默认只转换新的 JavaScript 句法（syntax），而不转换新的 API，想要完全转码需要搭配其他依赖
1、@babel/preset-env + @babel/polyfill

npm i @babel/preset-env @babel/polyfill -D

.babelrc配置

{ "presets": [ [ "@babel/preset-env", { "useBuiltIns": "entry", "modules": false, "corejs": 2 } ] ] }

参数：

modules:"amd" | "umd" | "systemjs" | "commonjs" | "cjs" | "auto" | false，默认值是 auto useBuiltIns:"usage" | "entry" | false，默认值是 false。 targets:{"chrome": "58","ie": "11"} corejs:2 | 3

modules：用来转换 ES6 的模块语法。如果使用 false，将不会对文件的模块语法进行转化。如果要使用 webpack 中的一些新特性，比如 tree shaking 和 sideEffects，就需要设置为 false，对 ES6 的模块文件不做转化，因为这些特性只对 ES6 的模块有效
corejs：新版本的@babel/polyfill包含了core-js@2和core-js@3版本，所以需要声明版本，否则webpack运行时会报warning。
useBuiltIns：
false：需要在 js 代码第一行主动 import '@babel/polyfill'，会将@babel/polyfill 整个包全部导入。
（不推荐，能覆盖到所有 API 的转译，但体积最大）
entry：需要在 js 代码第一行主动 import '@babel/polyfill'，会将 browserslist 环境不支持的所有垫片都导入。
（能够覆盖到‘hello‘.includes(‘h‘)这种句法，足够安全且代码体积不是特别大）
usage：项目里不用主动 import，会自动将代码里已使用到的、且 browserslist 环境不支持的垫片导入。
（但是检测不到‘hello‘.includes(‘h‘)这种句法，对这类原型链上的句法问题不会做转换
targets：用来配置需要支持的的环境，不仅支持浏览器，还支持 node。如果没有配置 targets 选项，就会读取项目中的 browserslist 配置项
loose：默认值是 false，如果 preset-env 中包含的 plugin 支持 loose 的设置，那么可以通过这个字段来做统一的设置

2、@babel/preset-env + @babel/plugin-transform-runtime

npm i @babel/preset-env @babel/plugin-transform-runtime -D npm i @babel/runtime-corejs2

.babelrc配置

{ "presets": [ [ "@babel/preset-env", { "modules": false } ] ], "plugins": [ [ "@babel/plugin-transform-runtime", { "corejs": 2 // 推荐 } ] ] }

corejs：
默认值是 false，需要安装@babel/runtime只对语法进行转换，不对新 API 进行处理，
当设置为 2 的时候，需要安装@babel/runtime-corejs2，这时会对 api 进行处理。
但检测不到‘hello‘.includes(‘h‘)这种句法
helpers：默认值是 true，用来开启是否使用 helper 函数来重写语法转换的函数。
useESModules：默认值是 false，是否对文件使用 ES 的模块语法，使用 ES 的模块语法可以减少文件的大小。
对比@babel/preset-env + @babel/polyfill可以转译语法、新 API，但存在污染全局问题；
@babel/preset-env + @babel/plugin-transform-runtime + @babel/runtime-corejs2，可按需导入，转译语法、新 API，且避免全局污染（babel7 中@babel/polyfill 是@babel/runtime-corejs2 的别名），但是检测不到‘hello‘.includes(‘h‘)这种句法；
建议
如果是自己的应用： @babel/preset-env + @babel/polyfill

npm i babel-loader@8 @babel/core @babel/preset-env -D npm i @babel/polyfill @babel/runtime

.babelrc配置文件

{ "presets": [ [ "@babel/preset-env", { "modules": false, // 推荐 "useBuiltIns": "entry", // 推荐 "corejs": 2, // 新版本的@babel/polyfill包含了core-js@2和core-js@3版本，所以需要声明版本，否则webpack运行时会报warning，此处暂时使用core-js@2版本（末尾会附上@core-js@3怎么用） } ] ], "plugins": [ [ "@babel/plugin-transform-runtime", { "corejs": false // 解决 helper 函数重复引入 } ] ] }

如果是第三方公共库：@babel/preset-env + @babel/plugin-transform-runtime + @babel/runtime-corejs2

npm i babel-loader@8 @babel/core @babel/preset-env @babel/plugin-transform-runtime -D npm i @babel/runtime-corejs2

.babelrc配置文件

{ "presets": [ [ "@babel/preset-env", { "modules": false, } ] ], "plugins": [ [ "@babel/plugin-transform-runtime", { "corejs": 2 // 推荐 } ] ] }

3、corejs3 随着corejs3的发布更新，@babel/polyfill 无法提供 core-js@2 向 core-js@3 过渡，所以有新的方案来替代 @babel/polyfill。需要 babel-loader 版本升级到 8.0.0 以上，@babel/core 版本升级到 7.4.0 及以上

polyfill 垫片方案的升级策略：

npm i babel-loader @babel/core @babel/preset-env -D npm i core-js regenerator-runtime @babel/runtime

.babelrc配置

{ "presets": [ [ "@babel/preset-env", { "modules": false, // 对ES6的模块文件不做转化，以便使用tree shaking、sideEffects等 "useBuiltIns": "entry", // browserslist环境不支持的所有垫片都导入 "corejs": { "version": 3, // 使用core-js@3 "proposals": true, } } ] ], "plugins": [ [ "@babel/plugin-transform-runtime", { "corejs": false // 解决 helper 函数重复引入 } ] ] }

在代码入口中手动导入

import "core-js/stable" import "regenerator-runtime/runtime"

transform-runtime 的升级策略：

npm i babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime -D npm i @babel/runtime-corejs3

.babelrc文件配置

{ "presets": [ [ "@babel/preset-env", { "modules": false, } ] ], "plugins": [ [ "@babel/plugin-transform-runtime", { "corejs": { "version": 3, "proposals": true }, "useESModules": true } ] ] }

4、提案级别的建议 babel 新版本废弃了 stage 预设，只支持到stage-4级别，处于建议阶段的特性，基本都已从@babel/preset-env、@babel/polyfill等包中被移除，需要额外配置

{ "plugins": [ // Stage 0 "@babel/plugin-proposal-function-bind",// Stage 1 "@babel/plugin-proposal-export-default-from", "@babel/plugin-proposal-logical-assignment-operators", ["@babel/plugin-proposal-optional-chaining", { "loose": false }], ["@babel/plugin-proposal-pipeline-operator", { "proposal": "minimal" }], ["@babel/plugin-proposal-nullish-coalescing-operator", { "loose": false }], "@babel/plugin-proposal-do-expressions",// Stage 2 ["@babel/plugin-proposal-decorators", { "legacy": true }], "@babel/plugin-proposal-function-sent", "@babel/plugin-proposal-export-namespace-from", "@babel/plugin-proposal-numeric-separator", "@babel/plugin-proposal-throw-expressions",// Stage 3 "@babel/plugin-syntax-dynamic-import", "@babel/plugin-syntax-import-meta", ["@babel/plugin-proposal-class-properties", { "loose": false }], "@babel/plugin-proposal-json-strings" ] }