【JavaScript系列】深入javascript的主流的模块规范

一、前言

目前主流的模块规范：

1、UMD通用模块

2、CommonJs

3、es6 module

 

二、UMD模块（通用模块）

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
    typeof define === 'function' && define.amd ? define(factory) :
    (global.libName = factory());
}(this, (function () { 'use strict';})));

如果你在js文件的头部看到这样的代码，这个js文件使用的规范就是UMD规范；

什么是UMD模块规范？就是AMD+CommonJs+全局变量的组合规范。

这段代码用来判断当前的运行环境，如果是node环境，就会使用CommonJs规范，然后判断是否是AMD环境，是的话就会使用AMD规范，最后导出全局变量

有了UMD后我们的代码可以同时运行在node和浏览器上。现在前端多数的库最后打包都是使用UMD规范。

 

二、CommonJs

nodejs的运行环境使用的模块系统就是基于CommonJs规范实现的，我们现在所说的ComonJs规范大多是指的node的模块系统。

2.1模块导出

关键字：module.exports，exports

// foo.js

//一个一个 导出
module.exports.age = 1
module.exports.foo = function(){}
exports.a = 'hello'

//整体导出
module.exports = { age: 1, a: 'hello', foo:function(){} }

//整体导出不能用`exports` 用exports不能在导入的时候使用
exports = { age: 1, a: 'hello', foo:function(){} }

注意：使用exports导出不能被赋值，因为赋值之后，exports失去了对module.exports的引用，成伟一个模块内的局部变量。

 

2.2模块导入

关键字：require

const foo = require('./foo.js');
console.log(foo.age);  //1

2.2.1模块导入规则

假设在目录src/app/index.js的文件，调用require()。

./moduleA 相对路径开头

在没有指定后缀名的情况下：

1、先去寻找同级目录同级目录：src/app/

2、同级目录没有moduleA文件会去找同级的moduleA目录：src/app/moduleA

结束

/module/moduleA绝对路径开头

直接在/module/moduleA目录中寻找，规则同上

 

注意：react没有路径开头

没有路径开头则视为导入一个包，会首先判断moduleA是否是一个核心模块，例如path,http，优先导入核心模块，不是核心模块，会从当前文件的同级目录下的node_modules寻找。

 

2.3require wrapper

node的模块，实际上可以理解为代码被包裹在一个函数包装器内

function wrapper (script) {
    return '(function (exports, require, m