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

一、模块化兼容性

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

二、同模块化标准

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

CommonJS:

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

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


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

ES6 Module: 

// 导出
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: 

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

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

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

CommonJS export + ES6 Module import:

// 导出
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 的方式导出。 

你可能感兴趣的:(前端工程化,前端,webpack,es6)