reactjs - 通天塔 : can't get "@babel/plugin-transform-destructuring" plugin to work

Question

PS:这是我第一次放弃在这里撰写第一个问题。如果有人可以提供帮助，我将非常感激。谢谢!

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

我收到以下语法错误:

语法错误:意外的标记“...”。需要一个属性名称。

(该页面在我迄今为止尝试过的所有设备/浏览器上都能正常加载。)

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

eval("\nconst publicIp = __webpack_require__(/*!public-ip */\"./node_modules/public-ip/browser.js\");\n\nconst isOnline = 异步选项 => {\n\t选项 = {\n\t\t超时:5000，\n\t\t版本:'v4'，\n\t\t...选项\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:在下一个主要版本中删除此\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
    };

    // ...
};

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

我尝试将“@babel/plugin-transform-destructuring”插件添加到 .babelrc 中，看看是否可以解决这个问题。所有内容都已编译，但这部分代码是相同的，因此仍然产生相同的错误。

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

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

所以我尝试了一下，但没有成功。

然后我在 .babelrc 中加强了我的插件游戏，并在网上搜索类似案例，尝试不同的配置，使用 npx babel-upgrade 更新 babel，删除并重新安装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"
  },

...

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

Answer 1

正如您所理解的，您导入的模块中使用的“对象字面量中的 ES2018 扩展语法”(又名省略号)正在泄漏到您的转译包中，从而扰乱了最可怜的浏览器。发生这种情况的原因是:

Webpack 设置为忽略您的 node_modules，因此 is-online 不会被转译。

这是一个适合您的实用解决方案 - 修改 webpack.config.js 的 exclude 规则，如下所示:

exclude: /(node_modules\/(?!is-online)|bower_components)/,

又名。 “排除 Bower_Components 和除 is-online 之外的所有 Node_modules”

以防万一 -要排除更多模块，请写入:

exclude: /(node_modules\/(?!is-online|another-es6-module|yet-another-one)|bower_components)/,

可能还有更漂亮的表达方式；如果你是审美家，试试你的运气 here .

完成后，检查输出文件中是否有字符串“...”。希望它消失了!

如果您喜欢，您可以在每次构建后自动检查“...”的输出，以确保不会错过任何模块。但话又说回来，它会在包含省略号的合法字符串文字上触发......

唷!我差点以为other forces were at play ...

<小时/>

由于问题错误而导致的旧响应:

您的粗箭头函数返回一个未括在括号中的对象文字。

Mozilla says:

Returning object literals

Keep in mind that returning object literals using the concise body syntax params => {object:literal} will not work as expected.

var func = () => { foo: 1 };
// Calling func() returns undefined!

var func = () => { foo: function() {} };
// SyntaxError: function statement requires a name

This is because the code inside braces ({}) is parsed as a sequence of statements (i.e. foo is treated like a label, not a key in an object literal).

You must wrap the object literal in parentheses:

var func = () => ({ foo: 1 });