关于javascript:Babel7-使用总结

一、根底配置

1、根底依赖包

npm i babel-loader @babel/core -D

2、增加.babellrc 配置文件

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

3、package.json 申明

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"
  ]
}