IE/Edge 中的 Babel 7 扩展语法不起作用答案

【问题标题】：Babel 7 spread syntax in IE/Edge not workingIE/Edge 中的 Babel 7 扩展语法不起作用
【发布时间】：2019-06-28 05:55:53
【问题描述】：

所以我安装了 babel 7，以及我的预设环境中包含的插件“@babel/plugin-proposal-object-rest-spread”，但是我仍然收到以下错误，因为它没有转译我的传播运算符回到 es2015。

SCRIPT1028: Expected identifier, string or number

我尝试在我的 .babelrc 文件中的插件数组中引用插件。

我的 .babelrc 文件：

{
    "presets": [
        "@babel/preset-react",
        "@babel/preset-env", {
            "include": [
                "@babel/plugin-proposal-object-rest-spread"
            ]
        }
    ],
    "plugins": [
        "@babel/plugin-syntax-dynamic-import",
        "@babel/plugin-syntax-import-meta",
        "@babel/plugin-proposal-class-properties",
        "@babel/plugin-proposal-json-strings",
    ]
}

我的 package.json 依赖项/dev 依赖项：

  "dependencies": {
    "@babel/polyfill": "^7.2.5",
    "axios": "^0.18.0",
    "babel-polyfill": "^6.26.0",
    "bootstrap": "^4.1.3",
    "core-js": "^2.6.3",
    "dotenv": "^6.1.0",
    "get-base64": "^1.3.0",
    "history": "^4.7.2",
    "moment": "^2.22.2",
    "prop-types": "^15.6.2",
    "qs": "^6.5.2",
    "react": "^16.6.0",
    "react-debounce-input": "^3.2.0",
    "react-dom": "^16.6.0",
    "react-onclickoutside": "^6.7.1",
    "react-redux": "^5.1.0",
    "react-router-dom": "^4.3.1",
    "react-router-redux": "^4.0.8",
    "react-select": "^2.1.2",
    "redux": "^4.0.1",
    "redux-devtools-extension": "^2.13.5",
    "redux-thunk": "^2.3.0",
    "svg-url-loader": "^2.3.2",
    "webpack": "^4.23.1",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.14",
    "webpack-merge": "^4.1.4"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/plugin-proposal-class-properties": "^7.0.0",
    "@babel/plugin-proposal-json-strings": "^7.0.0",
    "@babel/plugin-proposal-object-rest-spread": "^7.3.1",
    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
    "@babel/plugin-syntax-import-meta": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "babel-eslint": "^9.0.0",
    "babel-loader": "^8.0.0",
    "babel-plugin-transform-es2015-destructuring": "^6.23.0",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "copy-webpack-plugin": "^4.6.0",
    "css-loader": "^1.0.0",
    "eslint": "^5.8.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jsx-a11y": "^6.1.2",
    "eslint-plugin-react": "^7.11.1",
    "file-loader": "^2.0.0",
    "html-webpack-plugin": "^3.2.0",
    "interpolate-html-plugin": "^3.0.0",
    "node-sass": "^4.9.4",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "uglify-es-webpack-plugin": "^0.10.0",
    "url-loader": "^1.1.2"

【问题讨论】：

标签： reactjs internet-explorer babeljs ecmascript-2016 spread-syntax

【解决方案1】：

看起来您正在使用 Webpack，并且您已安装 babel-loader。

既然如此，这里有两件事需要快速检查：

您确定在您的 webpack 配置中为 js 文件使用该加载程序吗？

    rules: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
      },
    ],

是否有任何 js 资产绕过 Webpack，“遗漏”了该加载程序？
（编辑）：如果对这些“否”，您是否还需要"@babel/plugin-transform-spread" 来捕获数组中的价差，因为"@babel/plugin-proposal-object-rest-spread" 是特定于对象的？

【讨论】：

正是这个。原来不起作用的部分是 .js 文件，因为我的 webpack 只是在测试 jsx！谢谢你
我只想补充一点，这是我在 webpack 配置中所缺少的。花了我三个小时。