众所周知,在web前端模块化的过程中,常见的会提到common.js,AMD ,CMD,UMD,ES6等模块化方式,针对webpack中支持的模块化作一下对比和分析。
webpack当中主要支持common.js,AMD,ES6三种模块化方式:
common.js
其中,common.js是一种被广泛使用的javascript模块化规范,核心思想是通过require方法来同步加载依赖的模块,通过module.exports导出需要暴露的接口。
common.js规范的流行得益于node.js采用的就是这种方式,后来这种方式也被引入到了网页开发中:
// 导入
const moduleA = require('./moduleA‘);
// 导出
module.exports = moduleA.someFunc;
优点:
1. 代码可复用于node.js环境下运行,例如做同构应用
2.通过npm发布的很多第三方模块都采用了commonjs规范
缺点:
1.这样的代码需要通过相关的loader等工具转换成ES5,这样才能直接在浏览器环境下使用
AMD
AMD(Asynchronous_module_definition)同样是一种javascript的模块化规范,它与common.js最大的不同在于,它采用的是异步的方式去加载依赖的模块。AMD主要用于解决针对浏览器环境的模块化问题,最具代表性的实现是require.js
// 定义一个模块
define('module', ['dep'], function(dep) {
return exports;
}
// 导入和使用
require(['module'], function(module)) {
}
对于AMD而言,其优缺点如下:
优点:
1.可在不转换代码的情况下直接在浏览器中运行
2.可异步加载依赖
3.可并行加载多个依赖
4.代码可运行在浏览器环境和node.js环境下
缺点:
1.javascript没有原生支持AMD,需要先导入实现了AMD的库后才能正常使用
ES6 module
ES6模块化是ECMA提出的javascript模块化规范,它在语言层面上实现了模块化。浏览器和node.js都原生支持该规范。它将逐渐取代Common.js和AMD规范,成为浏览器和服务器通用的模块化解决方案
// 导入
import {readFile} from 'fs';
import React from 'react';
// 导出
export function hello() {};
export default {};
缺点:
目前无法直接运行在大部分javascript环境下,必须通过工具转换成标准的ES5后才能运行
common.js 与 ES6 module 的区别
1. commonJS 模块是运行时加载,ES6 模块是编译时输出接口
即require与import的区别,common.js中的require的模块可以动态改变,而ES6中import的模块,需要先加载完成,然后才能引入到项目中
2.commonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用
ES6 module中export和export default区别
1.导出方式
// export
var nameA = '张三';
var addressA = ['a','b'];
export funtion Module() {};
export obj;
// export default;
var nameB = '张三';
var addressB = ['a','b']export default {};
在同一个文件中,export可以有多个,但是export default只能有一个,当然也可以没有
在导出变量,对象,函数的时候,export需要命名,但是export default不需要命名
2.引入方式
// export
import {name, addressA} from './a'
// export default
import useName, useAdd from './a'
在引用export导出的变量时,导出的变量名需要与模块内的变量名一致,且引用部分需要加{}
在引用export default导出时,可以自定义名称,且不需要加{}, 而且只能引入一次
小结:
1. commonJS模块输出是一个值的拷贝,ES6模块输出是值的引用
2. commonJS模块是运行时加载,ES6模块是编译时输出接口
3. commonJS模块无论require多少次,都只会在第一次加载时运行一次,然后保存到缓存中,下次在require,只会去从缓存取
4.module.exports与exports ,是CommonJS的规范,被使用于Node.js中。export与export default ,是ES6规范,被使用于React或Vue中