JS模块化规范之ES6及UMD

发布时间:2023年12月21日

前言

ESM在模块之间的依赖关系是高度确定的,与运行状态无关,编译工具只需要对ESM模块做静态分析,就可以从代码字面中推断出哪些模块值未曾被其它模块使用,这是实现Tree Shaking技术的必要条件。

ES6模块化

概念

ES6模块的设计思想是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。CommonJSAMD模块,都只能在运行时确定这些东西。比如,CommonJS模块就是对象,输入时必须查找对象属性。

基本使用

export命令用于规定模块的对接接口,import命令用于输入其他模块提供的功能。

/** 定义模块 math.js /
var basicNum = 0;
var add = function(a,b){
	return a + b;
};
export { basicNum,add };
*/
//引用模块
import { basicNum,add } from './math';
function test(){
	ele.textContext = add(99+basicNum);
}

如上例所示,使用import命令的时候,用户需要知道所要加载的变量名和或函数名,否则无法加载。为了给用户提供方便,让他们不用阅读文档就能加载模块,就要用到export default命令,为模块指定默认输出。

//export-default.js
export default function(){
	console.log('foo');
}
//import-default.js
import customName from './export-default';
customName(); // 'foo'

模块默认输出,其他模块加载该模块时,import命令可以为该匿名函数指定任意名字。

ES6模块与CommonJS模块的差异

  1. CommonJS模块输出的是一个值的拷贝,ES6模块输出的是值的引用;
  2. CommonJS模块是运行时加载,ES6模块是编译时输出的接口;

第二个差异是因为CommonJS加载的是一个对象(即module.exports属性),该对象只有在脚本运行完才会生成。而ES6模块不是对象,他的对接接口只是一种静态定义,在代码静态解析阶段就会生成。
下面重点解释第一个差异,我们还是举上边这个CommonJS模块的加载机制例子:

//lib.js
export let counter = 3;
export function incCounter(){
	counter++;
}
//main.js
import { counter,incCounter } from './lib';
console.log(counter);//3
incCounter();
console.log(counter);//4

ES6模块的运行机制与CommonJS不一样。ES6模块是动态引用,并且不会缓存值,模块里面的变量绑定其所在的模块。

ES6实现

简单来说就一句话:使用Babel将ES6编译为ES5代码,使用Browserify编译打包js。

  1. 定义package.json文件
{
	"name":"es6-balel-browserify",
	"version":"1.0.0"
}
  1. 按装babel-cli,babel-perset-es2015和browserify
npm install babel-cli browserify -g
npm install babel-perset-es2015 --save-dev
  1. 定义.babelrc文件
{
	"presets":["es2015"]
}
  1. 定义模块代码
//module1.js文件
//分别暴露
export function foo(){
	console.log('foo() module1')
}
export function bar(){
	console.log('bar() module1')
}
//module2.js文件
function fun1(){
	console.log('fun1() module2')
}
function fun2(){
	console.log('fun2() module2')
}
export { fun1,fun2 }

//module3.js文件
// 默认暴露 可以暴露任意数据类型,暴露什么数据,接收到就是什么数据
export default()=>{
	console.log('默认暴露')
}
//app.js文件
import { foo,bar } from './module1'
import { fun1,fun2 } from './module2'
import module3 from './module3'
foo()
bar()
fun1()
fun2()
module3()
  1. 编译并在index.html引入
    • 使用Babel将ES6编译为ES5代码(但包含CommonJS语法):babel js/src -d js/lib
    • 使用Browserify编译js:browserify js/lib/app.js -o js/lib/bundle.js然后在index.html文件中引入
<script type="text/javascript" src="js/lib/bundle.js"></script>

最后得到如下结果:

foo() module1
bar() module1
fun1() module2
fun2() module2
默认暴露
  1. 引入第三方库
    首先安装依赖npm install jquery@1
//app.js
import { foo bar } from './module1'
import { fun1,fun2 } from './module2'
import module3 from './module3'
import $ from 'jquery'

foo()
bar()
fun1()
fun2()
module3()
$('body').css('background','green')

UMD(Universal Module Definition)

是一种JavaScript通用模块定义规范,让你的模块能在JavaScript所有运行环境中发挥作用。
意味着要同时满足CommonJS,AMD,CMD的标准,一下为实现:

(function (root,factory){
	if(typeof module === 'object' && typeof module.exports === 'object'){
		console.log('是CommonJS模块规范,nodejs环境');
		module.exports = factory();
	}else if(typeof define === 'function' && define.amd){
		console.log('是AMD模块规范,如require.js')
		define(factory)
	}else if(typeof define === 'function' && define.cmd){
		console.log('是CMD模块规范,如sea.js')
		define(function(require,exports,module){
			module.exports = factory()
		})
	}else{
		console.log('没有模块环境,直接挂载在全局对象上')
		root.umdModule = factory();
	}
}(this,function(){
	return {
		name:'我是一个UMD模块'
	}
}))

总结

  1. CommonJS规范主要用于服务端编程,加载模块是同步的,这并不适合在浏览器环境,因为同步意味着阻塞加载,浏览器资源是异步加载的,因此有了AMD CMD解决方案;
  2. AMD规范是在浏览器环境中异步加载模块,而且可以并行加载多个模块。不过,AMD规范开发成本高,代码的阅读和书写比较困难,模块定义方式的语义不顺畅;
  3. CMD规范AMD规范很相似,用于浏览器编程,依赖就近,延迟执行,可以很容易在Node.js中运行
  4. ES6在语言标准的层面上,实现了模块功能,而且实现的相当简单,完全可以取代CommonJSAMD规范,成为浏览器和服务器通用的模块解决方案;
  5. UMD为同时满足CommonJS、AMD、CMD标准的实现;

好啦~JS模块化规范就说完啦!欢迎友友们留言讨论哟!
在这里插入图片描述

文章来源:https://blog.csdn.net/weixin_45364386/article/details/135112303
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。