Can't get babel to transpile spread operator even WITH plugin

Question

I am trying to make Babel + Webpack transpile my files for IE11 and Safari 10. No matter what I do I cannot make it work.

I have tried uninstalling and reinstalling webpack and babel. I have tried changing just about anything within webpack.config.js and .babelrc. I have tried making a babel.config.js and webpack.config.babel.js.

I tried running

npx babel node_modules/vuetify --plugins=@babel/plugin-transform-spread,@babel/plugin-transform-parameters --presets=@babel/preset-env --no-babelrc

and outputted with spread operators still inside.

I tried compiling with webpack and spread operators are still present.

package.json

{
  "name": "aspnetcore-vuejs-typescript-template",
  "version": "0.1.0",
  "main": "app.js",
  "license": "MIT",
  "author": "Danijel Hrcek",
  "scripts": {
    "dev": "./node_modules/.bin/webpack-cli --mode development --watch --progress --config webpack.config.js",
    "build:dev": "./node_modules/.bin/webpack-cli --mode development  --config webpack.config.js",
    "build:prod": "./node_modules/.bin/webpack-cli --mode production --config webpack.config.js",
    "publish": "npm install && ./node_modules/.bin/webpack-cli --mode production --config webpack.config.js && dotnet publish --configuration Release",
    "test": "jest"
  },
  "dependencies": {
    "acorn": "^7.0.0",
    "apexcharts": "^3.8.5",
    "axios": "^0.19.0",
    "bulma": "0.7.5",
    "bulmaswatch": "0.7.2",
    "classlist-polyfill": "^1.2.0",
    "core-js": "^3.2.1",
    "fibers": "^3.1.1",
    "portal-vue": "^2.1.6",
    "regenerator-runtime": "^0.13.3",
    "vue": "2.6.10",
    "vue-apexcharts": "^1.4.0",
    "vue-flatpickr-component": "8.1.2",
    "vue-multiselect": "2.1.6",
    "vue-notification": "1.3.16",
    "vue-router": "3.0.6",
    "vue2-animate": "^2.1.1",
    "vuetify": "^2.0.5",
    "vuetify-loader": "^1.3.0",
    "vuex": "3.1.1"
  },
  "devDependencies": {
    "@babel/cli": "^7.5.5",
    "@babel/core": "^7.5.5",
    "@babel/plugin-proposal-object-rest-spread": "^7.5.5",
    "@babel/plugin-transform-spread": "^7.2.2",
    "@babel/preset-env": "^7.5.5",
    "@babel/register": "^7.5.5",
    "@mdi/font": "^3.9.97",
    "@types/jquery": "3.3.29",
    "@types/node": "12.0.2",
    "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
    "@vue/babel-preset-jsx": "^1.1.0",
    "@vue/test-utils": "1.0.0-beta.29",
    "aspnet-webpack": "3.0.0",
    "babel-loader": "^8.0.6",
    "clean-webpack-plugin": "2.0.2",
    "compression-webpack-plugin": "2.0.0",
    "css-loader": "2.1.0",
    "deepmerge": "^4.0.0",
    "es6-promise-promise": "1.0.0",
    "extract-text-webpack-plugin": "4.0.0-beta.0",
    "file-loader": "3.0.1",
    "html-webpack-plugin": "3.2.0",
    "jest": "24.8.0",
    "jest-serializer-vue": "2.0.2",
    "node-sass": "4.12.0",
    "optimize-css-assets-webpack-plugin": "5.0.1",
    "resolve-url-loader": "3.1.0",
    "sass": "^1.22.9",
    "sass-loader": "^7.1.0",
    "style-loader": "0.23.1",
    "ts-loader": "^6.0.1",
    "typescript": "^3.4.5",
    "url-loader": "1.1.2",
    "vue-class-component": "7.1.0",
    "vue-jest": "3.0.4",
    "vue-loader": "15.7.0",
    "vue-property-decorator": "8.1.1",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "2.6.10",
    "webpack": "^4.39.3",
    "webpack-cli": "3.3.2",
    "webpack-dev-server": "3.4.1",
    "webpack-hot-middleware": "2.25.0"
  }
  "browserslist": [
    "defaults", "safari 10", "not ie <= 10"
  ]
}

.babelrc

{
  "presets": [ "@babel/preset-env" ],
  "plugins": [ "@babel/plugin-proposal-object-rest-spread", "@babel/plugin-transform-spread", "@vue/babel-preset-jsx", "@babel/plugin-transform-parameters" ]
  }

Within webpack.config.js

{
                    test: /\.m?js$/,
                    exclude: /node_modules\/(?!(vuetify|vuetify-loader|vue)\/).*/,
                    use: {
                        loader: 'babel-loader',
                        options: {
                            presets: ['@babel/preset-env'],
                            plugins: ["@babel/plugin-proposal-object-rest-spread", "@babel/plugin-transform-spread"]
                        }
                    }
                },
                {
                    test: /\.jsx?$/,
                    include: [
                        '/node_modules/vuetify/src'
                    ],
                    use: {
                        loader: 'babel-loader',
                        options: {
                            presets: ['@babel/preset-env'],
                            plugins: ["@babel/plugin-proposal-object-rest-spread", "@babel/plugin-transform-spread", "@vue/babel-preset-jsx", "@babel/plugin-transform-parameters"]
                        }
                    }
                },

Expected output:

function mixins() {
    //emulates spread operator
}

Actual output:

function mixins(...args) {}

Answer 1

FWIW I think this has been fixed since the question was asked. Create a folder with files as below:

package.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "author": "RichN",
  "license": "MIT",
  "devDependencies": {
    "@babel/core": "^7.13.15",
    "@babel/preset-env": "^7.13.15",
    "babel-loader": "^8.2.2",
    "webpack": "^5.32.0",
    "webpack-cli": "^4.6.0"
  }
}

webpack.config.js

module.exports = {
    devtool: "source-map",
    mode: "development",
    target: ["web", "es5"],
    entry: "./app.js",
    output: {
        filename: "bundle.js",
        path: __dirname
    },
    resolve: {
        extensions: [".js", ".jsx"]
    },
    module: {
        rules: [
            {
                test: /\.(jsx|js)$/,
                exclude: /node_modules/,
                use: [{
                    loader: "babel-loader",
                    options: {
                        presets: [
                            ["@babel/preset-env", { 
                                "targets": "defaults"
                            }]
                        ],
                        plugins: [
                            "@babel/plugin-proposal-object-rest-spread"
                        ]
                    }
                }]
            }
        ]
    }
}

app.js

function sum(...theArgs) {
    return theArgs.reduce((previous, current) => {
        return previous + current;
    });
}
console.log(sum(1, 2, 3));

index.html

<!DOCTYPE html>
<body>
    <script src="bundle.js"></script>
</body>

Then issue commands npm i and npx webpack in that folder. The code gets transpiled to the code below in bundle.js:

function sum() {
  for (var _len = arguments.length, theArgs = new Array(_len), _key = 0; _key < _len; _key++) {
    theArgs[_key] = arguments[_key];
  }

  return theArgs.reduce(function (previous, current) {
    return previous + current;
  });
}

console.log(sum(1, 2, 3));

If you now load index.html as a file in Internet Explorer this code runs fine and outputs 6 in the console window