4.1 export和module.export导出

最终导出的是module.export对象，export是对module.export的引用，可以往export上面添加属性，但是不能直接给export赋值一个新对象，这样不能正确的导出。

// why.js
const name = "why"
const age = 18
let friend = {name:'哈哈',age:18
}
function sum(num1, num2) {return num1 + num2
}// 第一种导出方式
exports.name = name
exports.age = age
export.friend = friend// 第二种导出方式
module.exports = {name,age,friend
}// 这种代码不会进行导出
exports = {name,age,sum
}// 最终能导出的一定是module.exports

 4.2 require()导入

// main.js
const why = require("./why.js")
console.log(why.name)
console.log(why.age)

// foo.js
setTimeout(() => {module.exports = "我改了"
}, 1000)
module.exports = "我还没改"// main.js
const foo = require("./foo.js")
console.log(foo) //我还没改
setTimeout(() => {console.log(foo) //我还没改
}, 2000)

情况一：X是一个Node核心模块，比如path、http ，直接返回核心模块，并且停止查找

情况二：X是以 ./ 或 ../ 或 /（根目录）开头的

第一步：将X当做一个文件在对应的目录下查找；

1.如果有后缀名，按照后缀名的格式查找对应的文件

2.如果没有后缀名，会按照如下顺序：

• 直接查找文件X
• 查找X.js文件
• 查找X.json文件
• 查找X.node文件

第二步：没有找到对应的文件，将X作为一个目录 ，查找目录下面的index文件

• 查找X/index.js文件
• 查找X/index.json文件
• 查找X/index.node文件

如果没有找到，那么报错：not found

情况三: 直接是一个X（没有路径），并且X不是一个核心模块

      会现在当前目录的node_modules下查找是否有这个文件，如果没有找到则去上一级目录查找，如果找到了直接返回，没有找到再去上一级目录查找，直到找到根目录下的node_modules， 如果上面的路径中都没有找到，那么报错：not found

例如：

在这个目录的main.js文件中：

/Users/coderwhy/Desktop/Node/TestCode/04_learn_node/05_javascript-module/02_commonjs/main.js

编写 require('why’)

查找的路径如下：

// foo.js
// 导出方式一:export 声明语句
export const name = "why"
export const age = 18
export function foo() {console.log("foo function")}// 导出方式二:export 导出 和 声明分开
const name = "哈哈"
const age = "18"
export {name, age} //声明了对外的接口name,age,和模块内的变量一一对应// 导出方式三: 第二种导出时起别名export {name as fName,age as fAge,foo as fFoo}// 导出方式四：默认导出,一个模块的默认导出只能有一个
export default name

最后，export命令可以出现在模块的任何位置，只要处于模块顶层就可以。如果处于块级作用域内，就会报错，下一节的import命令也是如此。这是因为处于条件代码块之中，就没法做静态优化了，违背了 ES6 模块的设计初衷。

function foo() {export default 'bar' // SyntaxError
}
foo()

5.2 import 导入关键字

import命令接受一对大括号，里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块（profile.js）对外接口的名称相同。

// main.js
// 1.导入方式一: 普通的导入
import { name, age, foo } from "./foo.js"
import { fName, fAge, fFoo } from './foo.js'// 2.导入方式二: 起别名
import { name as fName, age as fAge, foo as fFoo } from './foo.js'// 3.导入方式三: 将导出的所有内容放到一个标识符中
import * as foo from './foo.js'// 4.导入方式四：默认导入可以自己起名字
import myName from './foo.js'

import命令输入的变量都是只读的，因为它的本质是输入接口。也就是说，不允许在加载模块的脚本里面，改写接口。

import {a} from './xxx.js'a = {}; // Syntax Error : 'a' is read-only;

上面代码中，脚本加载了变量a，对其重新赋值就会报错，因为a是一个只读的接口。但是，如果a是一个对象，改写a的属性是允许的。

import {a} from './xxx.js'a.foo = 'hello'; // 合法操作

上面代码中，a的属性可以成功改写，并且其他模块也可以读到改写后的值。不过，这种写法很难查错，建议凡是输入的变量，都当作完全只读，不要轻易改变它的属性。

5.3 import和export混合使用

// 1.导出方式一:
import { add, sub } from './math.js'
import { timeFormat, priceFormat } from './format.js'export {add,sub,timeFormat,priceFormat}// 2.导出方式二:export { add, sub } from './math.js'export { timeFormat, priceFormat } from './format.js'// 3.导出方式三:
export * from './math.js'
export * from './format.js'

5.4 模块加载过程

import命令会被 JavaScript 引擎静态分析，先于模块内的其他语句执行

当JavaScript引擎执行代码时，会在编译阶段对import语句进行静态分析，确定所导入的模块，并在运行时加载这些模块。

在使用import导入模块时，实际上是在模块内部创建了一个指向被导入模块的引用，而不是直接复制模块中的变量。因此，当不同的文件中使用import导入相同的模块时，它们实际上是共享了同一个模块实例，所以可以访问和修改同一个模块中的变量。

JS 引擎对脚本静态分析的时候，遇到模块加载命令import，就会生成一个只读引用。等到脚本真正执行时，再根据这个只读引用，到被加载的那个模块里面去取值。原始值变了，import加载的值也会跟着变。因此，ES6 模块是动态引用，并且不会缓存值，模块里面的变量绑定其所在的模块。

5.5 import() 函数实现动态加载

ES6的模块不是对象，import 命令会被 JavaScript 引擎静态分析，在编译时就引入模块代码，而不是在代码运行时加载，所以无法实现条件加载。也正因为这个，使得静态分析成为可能。

这样的设计，固然有利于编译器提高效率，但也导致无法在运行时加载模块。在语法上，条件加载就不可能实现。如果import命令要取代 Node 的require方法，这就形成了一个障碍。因为require是运行时加载模块，import命令无法取代require的动态加载功能。

动态加载，require到底加载哪一个模块，只有运行时才知道。

ES2020提案 引入import()函数，支持动态加载模块。

import(specifier)

上面代码中，import函数的参数specifier，指定所要加载的模块的位置。import命令能够接受什么参数，import()函数就能接受什么参数，两者区别主要是后者为动态加载。

import()函数可以用在任何地方，不仅仅是模块，非模块的脚本也可以使用。它是运行时执行，也就是说，什么时候运行到这一句，就会加载指定的模块。另外，import()函数与所加载的模块没有静态连接关系，这点也是与import语句不相同。import()类似于 Node 的require方法，区别主要是前者是异步加载，后者是同步加载。

import()加载模块成功以后，这个模块会作为一个对象，当作then方法的参数。因此，可以使用对象解构赋值的语法，获取输出接口。

import('./myModule.js')
.then(({export1, export2}) => {// ...·
});

上面代码中，export1和export2都是myModule.js的输出接口，可以解构获得。

如果模块有default输出接口，可以用参数直接获得。

import('./myModule.js')
.then(myModule => {console.log(myModule.default);
});

6.ES6 模块与 CommonJS 模块的差异 

相同点：

只有在第一个导入的时候会执行源模块的代码，重复导入不会再执行

不同点：

• CommonJS 模块输出的是一个值的浅拷贝，ES6 模块输出的是值的引用。

• CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。

7.AMD

// main.js
// index.html 网页中引入require.js及main.js 
<script src="js/require.js" data-main="js/main"></script>// 首先用config()指定各模块路径和引用名
require.config({baseUrl: './src',paths: {foo: "foo", // 实际路径为./src/foobar: "bar"}
})
// 引用模块的时候，我们将模块名放在[ ]中作为requier()的第一参数
require(["foo", "bar"], function(foo) {console.log("main:", foo)
})

// foo.js
define(function() {const name = "why"const age = 18function sum(num1, num2) {return num1 + num2}return {name,age,sum}
})

// bar.js
define(["foo"], function(foo) {console.log("bar:", foo)const name = "bar"return { name }
})

define(["a", "b", "c", "d", "e", "f"], function(a, b, c, d, e, f) { // 等于在最前面声明并初始化了要用到的所有模块if (false) {// 即便没用到某个模块 b，但 b 还是提前执行了b.foo()} 
});

8.CMD

// 定义模块 math.js
define(function(require, exports, module) {var a = require('./a'); //遇到require语句时，才会执行对于模块的代码a.doSomething();if (false) {var b = require('./b'); // 该语句不会执行，所以./b对应的模块也不会执行b.doSomething();}let add = function(a,b){return a+b;}exports.add = add; // 导出add
});

// 加载模块
seajs.use(['math.js'], function(math){var sum = math.add(1+2);
});

参考：

一文了解js中导入模块import、import()和require()的区别 - 掘金 (juejin.cn)