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

你可能感兴趣的