ES6和node的模块化

Posted 2021-03-08 kgwei520blog

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

// CommonJS模块

let { stat, exists, readFile } = require(‘fs‘); // 等同于 let _fs = require(‘fs‘); let stat = _fs.stat; let exists = _fs.exists; let readfile = _fs.readfile;

上面代码的实质是整体加载fs模块（即加载fs的所有方法），生成一个对象（_fs），然后再从这个对象上面读取 3 个方法。这种加载称为“运行时加载”，因为只有运行时才能得到这个对象，导致完全没办法在编译时做“静态优化”。

// ES6模块 import { stat, exists, readFile } from ‘fs‘;

上面代码的实质是从fs模块加载 3 个方法，其他方法不加载。这种加载称为“编译时加载”或者静态加载，即 ES6 可以在编译时就完成模块加载，效率要比 CommonJS 模块的加载方式高。当然，这也导致了没法引用 ES6 模块本身，因为它不是对象。

 CommonJS 加载的是一个对象（即module.exports属性），该对象只有在脚本运行完才会生成。而 ES6 模块不是对象，它的对外接口只是一种静态定义，在代码静态解析阶段就会生成。

差异：

CommonJS 模块输出的是值的拷贝，也就是说，一旦输出一个值，模块内部的变化就影响不到这个值；

ES6 模块的运行机制与 CommonJS 不一样。JS 引擎对脚本静态分析的时候，遇到模块加载命令import，就会生成一个只读引用。等到脚本真正执行时，再根据这个只读引用，到被加载的那个模块里面去取值。原始值变了，import加载的值也会跟着变。

　　

 

//es6
第一种方式
// test.js
export  function fc(){
	console.log(‘fc‘);
}
export  function fd(){
	console.log(‘fd‘);
}

// 引用模块 也可以用 as 重新命名;
import {fa,fb} from ‘./modules/test.js‘;
import {fa as myname,fb} from ‘./modules/test.js‘; 
// 也可以用*号作为整体加载;
import * as mymodule from ‘./modules/test3.js‘

// 第二种 test2.js
function t3(){
	console.log(‘t3‘);
}
function t4(){
	console.log(‘t4‘);
}
let obj = { t2,t3,t4 };

export default obj // 一个模块中 export default 只能用一次; 也可以用于具名函数;
// 自己定义一个名字来接收
import mod from ‘./modules/test2.js‘;