时间戳

首页 > 解决方案 > 是否可以将“require”和“import”与 Webpack 一起使用？

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

问题描述

我们必须更新一些依赖项才能切换到 Webpack 4，并且在尝试在同一个项目中混合时在 webpack 中收到警告，并且在浏览器中出现import错误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"
  ]
}

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

索引.html

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

标签： javascriptwebpackbabeljswebpack-4

解决方案

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

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

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

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

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

推荐阅读