前言
在进行ts项目的时候，总是报错找不到模块，查了很多资料发现自己这块的内容还是不怎么熟悉，今天总结下方便今后查询
规范
我的理解是amd,cmd,commonJS,umd,es6并不是什么新的语言，他们就是写法上的不一样，从而引出了不同的写法对应这个不同的规范。我们用的最多的应该是commonJS和es6一个用于服务器，一个用于浏览器。下面我们来看看这些规范的写法和使用情况
amd
amd是最早的模块规范，在amd之前我们引入的js文件都是通过script标签，但是这有一些问题，首先引入会导致全局变量冲突，污染。然后就是需要确保顺序。由于这些原因开发者一直在找一个合理的解决方法，此时amd规范应运而生。
amd用法
// 定义
define('demo', ['helper'] ，function(helper) {
function init() {
console.log('init')
}
return { init }
})
// 定义
define(function(require, exports, module) {
exports.init = function(){}
});
// 使用
require(['demo'], function(demo) {
demo.init();
})
- 每个js的变量都是定义在function里面不会造成全局的污染，
- amd是异步加载的，并且加载完之后立马执行
- 如何确保加载时候的依赖了，模块定义的时候会传入一个依赖数组，根据这个依赖数组去加载依赖
- amd推崇依赖前置，先把依赖写好
cmd
cmd的写法其实和amd很像的是推广 seajs孕畜出的一种规范
define(function(require, exports, module) {
const test = require('./test.js');
// exports.test = test;
module.exports.test = test;
})
// cmd也可以写成amd的依赖形式
define('demo', ['helper'] ，function(helper) {
function init() {
console.log('init')
}
return { init }
})
// 使用
require(['demo'], function(demo) {
demo.test();
})
- cmd只能写成局部的reqiure,不能像amd那样可以引入require，生成全局的require
- cmd默认是同步加载的，当然让我们也可以设置异步加载 require.async
- 其实amd,cmd都需要和require打交道，我们的例子是最简单的用法，require中有许多比较重要的配置比如paths, shim, map等，因为现在的amd,cmd用的比较少，今后遇到实际项目再去讲require相关的配置
- cmd推荐就近依赖，依赖下载完之后遇到require才去执行
- cmd规范推崇一个文件就是一个模块，所以模块名一般定义为文件名
commonJs
commonJs规范是定义在node里面的，node环境提供了一个全局变量exports,后来又允许了module.exports的写法,以下是commonJS规范的写法
// test.js
function test() {
console.log('test');
}
exports.test = test;
// 使用
const test = require('./test');
- 这样的写法就更加的简洁了，但是记住在浏览器不借助其他工具，直接运行时会报错的，因为没有exports
- commonJs虽然是同步加载，但是运行在服务器端，读取文件更快
- 我们经常在react项目里面写的const style = require('./index.less');能这么写是因为你有webpack工具帮你转换了，查看打包之后的结果你会发现，他其实把commonJS语法打包成了浏览器可识别的amd语法
exports 和module.exports的区别
说到他们的区别你只需要记住以下三点就行
- module.exports默认是空对象{}
- exports 是module.exports的引用
- 模块导出的是module.exports的内容
所以以下代码就是这样
exports.init 等价于 module.exports.init
exports.init = function() {};
module.exports = { name: 2}; // 由于module.exports地址更新，默认又是导出module.exports，所以exports.init 无效，最终结果是{ name: 2}
umd
umd就比较简单一点，就是amd规范和commonJS规范的合并，判断支不支持define,支持的话就用amd,不支持的话在看看支持module.exports么,支持的话就用coomonJS,以下是他的代码
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['b'], factory);
} else if (typeof module === 'object' && module.exports) {
// Node. Does not work with strict CommonJS, but
// only CommonJS-like environments that support module.exports,
// like Node.
module.exports = factory(require('b'));
} else {
// Browser globals (root is window)
root.returnExports = factory(root.b);
}
}(this, function (b) {
//use b in some fashion.
// Just return a value to define the module export.
// This example returns an object, but the module
// can return a function as the exported value.
return {};
}));
es6模块
es6的语法应该是我们最熟悉的了，不过低版本的浏览器不会识别，所以需要借助打包工具去解析。以下是es6模块的代码
// 定义test.js
export var a = 3;
// 引入
import { a } from './test'
es6 export的讲解
之前对export比较了解，但是看了阮一峰老师的es6模块讲解，觉得还是有必要在总结下。
export必须要一个接口
这个是什么意思，就是说export出去的东西，是要具有名字的，一个特定的值。你需要给名字，import才能接收，看以下代码
var a = 2;
export a; // error 错误a还是一个值
var a = function() {}
export a; // erro 错误a是一个匿名函数，但是如果是一个具名函数就行
export function a () {};; // right 这样就是可以的
export const a = function() {} // right 或者这样也是可以的
// 如果要写成匿名函数抛出的话可以放在{}里面
var a = function() {}
var b = 4;
export { a, b } // 此时接口就是a, b了;
// export可以抛出多个
export var a = 1;
export var b = 2;
// 对应的接收就是
import * as demo from './test';
// 接收一个就是
import { a } from './test';
export default
上面说了export的几种情况，在来看看export default,他和export正好相反不需要接口因为default就是接口。并且只能有一个export default,看以下代码的讲解
var a = 1;
export default a; // right
export default var a = 1; // error 错误default已经是接口了，不需要再定义接口
// 只能有一个export default
export default 1;
export default 2; // 错误只能有一个export default
// import的接收
import test from './test'; test可以是任意的
疑问
注意：测试都是在webpack打包环境下测试的
- demo文件里面既有export var demo = 12还有export default 13那么import demo from返回的是什么
解释import demo返回的是export default 的内容，如果没有export default了？没有export default返回的是undefined，记住返回undefined是因为demo文件里面写了 export var demo = 12，如果都没写的话返回{}
- 文件里面既有export还有export default那么import * 返回的是什么
import * 返回的是export和export default的合集，形式如这样{a: 1, default: 2};，因为default也是一个默认接口
- 文件里面既没有export也没有export default。import * , import test from 和import { test } from 返回什么
都没有的话import *会返回一个空对象， import test from也会返回一个{},import {test} from 会返回undefined
- 文件里面是module.exports={test: 12},import *, impoert test from , import { test } from 返回什么
import * 返回{test: 12}, import test from返回{test: 12}， import { test } from 返回12
