babel

babel

Babel 默认只转换新的 JavaScript 句法（syntax），而不转换新的 API，比如Iterator、Generator、Set、Map、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码。

polyfill

举例来说，ES6 在Array对象上新增了Array.from方法。Babel 就不会转码这个方法。如果想让这个方法运行，可以使用core-js和regenerator-runtime(后者提供generator函数的转码)，为当前环境提供一个垫片

安装命令如下：

npm install --save-dev core-js regenerator-runtime

然后在脚本头部加上两行代码

import 'core-js';
import 'regenerator-runtime/runtime';
// 或者
require('core-js');
require('regenerator-runtime/runtime');

但是我在项目中用的不是core-js或者regenerator-runtime用的babel-polyfill

babel-polyfill

babel-polyfill 不是一个 Babel 插件，而是一个用于提供缺失特性的 JavaScript 库。在 Babel 7 及以上版本中，推荐使用 @babel/preset-env 配合 core-js 来实现类似的功能，而不再直接使用 babel-polyfill
作用：
babel-polyfill（或者 core-js + regenerator-runtime 的组合）的主要作用是在目标环境中提供缺失的 ECMAScript 新特性和原生 API，使得开发者可以在较旧的浏览器或环境中使用最新的 JavaScript 语言特性
babel.config.js的配置：（本项目的配置，没有通用性，仅作参考）

module.exports = {
    presets: [
        ['@vue/app', { useBuiltIns: 'entry' }],
        ['@babel/env', { targets: { node: 6 } }]
    ],
    plugins: [
        'lodash',
        'dynamic-import-webpack'
    ]
};

1. presets 预设配置：

• presets 是一组预定义的 Babel 插件集合，它们可以一次性配置，而不需要单独列举每个插件。
• ['@vue/app', { useBuiltIns: 'entry' }]：这里使用了 Vue CLI 提供的 @vue/app 预设。useBuiltIns: ‘entry’ 表示通过按需引入 polyfills（垫片）来支持目标环境缺失的特性，这样可以减小最终打包的文件大小。
• ['@babel/env', { targets: { node: 6 } }]：这里使用了 @babel/env 预设，它根据目标环境自动选择合适的转换插件。在这里，配置了目标环境为 Node.js 6。

2. plugins 插件配置：

• plugins 是指定需要使用的单个 Babel 插件的数组。
• lodash：这里使用了 Babel 插件 lodash，它允许你按需引入 Lodash 库的功能，而不是一次性引入整个库。(项目需要 不需要就不配)
• dynamic-import-webpack：这里使用了 Babel 插件 dynamic-import-webpack，它帮助处理动态导入（dynamic import）语法，通常用于实现代码分割和懒加载。