Question

我们必须更新一些依赖项才能切换到Webpack 4，并在尝试在同一项目中混合"self.d = self.getd()"和import时在webpack中收到警告，并在浏览器中出现错误。

我们有一个非常大项目（300多个文件），其中一些文件使用require和var Pkg = require('./fileName');，而另一些文件使用module.exports = MyComponent和import Pkg from './fileName'并且宁愿不必使用require / module.exports遍历每一个并进行更新。

Webpack警告：

export default MyComponent

浏览器错误：

WARNING in ./index.js 15:17-20
"export 'default' (imported as 'App') was not found in './App.jsx'

package.json依赖版本：

App.jsx:20 Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
    at Module.eval (App.jsx:20)
    at eval (App.jsx:21)
    at Module../App.jsx (bootstrap:83)
    at __webpack_require__ (bootstrap:19)
    at eval (index.js:2)
    at Module../index.js (bootstrap:83)
    at __webpack_require__ (bootstrap:19)
    at bootstrap:83
    at bootstrap:83

.babelrc

"@babel/cli": "^7.2.3",
"@babel/core": "^7.4.4",
"@babel/preset-env": "^7.4.4",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.5",
"webpack": "^4.31.0",
"webpack-cli": "^3.3.2",

.browserlistrc

{
  "presets": [
    "@babel/preset-react",
    "@babel/preset-env"
  ]
}

Webpack配置：

{
  "browserslist": [
      ">0.25%",
      "ie 11",
      "not op_mini all"
  ]
}

index.js

rules: [
    {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: [{
            loader: 'babel-loader',
            options: {
                babelrc: true
            }
        }],
    },
    // some other rules...   
]

App.js

import App from './App'

// Expose App to the window so we can utilize 
// it from within <script> tags
window.App = App

index.html

import React from 'react'
import ReactDOM from 'react-dom'

var App = (function () {
    return {
        route: function (route, properties) {
            return ReactDOM.render(
                <div>component markup</div>, document.getElementById('workspace')
            )
        }
    }
})()

// This works
// export default App

// This breaks
module.exports = App

Answer 1

从技术上讲，webpack会捆绑（但会发出警告，就像您在此处看到的那样）。 但是，我们的webpack团队建议您将代码库中使用的CommonJS语法的数量限制为尽可能少。

为什么？因为CommonJS在许多情况下不是静态可分析的，因此无法“摇动”诸如摇树和范围提升之类的优化。这意味着您的JavaScript（网站上要加载的最昂贵的资源）中将包含各种无效/未使用的代码。

在我们的webpack documentation中，您可以观察到listed optimization bailouts，您会发现其中之一是代码中的“使用CommonJS”或“模块”符号。

从长远来看，这将对您的应用程序产生重大的负面Web性能影响！

如果确实很难迁移，那么我将研究一个可在您的代码上运行的codemod，并在可能的情况下转换要求导入！

Webpack是否可以同时使用“ require”和“ import”？

1 个答案: