是否可以同时使用两个"require"和“导入"与Webpack一起? [英] Is it possible to use both "require" and "import" together with Webpack?

问题描述

我们必须更新一些依赖项才能切换到Webpack 4，并在尝试将 import 和 require 混合使用时，在webpack中收到警告，并在浏览器中出现错误.同一项目.

We had to update some dependencies to switch to Webpack 4 and are getting a warning in webpack and an error in the browser when trying to mix import and require within the same project.

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

We have a very large project (300+ files) with some files using var Pkg = require('./fileName'); and module.exports = MyComponent while others use import Pkg from './fileName' and export default MyComponent and would prefer to not have to go through each one using require/module.exports and update them.

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

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>

推荐答案

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

Technically webpack will bundle (but emit a warning like you see there). However, we at the webpack team suggests that you limit the amount of CommonJS syntax used in your codebase to as small as possible.

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

Why? Because CommonJS isn't statically analyzable in many edge cases, and therefore "bails out" of optimizations like tree-shaking, and scope-hoisting. This mean's your JavaScript (the most expensive resource on your website to load), will have all sorts of dead/unused code in it.

在我们的 webpack文档中，您可以观察

In our webpack documentation you can observe the listed optimization bailouts and you will notice that one of them is "using CommonJS" or "module" symbols in your code.

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

Long term this will have significant negative web performance impacts on your application!

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

If it really is painful to migrate, then I would look into a codemod that will run across your code and transform requires (where possible) to imports!

这篇关于是否可以同时使用两个"require"和“导入"与Webpack一起?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！