📂 基础/实践 - babel 的使用 - 《前端精进之路》

Vue CLI
element-ui按需引入

官⽅⽹站：https://babeljs.io/
中⽂⽹站：https://www.babeljs.cn/

Babel是JavaScript编译器，能将ES6代码转换成ES5代码，让我们开发过程中放⼼使⽤JS新特性⽽不⽤担

⼼兼容性问题。并且还可以通过插件机制根据需求灵活的扩展。

Babel 在执⾏编译的过程中，会从项⽬根⽬录下的.babelrc JSON⽂件中读取配置。没有该⽂件会从 loader的 options 地⽅读取配置。
```
npm i babel-loader @babel/core @babel/preset-env
```
babel-loader是 webpack 与 babel的通信桥梁，不会做把es6转成es5的⼯作，这部分⼯作需要⽤到@babel/preset-env 来做

@babel/preset-env ⾥包含了es，6，7，8转es5的转换

module: {
  test: /\.js$/,
  exclude: /node_modules/,
  use: {
    loader: "babel-loader",
    options: {
      presets: ["@babel/preset-env"],
    },
  },
},

@babel/polyfill

默认的Babel只⽀持 let 等⼀些基础的特性转换，Promise 等⼀些还有转换过来，这时候需要借@babel/polyfifill，把 ES 的新特性都装进来，来弥补低版本浏览器中缺失的特性。

npm install --save @babel/polyfill

//index.js 顶部
import "@babel/polyfill";
//以全局变量的⽅式注⼊进来的。windows.Promise，它会造成全局对象的污染。

按需加载，减少冗余

使用 polyfill 会发现打包的体积⼤了很多，这是因为polyfill默认会把所有特性注⼊进来，假如我想我⽤到的es6+，实现按需加载

//.babelrc
{
  presets: [
    [
    "@babel/preset-env",
    {
      targets: {
        edge: "17",
        firefox: "60",
        chrome: "67",
        safari: "11.1"
     },
    corejs: 2, //新版本需要指定核⼼库版本
    useBuiltIns: "usage" //按需注⼊
    }
  ]
 ]
}
//webpack.config.js
{
 test: /\.js$/,
 exclude: /node_modules/,
 loader: "babel-loader"
}

useBuiltIns选项是 babel 7 的新功能，这个选项告诉 babel 如何配置@babel/polyfill 。它有三个参数可以使⽤：

entry: 需要在 webpack 的⼊⼝⽂件⾥ import “@babel/polyfill” ⼀次。 babel 会根据你的使⽤情况导⼊垫⽚，没有使⽤的功能不会被导⼊相应的垫⽚。
usage: 不需要 import ，全⾃动检测，但是要安装 @babel/polyfill 。（试验阶段）
false: 如果你 import”@babel/polyfill” ，它不会排除掉没有使⽤的垫⽚，程序体积会庞⼤。(不推荐)

请注意： usage 的⾏为类似 babel-transform-runtime，不会造成全局污染，因此也会不会对类似Array.prototype.includes() 进⾏polyfill。

@babel/plugin-transform-runtime

当我们开发的是组件库，⼯具库这些场景的时候，polyfill 就不适合了，因为 polyfill 是注⼊到全局变量，window下的，会污染全局环境，所以推荐闭包⽅式：@babel/plugin-transform-runtime，它不会造成全局污染。

npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime

options: {
  presets: [
    [
      "@babel/preset-env",
      {
        targets: {
          edge: "17",
          firefox: "60",
          chrome: "67",
          safari: "11.1"
        },
        useBuiltIns: "usage",
        corejs: 2
      }
    ]
  ],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "absoluteRuntime": false,
        "corejs": false,
        "helpers": true,
        "regenerator": true,
        "useESModules": false
      }
    ]
  ]
}

Vue CLI

Vue CLI 使用了 Babel 7 中的新配置格式 babel.config.js。和 .babelrc 或 package.json 中的 babel 字段不同，这个配置文件不会使用基于文件位置的方案，而是会一致地运用到项目根目录以下的所有文件，包括 node_modules 内部的依赖。我们推荐在 Vue CLI 项目中始终使用 babel.config.js 取代其它格式。

// babel.config.js
module.exports = {
  presets: ['@vue/cli-plugin-babel/preset']
};

所有的 Vue CLI 应用都使用 @vue/babel-preset-app，它包含了 babel-preset-env、JSX 支持以及为最小化包体积优化过的配置

一个默认的 Vue CLI 项目会使用 @vue/babel-preset-app，它通过 @babel/preset-env 和 browserslist 配置来决定项目需要的 polyfill。

默认情况下，它会把 useBuiltIns: ‘usage’ 传递给 @babel/preset-env，这样它会根据源代码中出现的语言特性自动检测需要的 polyfill。这确保了最终包里 polyfill 数量的最小化。然而，这也意味着如果其中一个依赖需要特殊的 polyfill，默认情况下 Babel 无法将其检测出来。

如果有依赖需要 polyfill，你有几种选择：

默认情况下，babel-loader 排除 node_modules 依赖项中的文件。如果您希望显式转换依赖项模块，则需要将其添加到以下 transpileDependencies 选项中 vue.config.js：

@vue/cli-plugin-babel/preset

// 默认babel-loader会忽略node_modules中的文件
// 但是dolphin-plugin-tools用了es6的语法, 配置对其显示转译
// 配合babel sourceType: 'unambiguous'来使用 https://github.com/babel/babel/issues/9187,
  transpileDependencies: [
    'dolphin-plugin-tools',
    /@hui-pro/
  ],

如果该依赖交付 ES5 代码，但使用了 ES6+ 特性且没有显式地列出需要的 polyfill (例如 Vuetify)：请使用 useBuiltIns: ‘entry’ 然后在入口文件添加 import ‘core-js/stable’; import ‘regenerator-runtime/runtime’;。这会根据 browserslist 目标导入所有 polyfill，这样你就不用再担心依赖的 polyfill 问题了，但是因为包含了一些没有用到的 polyfill 所以最终的包大小可能会增加。

https://cli.vuejs.org/zh/guide/browser-compatibility.html#browserslist

element-ui按需引入

https://blog.csdn.net/weixin_39707612/article/details/110252623