前端工程化之：webpack1-3(模块化兼容性)

小李老笨了2024-01-27 7:00

一、模块化兼容性

由于 webpack 同时支持 CommonJs 和 ES6 module ，因此需要理解它们互操作时 webpack 是如何处理的。

二、同模块化标准

如果导出和导入使用的是同一种模块化标准，打包后的效果和之前所说的模块化没有任何差异。

CommonJS：

javascript 复制代码

// 导出
module.exports = {
  a: 1,
  b: 2,
  c: 3
}

// 导入
require("./a")


// 导入的结果
{
  a: 1,
  b: 2,
  c: 3
}

ES6 Module：

javascript 复制代码

// 导出
export var a = 1;
export var b = 2;
export default 3;

// 导入1
import * as obj from "./a"

// 导入结果1
{
  a:1,
  b:2,
  default:3
}

// 导入2
import c from "./a"

// 导出结果2
3

三、不同模块化标准

不同的模块化标准， webpack 按照如下的方式处理。

ES6 Module export + CommonJS require：

javascript 复制代码

// 导出
export var a = 1;
export var b = 2;
export default 3;

// 导入
require("./a")

// 导入结果
{
  a:1,
  b:2,
  default:3
}

CommonJS export + ES6 Module import：

javascript 复制代码

// 导出
module.exports = {
  a: 1,
  b: 2,
  c: 3
}

// 导入1
import * as obj from "./a"
import c  from "./a"

// 导出结果
{
  a:1,
  b:2,
  c:3
}

四、最佳实践

代码编写最忌讳的是精神分裂，选择一个合适的模块化标准，然后贯彻整个开发阶段。

绝大部分第三方库，使用的是 CommonJS 的方式导出。