reactjs - Babel：无法让“@babel/plugin-transform-destructuring”插件工作

Question

PS：这是我第一次放弃在这里撰写我的第一个问题。如果有人可以提供帮助，将不胜感激。谢谢！

我正在尝试在相对较旧的 iPad 上的 iOS 10 Safari 中加载我的 ReactJS Web 应用程序（我使用 webpack 和 babel-loader，并使用 webpack-dev-server 提供服务）。

我收到以下语法错误：

SyntaxError: Unexpected token '...'. Expected a property name.

（到目前为止，该页面在我尝试过的所有设备/浏览器上都可以正常加载。）

该错误是由这行转译代码引起的：

eval("\nconst publicIp = __webpack_require__(/*! public-ip */ \"./node_modules/public-ip/browser.js\");\n\nconst isOnline = async options => {\n\toptions = {\n\t\ttimeout: 5000,\n\t\tversion: 'v4',\n\t\t...options\n\t};\n\n\ttry {\n\t\tawait publicIp[options.version](options);\n\t\treturn true;\n\t} catch (_) {\n\t\treturn false;\n\t}\n};\n\nmodule.exports = isOnline;\n// TODO: Remove this for the next major release\nmodule.exports.default = isOnline;\n\n\n//# sourceURL=webpack:///./node_modules/is-online/browser.js?");

我们可以在源代码https://github.com/sindresorhus/is-online/blob/master/browser.js中观察到：

const isOnline = async options => {
    options = {
        timeout: 5000,
        version: 'v4',
        ...options
    };

    // ...
};

在我看来，...不支持使用扩展运算符进行对象解构。该代码来自我正在使用的名为“is-online”的 npm 模块。

我尝试添加“@babel/plugin-transform-destructuring”插件.babelrc来看看它是否可以解决这个问题。一切编译，但这部分代码是相同的，所以它仍然产生相同的错误。

我发现这个 Twitter 对话描述了与 Safari 相同的问题，但他设法解决了这个问题，因为他“还需要为其激活转换插件：transform-object-rest-spread”：

https://twitter.com/beberlei/status/984083670012256258

所以我尝试了它并没有用。

然后我加强了我的插件游戏，.babelrc并在网上搜索了类似的案例，尝试了不同的配置，使用更新 babel npx babel-upgrade，删除并重新安装node_modules并将插件直接放入module.rules[0].options.plugins我放弃了它：

// .babelrc

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

...但它仍然给出错误。它还尝试将“@babel/plugin-transform-runtime”放在那里：相同。

我现在的 webpack 配置：

// webpack.dev.js

const path = require("path");
const webpack = require("webpack");

const TerserPlugin = require('terser-webpack-plugin');

module.exports = [

    // App

    {

        mode: 'development',

        entry: {
            app: "./src/index.js"
        },

        module: {
            rules: [
                {
                    test: /\.(js|jsx)$/,
                    exclude: /(node_modules|bower_components)/,
                    loader: "babel-loader",
                    options: {
                        presets: ["@babel/env"],
                    }
                },
                {
                    test: /\.css$/,
                    use: ["style-loader", "css-loader", "postcss-loader"]
                },
                {
                    test: /\.(png|svg|jpg|gif)$/,
                    use: [
                        'file-loader'
                    ]
                }
            ]
        },

        resolve: { extensions: ["*", ".js", ".jsx"] },

        output: {
            filename: "app-v0.9.6.js",
            path: path.resolve(__dirname, "public/dist/"),
            publicPath: "/dist/"
        },

        plugins: [new webpack.HotModuleReplacementPlugin()],

        devServer: {
            host: '0.0.0.0',
            disableHostCheck: true,
            port: 80,
            contentBase: path.join(__dirname, "public/"),
            publicPath: "http://localhost:3000/dist/",
            hotOnly: true
        },

// Fixes Safari 10-11 bugs
// Has nothing to do with this question: already tried to comment this out
        optimization: {
            minimizer: [new TerserPlugin({
                terserOptions: {
                    safari10: true,
                },
            })],
        },
    },

    // Library

    {

        mode: 'development',

       // ... 
       // another output that's exposed as a global variable (library)

    }
];

以下是开发依赖项：

// package.json

...

  "devDependencies": {
    "@babel/cli": "^7.5.5",
    "@babel/core": "^7.5.5",
    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
    "@babel/plugin-transform-destructuring": "^7.0.0",
    "@babel/plugin-transform-parameters": "^7.0.0",
    "@babel/plugin-transform-runtime": "^7.5.5",
    "@babel/plugin-transform-spread": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.6",
    "babel-preset-env": "^1.7.0",
    "css-loader": "^3.2.0",
    "file-loader": "^4.2.0",
    "html-webpack-plugin": "^3.2.0",
    "postcss-loader": "^3.0.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.39.1",
    "webpack-cli": "^3.3.6",
    "webpack-dev-server": "^3.8.0",
    "webpack-merge": "^4.2.1"
  },

...

如果有人知道如何正确配置它，我将不胜感激。

标签： reactjswebpackbabeljspackage.jsonbabel-loader

Answer 1