Javascript 为什么babel loader不转换对象rest/spread？

我最近在我的一个项目中发现，在使用对象rest/spread语法之后，几乎所有的JS代码都在Edge 18中中断。这让我感到惊讶，因为我预计巴贝尔会将其转换为边缘兼容的代码，但我发现事实并非如此。因此，我选择了@babel/plugin提案对象rest-spread，并将其添加到我的网页配置中，然后再次运行网页包。但是没有运气。我使用了babel的调试选项来检查插件是否实际使用，并且输出结果表明确实使用了。但是当我检查transpiled JS时，我仍然发现其中的spread语法完全没有改变

Babel调试输出：

Using targets:
{
  "android": "4.4",
  "chrome": "74",
  "edge": "17",
  "firefox": "67",
  "ios": "10",
  "safari": "10"
}

Using modules transform: false

Using plugins:
  transform-template-literals { "android":"4.4", "ios":"10", "safari":"10" }
  transform-literals { "android":"4.4" }
  transform-function-name { "android":"4.4", "edge":"17" }
  transform-arrow-functions { "android":"4.4" }
  transform-block-scoped-functions { "android":"4.4" }
  transform-classes { "android":"4.4" }
  transform-object-super { "android":"4.4" }
  transform-shorthand-properties { "android":"4.4" }
  transform-duplicate-keys { "android":"4.4" }
  transform-computed-properties { "android":"4.4" }
  transform-for-of { "android":"4.4" }
  transform-sticky-regex { "android":"4.4" }
  transform-dotall-regex { "android":"4.4", "edge":"17", "firefox":"67", "ios":"10", "safari":"10" }
  transform-unicode-regex { "android":"4.4", "ios":"10", "safari":"10" }
  transform-spread { "android":"4.4" }
  transform-parameters { "android":"4.4", "edge":"17" }
  transform-destructuring { "android":"4.4", "edge":"17" }
  transform-block-scoping { "android":"4.4", "ios":"10", "safari":"10" }
  transform-new-target { "android":"4.4" }
  transform-regenerator { "android":"4.4" }
  transform-exponentiation-operator { "android":"4.4", "ios":"10", "safari":"10" }
  transform-async-to-generator { "android":"4.4", "ios":"10", "safari":"10" }
  proposal-async-generator-functions { "android":"4.4", "edge":"17", "ios":"10", "safari":"10" }
  proposal-object-rest-spread { "android":"4.4", "edge":"17", "ios":"10", "safari":"10" }
  proposal-unicode-property-regex { "android":"4.4", "edge":"17", "firefox":"67", "ios":"10", "safari":"10" }
  proposal-json-strings { "android":"4.4", "edge":"17", "ios":"10", "safari":"10" }
  proposal-optional-catch-binding { "android":"4.4", "edge":"17", "ios":"10", "safari":"10" }
  transform-named-capturing-groups-regex { "android":"4.4", "edge":"17", "firefox":"67", "ios":"10", "safari":"10" }

Using polyfills with `usage` option:

[/app/node_modules/swiper/dist/js/swiper.esm.js] Added following core-js polyfills:
  es.array.concat { "android":"4.4" }
  es.array.filter { "android":"4.4" }
  es.array.find { "android":"4.4" }
  es.array.includes { "android":"4.4" }
  es.array.index-of { "android":"4.4" }
  es.array.map { "android":"4.4" }
  es.array.slice { "android":"4.4" }
  es.array.sort { "android":"4.4", "ios":"10", "safari":"10" }
  es.array.splice { "android":"4.4" }
  es.object.get-own-property-descriptor { "android":"4.4" }
  es.object.keys { "android":"4.4" }
  es.object.to-string { "android":"4.4" }
  es.parse-float { "android":"4.4" }
  es.parse-int { "android":"4.4" }
  es.regexp.to-string { "android":"4.4", "edge":"17" }
  es.string.includes { "android":"4.4", "edge":"17" }
  es.string.match { "android":"4.4", "edge":"17" }
  es.string.replace { "android":"4.4", "edge":"17", "firefox":"67", "ios":"10", "safari":"10" }
  es.string.split { "android":"4.4", "edge":"17" }
  esnext.array.last-index { "android":"4.4", "chrome":"74", "edge":"17", "firefox":"67", "ios":"10", "safari":"10" }
  web.dom-collections.for-each { "android":"4.4" }
 64% building 687/752 modules 65 active /app/node_modules/lodash-es/padStart.js
[/app/node_modules/dom7/dist/dom7.modular.js] Added following core-js polyfills:
  es.array.concat { "android":"4.4" }
  es.array.filter { "android":"4.4" }
  es.array.index-of { "android":"4.4" }
  es.array.splice { "android":"4.4" }
  es.object.assign { "android":"4.4" }
  es.object.keys { "android":"4.4" }
  es.parse-float { "android":"4.4" }
  es.string.match { "android":"4.4", "edge":"17" }
  es.string.replace { "android":"4.4", "edge":"17", "firefox":"67", "ios":"10", "safari":"10" }
  es.string.split { "android":"4.4", "edge":"17" }
  es.string.trim { "android":"4.4", "ios":"10", "safari":"10" }
  web.dom-collections.for-each { "android":"4.4" }
Hash: b3541120009438066b1e
Version: webpack 4.30.0 / grunt-webpack 3.1.3

因此，从那以后，我拼命想让巴贝尔传输代码，但什么也没发生，我没有想法和搜索词来尝试。使它更为精妙的是，我使用的堆栈没有什么特别之处，我已经在其他项目中使用过它，而且从未出现过这个问题

我正在使用Vue、Webpack+Babel。网页包通过Grunt运行

我的网页包配置：

const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = function (grunt, options) {

    /* skip loading if task is not necessary for current target */
    if (!grunt.isConfigLoadingRequired('webpack')) {
        return {};
    }

    return (function () {

        const path = require('path');
        const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
        const DotenvPlugin = require('dotenv-webpack');
        const webpack = require('webpack');
        const plugins = [
            new webpack.IgnorePlugin(/^(.*)$/, /node-jsb$/),
            new DotenvPlugin(),
            new VueLoaderPlugin(),
        ];

        /* remember to update jest transformer at tests/setup/ when changing loader options */
        const getLoaderRulesConfig = (targets, debug = false) => ([
            {
                test: /\.vue$/,
                loader: 'vue-loader',
            },
            {
                test: /\.js$/,
                enforce: 'pre',
                loader: 'import-glob',
                include: [path.resolve('<%= paths.src %>')],
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                /* remember to update jest transformIgnorePatterns at grunt/config/jest.js when adding includes */
                include: [
                    path.resolve('<%= paths.src %>'),
                    path.resolve('node_modules/dom7'),
                    path.resolve('node_modules/swiper'),
                ],
                options: {
                    compact: true,
                    cacheDirectory: true,
                    cacheCompression: false,
                    babelrc: false,
                    plugins: [
                        [
                            '@babel/plugin-transform-runtime', {
                                regenerator: false,
                                useESModules: true,
                            },
                        ],
                        '@babel/plugin-proposal-object-rest-spread',
                        ['@babel/plugin-proposal-class-properties', { loose: true }],
                    ],
                    presets: [
                        [
                            '@babel/preset-env', {
                                modules: false,
                                loose: true,
                                useBuiltIns: 'usage',
                                corejs: { version: 3, proposals: true },
                                targets,
                                debug,
                            },
                        ],
                    ],
                },
            },
        ]);

        return {
            options: {
                cache: true,
                entry: {
                    main: './<%= paths.src %>/js/_main.js',
                },
                output: {
                    filename: '[name].js',
                    chunkFilename: '[name].[chunkhash].js',
                    path: path.resolve('<%= paths.static %>/generated/'),
                    publicPath: '/static/generated/',
                },
                plugins,
                resolve: {
                    mainFields: ['browser', 'main', 'module'],
                    symlinks: false,
                },
                performance: {
                    maxEntrypointSize: 500000,
                    maxAssetSize: 500000,
                },
            },
            analyze: {
                mode: 'production',
                watch: true,
                stats: {
                    maxModules: 99999,
                },
                optimization: {
                    concatenateModules: false,
                },
                output: {
                    path: path.resolve('<%= paths.tmp %>/js/'),
                },
                module: {
                    rules: getLoaderRulesConfig({ esmodules: true }, true),
                },
                plugins: [new BundleAnalyzerPlugin()],
            },
            dev: {
                mode: 'development',
                module: {
                    rules: getLoaderRulesConfig({ browsers: options.browserslist }, true),
                },
            },
            devModern: {
                mode: 'development',
                devtool: 'source-map',
                module: {
                    rules: getLoaderRulesConfig({ esmodules: true }),
                },
                output: {
                    filename: '[name].modern.js',
                    chunkFilename: '[name].modern.[chunkhash].js',
                },
            },
            dist: {
                mode: 'production',
                module: {
                    rules: getLoaderRulesConfig({ browsers: options.browserslist }),
                },
            },
            distModern: {
                mode: 'production',
                module: {
                    rules: getLoaderRulesConfig({ esmodules: true }),
                },
                output: {
                    filename: '[name].modern.js',
                    chunkFilename: '[name].modern.[chunkhash].js',
                },
            },
        };
    }());
};

const VueLoaderPlugin=require（'vue-loader/lib/plugin'）；
module.exports=函数（grunt，选项）{
/*如果当前目标不需要任务，则跳过加载*/
如果（！grunt.isConfigLoadingRequired（'webpack'））{
返回{}；
}
返回（函数（）{
const path=require（'path'）；
const BundleAnalyzerPlugin=require（'webpack-bundle-analyzer'）。BundleAnalyzerPlugin；
const DotenvPlugin=require（'dotenv-webpack'）；
const webpack=require（'webpack'）；
常量插件=[
新建webpack.IgnorePlugin（/^（.*）$/，/node jsb$/），
新建DotenvPlugin（），
新的VueLoaderPlugin（），
];
/*请记住在测试/设置/更改加载程序选项时更新jest transformer*/
const getLoaderRulesConfig=（目标，调试=false）=>([
{
测试：/\.vue$/,，
加载程序：“vue加载程序”，
},
{
测试：/\.js$/,，
强制执行：“预”，
加载器：“导入全局”，
包括：[路径解析（“”）]，
},
{
测试：/\.js$/,，
加载器：“巴别塔加载器”，
/*在添加includes时，请记住在grunt/config/jest.js处更新jest transformIgnorePatterns*/
包括：[
路径解析（“”），
解析（'node_modules/dom7'），
path.resolve（'node_modules/swiper'），
],
选项：{
是的，
cacheDirectory:true，
缓存压缩：false，
巴别塔：错，
插件：[
[
“@babel/plugin转换运行时”{
再生器：错，
使用模块：正确，
},
],
“@babel/plugin提案对象rest spread”，
['@babel/plugin建议类属性'，{loose:true}]，
],
预设：[
[
“@babel/preset env”{
模块：错误，
是的，
useBuiltIns:“用法”，
corejs:{version:3，propositions:true}，
目标,，
调试，
},
],
],
},
},
]);
返回{
选项：{
是的，
条目：{
main:'.//js/_main.js'，
},
输出：{
文件名：'[name].js'，
chunkFilename:'[name].[chunkhash].js',，
path:path.resolve（'/generated/'），
publicPath:“/static/generated/”，
},
插件，
决心：{
主字段：[“浏览器”、“主”、“模块”]，
符号链接：false，
},
性能：{
maxEntrypointSize:500000，
最大资产规模：500000，
},
},
分析：{
模式:"生产",，
手表：没错，
统计数据：{
最大模块数：99999，
},
优化：{
连接emodules:false，
},
输出：{
path:path.resolve（'/js/'），
},
模块：{
规则：getLoaderRulesConfig（{esmodules:true}，true），
},
插件：[新BundleAnalyzerPlugin（）]，
},
开发人员：{
模式:"发展",，
模块：{
规则：getLoaderRulesConfig（{browsers:options.browserslist}，true），
},
},
现代：{
模式:"发展",，
devtool:'源映射'，
模块：{
规则：getLoaderRulesConfig（{esmodules:true}），
},
输出：{
文件名：'[name].modern.js'，
chunkFilename:'[name].modern[chunkhash].js',，
},
},
地区：{
模式:"生产",，
模块：{
规则：getLoaderRulesConfig（{browsers:options.browserslist}），
},
},
现代主义：{
模式:"生产",，
模块：{
规则：getLoaderRulesConfig（{esmodules:true}）