是否可以将“require”和“import”与Webpack一起使用？

Question

我们必须更新一些依赖项才能切换到 Webpack 4，并且在尝试在同一项目中进行import混合时，我们在 webpack 中收到警告，在浏览器中收到错误。require

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

网页包警告：

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

浏览器错误：

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

package.json 依赖版本：

"@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",

.babelrc

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

.browserlistrc

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

网络包配置：

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

索引.js

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

应用程序.js

"@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",

索引.html

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

Answer 1

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

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

在我们的webpack 文档中，您可以观察列出的优化救助，您会注意到其中之一是代码中的“使用 CommonJS”或“模块”符号。

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

如果迁移确实很痛苦，那么我会研究一个将在您的代码中运行的 codemod，并且转换需要（如果可能）导入！