将“proposal-object-rest-spread”插件添加到 babel.config.js 以修复 Microsoft Edge 错误 SCRIPT1028

Question

EDIT: This issue seems to be fixed with the new beta of Microsoft Edge Chromium. (January 18, 2020)

I need to add this Babel plugin to babel.config.js to get rid of the Microsoft Edge Browser error

SCRIPT1028: Expected identifier, string or number

I installed the latest packages and added them to package.json. Below is what I tried but it doesn't transform the code after running npm run build :

babel.config.js

require("@babel/core").transform("code", {});

module.exports = {
  presets: ["@vue/app"],
  plugins: ["@babel/plugin-proposal-object-rest-spread"]
};

package.json

{
  "name": "example",
  "version": "0.2.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@babel/polyfill": "^7.6.0",
    "core-js": "^2.6.5",
    "date-fns": "^2.4.1",
    "firebase": "^7.0.0",
    "lodash": "^4.17.15",
    "register-service-worker": "^1.6.2",
    "vue": "^2.6.10",
    "vue-flickity": "^1.2.1",
    "vue-router": "^3.0.3",
    "vuetify": "^2.0.0",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@babel/cli": "^7.6.4",
    "@babel/core": "^7.6.4",
    "@babel/plugin-proposal-object-rest-spread": "^7.6.2",
    "@babel/preset-env": "^7.6.3",
    "@vue/cli-plugin-babel": "^3.11.0",
    "@vue/cli-plugin-eslint": "^3.11.0",
    "@vue/cli-plugin-pwa": "^3.11.0",
    "@vue/cli-service": "^3.11.0",
    "@vue/eslint-config-prettier": "^5.0.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-prettier": "^3.1.0",
    "eslint-plugin-vue": "^5.0.0",
    "material-design-icons-iconfont": "^5.0.1",
    "prettier": "^1.18.2",
    "sass": "^1.17.4",
    "sass-loader": "^7.1.0",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    "terser-webpack-plugin": "^2.1.2",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "vue-cli-plugin-vuetify": "^0.6.3",
    "vue-template-compiler": "^2.6.10",
    "vuetify-loader": "^1.2.2"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "@vue/prettier"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

How to setup the Babel plugin to transform the code correctly?

EDIT: Error Screenshot - EDGE INSIDER 18 points to this piece of code:

Answer 1

since I cannot try out the code that you are dealing with to check, I would suggest to use the following babel config as mentioned in the library config:

  plugins: [["@babel/plugin-proposal-object-rest-spread", { "loose": true, "useBuiltIns": true }]]

Answer 2

babel.config.js should export a function and should be at the root of your project.

Your configuration should be similar to this

module.exports = function(api) {
    api.cache(true);

    const presets = ['@vue/app'];
    const plugins = ['@babel/plugin-proposal-object-rest-spread'];
    // Or try this
    // const plugins = [['@babel/plugin-proposal-object-rest-spread', { loose: true, useBuiltIns: true }]];

    return {
        presets,
        plugins,
    };
};