JS模块化导入导出

CommonJS

CommonJS是NodeJs服务器端模块的规范，根据这个规范，每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。CommonJS规范规定，每个模块内部，module变量代表当前模块。这个变量是一个对象，它的exports属性是对外的接口。加载某个模块，其实是加载该模块exports属性。总之，CommonJS规范通过require导入，module.exports与exports进行导出。

// 1.js 导出 
var a = 1; 
var b = function() { 
    console.log(a); 
 } 
module.exports = { 
    a: a,
    b: b 
 }
 /* 
 // 当导出的模块名与被导出的成员或方法重名时可以有如下写法 
 module.exports = { 
      a,
      b
  } 
 */
 
 // 2.js 导入
 var m1 = require("./1.js") 
 console.log(m1.a); // 1 
 m1.b(); // 1

ES6

ES6在语言标准的层面上实现了模块的功能，是为了成为浏览器和服务器通用的模块解决方案，ES6标准使用export与export default来导出模块，使用import导入模块。此外在浏览器环境中是可以使用require来导入export、export default导出的模块的，但依然建议使用import标准导入模块。
export、export default主要有以下区别：

• export能按需导入，export default不行。
• export可以有多个，export default仅有一个。
• export能直接导出变量表达式，export default不行。
• export方式导出，在导入时要加{}，export default则不需要。

// 导出单个特性 
export let name1, name2, …, nameN; // also var, const 
export let name1 = …, name2 = …, …, nameN; // also var, const 
export function FunctionName(){...} 
export class ClassName {...} 

// 导出列表 
export { name1, name2, …, nameN }; 

// 重命名导出 
export { variable1 as name1, variable2 as name2, …, nameN };

// 解构导出并重命名 
export const { name1, name2: bar } = o; 

// 默认导出 
export default expression; 
export default function (…) { … } // also class, function*
export default function name1(…) { … } // also class, function*
export { name1 as default, … }; 

// 导出模块合集 
export * from …; // does not set the default export 
export * as name1 from …; // Draft ECMAScript® 2O21 
export { name1, name2, …, nameN } from …; 
export { import1 as name1, import2 as name2, …, nameN } from …; 
export { default } from …;

// 导入
// name－从将要导入模块中收到的导出值的名称 
// member, memberN－从导出模块，导入指定名称的多个成员 
// defaultMember－从导出模块，导入默认导出成员 
// alias, aliasN－别名，对指定导入成员进行的重命名 
// module-name－要导入的模块。是一个文件名 
// as－重命名导入成员名称（“标识符”） 
// from－从已经存在的模块、脚本文件等导入 
import defaultMember from "module-name"; 
import * as name from "module-name"; 
import { member } from "module-name"; 
import { member as alias } from "module-name"; 
import { member1 , member2 } from "module-name"; 
import { member1 , member2 as alias2 , [...] } from "module-name"; 
import defaultMember, { member [ , [...] ] } from "module-name"; 
import defaultMember, * as name from "module-name"; 
import "module-name"; // 将运行模块中的全局代码, 但实际上不导入任何值。