如何在使用 webpack 捆綁 React 時禁用嚴格模式

Question

您好，我被我的應用程序困住了，我的應用程序在所有其他瀏覽器中都沒有問題，而不是在 IE 中它拋出錯誤

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

我已經在 webpack.config 中實現了加載器

  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並將其從 bundle 中刪除，那么它可以正常工作，那么如何在使用 webpack 創建 bundle 時刪除該嚴格模式

Answer 1

如果您看到該錯誤，那么很可能您在代碼庫中的某個位置在同一對象上聲明了多個屬性。 禁用鬧鍾只會解決症狀。

我發現如果我在 JSX 中聲明重復的屬性會彈出這個錯誤，例如在執行<MyComponent className="foo" onClick={onClick} className="foobar" />或不小心復制其他一些屬性時。

查找並修復實際錯誤，而不僅僅是抑制錯誤消息。 IE 應該告訴您它發生在哪一行，查看那里的內容並找出哪個組件有問題應該不會太難。

Answer 2

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

我一直在尋找一種方便的方法來擺脫'use strict'而它似乎就是這樣做的。

Answer 3

我在.babelrc文件中包含了黑名單選項，例如

 blacklist: ["useStrict"]

它工作正常。

Answer 4

你有幾個方法可以解決這個問題，因為你使用 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"
            }
        ]
    ]
}