谷粒商城实战笔记-34-前端基础-ES6-promise异步编排

每个 js 文件都是一个模块，默认采用的 CommonJS 模块规范

加载模式

• CommonJS 是同步的， 在加载模块之前，代码会停止执行。
• ES6 模块是异步的，代码可以继续执行，而模块将在稍后加载。

执行模式

CommonJS 和 ES6 模块的执行都是单例的：模块只会被加载一次，并且所有对模块的引用都将指向同一个实例。

依赖关系

• CommonJS 是静态的， 模块的依赖关系在编译时确定。
• ES6 模块是动态的，模块的依赖关系在运行时确定

树形摇晃

一种优化技术，用于从 JavaScript 捆绑包中删除未使用的代码。

• CommonJS 不支持树形摇晃，模块中未使用的代码也会被加载。
• ES6 模块化支持树形摇晃，可以自动删除未使用的代码，从而减小包的大小。

1. 在 package.json 文件中设置 "type": "module"，这样 Node.js 就会将所有 .js 文件视为 ES6 模块。
2. 将文件扩展名改为 .mjs，这样 Node.js 会自动将其视为 ES6 模块。
3. 在 script 标签中添加 type="module" 属性

默认导出导入 export default

每个模块默认的导出只能有一个

let a = 1
// 默认导出 a
export default a

// 导入默认时，可以命其他名称
import b from './demo.js'

console.log(b)

可以直接使用函数表达式/匿名函数作为默认导出

export default function myFunc() {}

export default function() {}。

导出导入多项 export { }

let a = 1
let b = 2

export { a, b }

// 导入多项时，必须与导出名对应
import { a, b } from './demo.js'

console.log(a, b)

导出时重命名 as

let a = 1
let b = 2

export { a as c, b as d }

// 导入时，只能导入新的名称
import { c, d } from './demo.js'

console.log(c, d)

导出其他模块指定项

export { name1, name2, ... } from 'module-name'

导入模块导出的所有内容 import *

export let a = 1;
export let b = 2;

// 通过 as 重命名为一个变量（值为对象）
import * as myModule from "./demo.mjs";

console.log(myModule.a);
console.log(myModule.b);

导入时重命名 as

import {trunc as StringLib} from "../lib/string.js"
import {trunc as MathLib} from "../lib/math.js"

导入 json 格式的文件

import pkg from "./package.json" assert { type: "json" };

const { default: jsonObject } = await import('./file.json', {
  assert: {
    type: 'json'
  }
});

导入 CommonJS 模块

import * as 自定义名称  from '模块名称'

• 每个模块内有一个 module 对象，其有属性 exports（属性值也是一个对象）
• 通过 require() 导入时，会获取到导出模块中 module 对象的 exports 属性
• 在同一个模块中，不要混用 exports 和 module.exports 来导出不同的内容，因为这会导致混淆和不可预期的行为。

导出导入单项 module.exports

导出

module.exports = "朝阳";

导入

const demoModule = require("./demo.js");

console.log(demoModule); // 朝阳

导出导入多项 exports

导出

exports.a = 1;
exports.b = 2;

导入

const demoModule = require("./demo.js");

console.log(demoModule); // { a: 1, b: 2 }