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

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

我们有一个very大型项目（300+ 个文件），其中一些文件使用var Pkg = require('./fileName'); and module.exports = MyComponent当其他人使用import Pkg from './fileName' and 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"
  ]
}

网络包配置：

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

index.js

import App from './App'

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

App.js

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

索引.html

<script>
    App.route('login', {some: 'props'});
</script>

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

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

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

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

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