JavaScript 模块化

ES6 模块规范（ESM）

单个导出

// 导出
export let name1 = 'zhangsan';
export let name2 = 'lisi';

// 导入
import { name1, name2 } from './test.js';

批量导出

// 导出
let name1 = 'zhangsan';
let name2 = 'lisi';
let name3 = 'wangwu';
export { name1, name2, name3 };

// 导入
import { name1, name2, name3 } from './test.js';

别名导出与整体导入

导出时可以用 as 重命名，导入时用 * as 整体引入：

// 导出时取别名
let name1 = 'zhangsan';
let name2 = 'lisi';
let name3 = 'wangwu';
export { name1 as n1, name2 as n2, name3 as n3 };

// 导入全部（通过命名空间对象访问）
import * as name from './test.js';
console.log(name.n1); // 'zhangsan'
console.log(name.n2); // 'lisi'

默认导出

一个模块只能有一个默认导出，导入时可以使用任意名称：

// 导出（函数）
export default function () {
  console.log('默认导出');
}

// 导入
import func from './test.mjs';
func();

// 导出（对象）
export default {
  func() {
    console.log('默认导出');
  },
  name: 'zhangsan',
  age: 22,
};

// 导入
import obj from './a.mjs';

obj.func();
console.log(obj.name);
console.log(obj.age);

CommonJS 规范（CJS）

CommonJS 是 Node.js 默认的模块规范，使用 module.exports 导出、require 导入：

// 导出
module.exports.name = 'zhangsan';
module.exports.age = 18;
module.exports.func = function () {
  console.log('CommonJS 规范');
};

// 导入（对象形式）
const obj = require('./a');
console.log(obj.name);
console.log(obj.age);
obj.func();

// 导入（解构形式）
const { name, age, func } = require('./a');
console.log(name);
console.log(age);
func();