babel.config解读一些常用的配置

这是我常用的两个babel.config配置 还有其他的常用的好用的 欢迎艾特补充

presets 属性是一个数组，其中包含一个字符串 @vue/cli-plugin-babel/preset。这个 preset 是 Vue CLI 内置的一个 Babel 预设，它包含了一些常用的 Babel 插件和配置，用于将 ES6+ 语法转换为浏览器可识别的代码。

plugins 是 Babel 转译器的插件，用于扩展转译器的功能。该配置文件中使用了@babel/plugin-transform-runtime插件，它可以将ES6/7/8的新特性转换为ES5代码，并且不会污染全局作用域。

移动端的一种情况：

module.exports = {
  presets: [
    [
      '@vue/cli-plugin-babel/preset',
      {
        useBuiltIns: 'entry',
        polyfills: ['es6.promise', 'es6.symbol']
      }
    ]
  ],
  // vant 按需引入，会自动引入css。
  plugins: [
    [
      'import',
      {
        libraryName: 'vant',
        libraryDirectory: 'es',
        style: (name) => `${name}/style/less` // 这是Vant 3.x 版本中的样式文件路径写法
      },
      'vant'
    ]
  ]
};

在这里，使用了 @vue/cli-plugin-babel/preset 预设，该预设包含了一些常用的转译插件，
如 @babel/plugin-transform-runtime、@babel/plugin-proposal-optional-chaining 等。
此外，还指定了 useBuiltIns 和 polyfills 两个选项，用于按需引入 polyfill，以支持一些 ES6+ 的新特性。

这里的style是babel-plugin-import插件的一个配置项，用于指定引入的组件库的样式文件路径。具体来说，style: (name) => ${name}/style/less``表示引入vant组件库时，使用less格式的样式文件，
且样式文件路径为vant组件库中对应组件的style目录下的less文件。

例如，如果要引入vant组件库中的Button组件，那么会自动引入vant/lib/button/style/less目录下的less文件作为样式文件。
这样做的好处是可以按需引入组件，减小打包体积，同时也可以灵活地定制样式。

在这里，使用了 import 插件，该插件可以按需引入第三方库的组件和样式。
具体来说，指定了 libraryName 为 vant，表示需要引入 Vant UI 库的组件和样式；
libraryDirectory 为 es，表示需要引入 Vant UI 库的 ES 模块；

style 为一个函数，用于指定引入 Vant UI 库的样式文件路径，这里使用了 Less 样式预处理器。
最后，还指定了 vant 参数，用于在代码中使用 vant 作为 Vant UI 库的别名。

useBuiltIns是一个选项，用于控制Babel是否应该自动引入polyfills。当设置为"entry"时，Babel将根据入口文件中使用的特性自动引入相应的polyfills。当设置为"usage"时，Babel将根据代码中使用的特性自动引入相应的polyfills。如果设置为false，则不会自动引入任何polyfills。

polyfills是一个数组，用于指定需要引入的polyfills。在useBuiltIns设置为"entry"时，这些polyfills将被自动引入。在useBuiltIns设置为"usage"或false时，这些polyfills将始终被引入。在这个例子中，polyfills数组中指定了需要引入的Promise和Symbol的polyfills。
polyfills 是 @vue/cli-plugin-babel/preset 中的一个选项，用于指定需要在转换过程中自动引入的 polyfill。
polyfill 是一种 JavaScript 代码，用于在旧版浏览器中模拟新版浏览器中已经实现的 API。
在这里，polyfills 中指定的 es6.promise 和 es6.symbol 是 ES6 中新增的 Promise 和 Symbol 对象的 polyfill，
用于在不支持这些对象的浏览器中模拟这些对象的行为。这样，在使用这些对象时，就不需要手动引入 polyfill 了。

==================================================================
管理端的一种情况：

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: [
    // ant-design-vue 按需引入，会自动引入css。
    ['import', { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: 'css' }],
    ['@vue/babel-plugin-jsx']
  ]
};

libraryName 和 libraryDirectory，用于按需引入 ant-design-vue 组件。
css，表示引入组件时同时引入组件的 CSS 样式。
@vue/babel-plugin-jsx，用于支持在 Vue 组件中使用 JSX 语法。

在babel.config.js中配置ant-design-vue时，
[‘import’, { libraryName: ‘ant-design-vue’, libraryDirectory: ‘es’, style: ‘css’ }]中的style属性
指定了引入ant-design-vue组件库时使用的样式类型。
在这里，‘css’表示使用CSS样式文件。这意味着在引入ant-design-vue组件时，
将自动引入相应的CSS样式文件，以确保组件的样式正确显示。
如果将style属性设置为其他值，例如’scss’或’less’，则将使用相应的预处理器来处理样式文件。