javascript - 是否可以将 "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 遍历每一个并更新它们。

webpack 警告:

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"
  ]
}

webpack 配置:

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

应用.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

index.html

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

Answer 1

从技术上讲，webpack 会打包(但会发出一个警告，就像你在那儿看到的那样)。 但是，我们 webpack 团队建议您将代码库中使用的 CommonJS 语法数量限制为尽可能少。

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

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

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

如果迁移真的很痛苦，那么我会研究一个代码模块，它将在您的代码中运行并将需要(在可能的情况下)转换为导入!