"type: module" - Uncaught ReferenceError: require is not defined
"type: module" - Uncaught ReferenceError: require is not defined
我决定将我的 webpack 5 + babel 项目从 require 转移到 es6 模块。我将“类型：模块”添加到 package.json 并更改了所有需要导入我的 js 文件
代码在生产中成功构建。但是，在开发模式下，我收到浏览器错误“Uncaught ReferenceError: require is not defined”，因为我排除了 node_modules 以进行快速构建。
如何解决这个问题？
浏览器环境没有 require NodeJS 有。 而后者不能真正将 require 用于 ESM 模块。 您将 node_modules/ 排除在捆绑之外的行为意味着这些模块实际上并不存在于您的构建，因此无法在浏览器中使用。
为了优化node_modules/中外部模块的使用，您可以查看cache groups。默认情况下，Webpack 5 应该已经有一个 vendor chunk，其中所有 node_modules/ 被捆绑在一起成为一个块，例如一个单独的导出文件。这已经尽可能地优化了外部包，因为它可以在构建之间缓存（对于监视模式下的 Webpack）。
我决定将我的 webpack 5 + babel 项目从 require 转移到 es6 模块。我将“类型：模块”添加到 package.json 并更改了所有需要导入我的 js 文件
代码在生产中成功构建。但是，在开发模式下，我收到浏览器错误“Uncaught ReferenceError: require is not defined”，因为我排除了 node_modules 以进行快速构建。
如何解决这个问题？
浏览器环境没有 require NodeJS 有。 而后者不能真正将 require 用于 ESM 模块。 您将 node_modules/ 排除在捆绑之外的行为意味着这些模块实际上并不存在于您的构建，因此无法在浏览器中使用。
为了优化node_modules/中外部模块的使用，您可以查看cache groups。默认情况下，Webpack 5 应该已经有一个 vendor chunk，其中所有 node_modules/ 被捆绑在一起成为一个块，例如一个单独的导出文件。这已经尽可能地优化了外部包，因为它可以在构建之间缓存（对于监视模式下的 Webpack）。