如何在使用 webpack 捆绑 React 时禁用严格模式

Posted 2023-02-22

【中文标题】如何在使用 webpack 捆绑 React 时禁用严格模式

【英文标题】：How to disable strict mode while bundling React using webpack

【发布时间】：2016-04-26 17:17:16

【问题描述】：

您好，我的应用程序卡住了，我的应用程序在所有其他浏览器中都可以正常工作，而不是在 IE 中它会抛出错误

0x800a0416 - javascript runtime error: Multiple definitions of a property not allowed in strict mode

我已经在 webpack.config 中实现了 loader

  module: 
    loaders: [
        test: /\.js?$/,
        exclude: /(node_modules|bower_components)/,
        loaders: ['babel'],
        include: path.join(__dirname, 'scripts')
    ]

我的 Package.json 脚本包含 "build": "./node_modules/.bin/webpack --config webpack.config.production.js --progress --profile --colors", 用于构建捆绑包

如果我会明确找到 use strict 并将其从包中删除，那么它工作正常，那么如何在使用 webpack 创建包时删除该严格模式

【问题讨论】：

从外观上看，您使用的是 es6，因为您使用的是 babel，如果您在此处阅读 ***.com/questions/31685262/…。为什么要写严格？

见***.com/questions/33821312/…

@MikeD：我已经签入了我的项目，我没有在我的代码中写任何地方“使用严格”它会自动出现在 bundle.js 文件中

@EricO'Connell：谢谢你能不能回答上面提到的帖子，这样我就可以投票，其他人也可以使用它

【参考方案1】：

我在我的 .babelrc 文件中包含了黑名单选项，例如

 blacklist: ["useStrict"]

它工作正常。

【讨论】：

这不适用于 Babel 6 及更高版本，它仅适用于 Babel 5。

【参考方案2】：

你没有办法解决这个问题，因为你使用了 webpack，所以在 .babelrc 或你的 webpack 中将模块设置为 false

webpack.mix.js

module : 
        loaders : [
            
                test: /\.js?/,
                include: APP_DIR,
                use: 
                    loader: 'babel-loader',
                    options: 
                        "presets": [
                            ['es2015', modules: false]
                        ],
                    
                ,
                exclude: /node_modules/
            ,
        ]
    ,

或.babelrc

    "presets": [
        [
            "@babel/preset-env",
            
                "debug": true,
                "modules": false,
                "forceAllTransforms": true,
                "useBuiltIns": "usage"
            
        ]
    ]

【参考方案3】：

如果您看到该错误，则很可能您在代码库中的某个位置声明了同一对象的多个属性。禁用闹钟只是解决问题。

如果我在 JSX 中声明重复属性，我发现会弹出此错误，例如在执行<MyComponent className="foo" onClick=onClick className="foobar" /> 或意外复制其他属性时。

查找并修复实际错误，而不是仅仅隐藏错误消息。 IE 应该会告诉您它发生在哪一行，并且不应该太难查看那里的内容并找出哪个组件有问题。

【讨论】：

谢谢。由于我使用的是 browser.js，因此我没有从 IE 获得特定的行号，但我浏览了一下并在一个元素上找到了多个 id 属性。

这是两个答案中更好的一个。

【参考方案4】：

查看这个包：https://www.npmjs.com/package/babel-plugin-transform-remove-strict-mode

我一直在寻找一种方便的方法来摆脱'use strict'，它似乎正在这样做。