[webpack] 发中使用的是 esm 和 webpack, 是否可以直接调用 commonjs 模块化的三方包【热度: 359】

关键词：模块化混用

在使用 Webpack 作为构建工具的项目中，ESM (ECMAScript Modules) 和 CommonJS 模块系统可以混用。

Webpack 提供了对两种模块化标准的支持，能够理解和处理它们之间的差异，使得这两种不同类型的模块可以在同一个项目中共存。

虽然 ESM 和 CommonJS 可以混用，但是还需要注意一些关键的点：

导入方式：当你从一个 ESM 模块中导入 CommonJS 模块时，导入的内容会被当成默认导出处理。这意味着，即使 CommonJS 模块导出了多个成员，你也需要以默认导入的方式来获取整个 exports 对象。
```
// CommonJS 模块
module.exports = {
  foo: "bar",
  baz: "qux",
};

// 在 ESM 中导入 CommonJS 模块
import cjsModule from "./cjs-module";
console.log(cjsModule.foo); // 输出: 'bar'
```
导出方式：在一个 CommonJS 模块中，你可以通过 require 导入一个 ESM，但是这通常需要额外配置，因为 ESM 默认是异步加载的。此外，ESM 模块的导出在被 CommonJS 模块通过 require 导入时，必须访问它们的 default 属性或使用 import() 异步导入语句。
动态与静态：ESM 是静态的，这意味着你不能动态地导入或导出模块，所有的导入和导出必须在模块的顶层发生。CommonJS 模块是动态的，允许你将 require 语句放在代码的任何位置。由于这种静态与动态的区别，混用时要考虑代码组织和模块加载顺序。
构建与树摇（Tree Shaking）：Webpack 可以对 ESM 进行树摇优化，以去除未使用的导出。这可以减少最终构建包的大小。由于 CommonJS 模块是动态的，它们不完全支持树摇。如果在意最终包的大小，优先使用 ESM 来编写新模块可能会更好。

在 Webpack 下，ESM 和 CommonJS 可以混用，但是混用时需要注意导入导出的细微差别，以及可能对构建优化产生的影响。理解这些模块系统之间的差异，并合理组织代码，可以充分利用 Webpack 提供的灵活性和功能，编写高效且可维护的现代 JavaScript 应用。