ES模块化

参考： 1.模块化 – 李立超 | lilichao.com

​ 2.10_ES模块化规范_哔哩哔哩_bilibili

默认情况下，node中的模块化标准是CommonJS,要想使用ES的模块化，可以采用下面两种方案

  1. 使用mjs作为扩展名

  2. 修改package.json，把模块化规范设置为ES模块

    当我们设置"type:"module"，当前项目下所有的``js文件都默认为es module`

    导入es模块，不能省略扩展名mjs

案例：

文件目录

image-20230206150106982

先用mjs

module1.mjs

export let a = 10;
export let b = 20;
export const c = {
    name: "meowrain"
}

module.js

import {a,b,c} from "./module1.mjs"

console.log(a)
console.log(b)
console.log(c)

image-20230206150205555

导出

// 导出变量（命名导出）
export let name1, name2, …, nameN; 
export let name1 = …, name2 = …, …, nameN; 

// 导出函数（命名导出）
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 …; // 将其他模块中的全部内容导出（除了default）
export * as name1 from …; // ECMAScript® 2O20 将其他模块中的全部内容以指定别名导出
export { name1, name2, …, nameN } from …; // 将其他模块中的指定内容导出
export { import1 as name1, import2 as name2, …, nameN } from …; // 将其他模块中的指定内容重命名导出
export { default, … } from …;

默认导出可以随便起名，比如

export default function sum(a,b){
	return a+b;
}

我们在导入的时候就可以随便命名

import xxx from 'xxx.js'
就不需要写花括号了

引入

// 引入默认导出
import defaultExport from "module-name";

// 将所有模块导入到指定命名空间中
import * as name from "module-name";

// 引入模块中的指定内容
import { export1 } from "module-name";
import { export1 , export2 } from "module-name";

// 以指定别名引入模块中的指定内容
import { export1 as alias1 } from "module-name";
import { export1 , export2 as alias2 , [...] } from "module-name";

// 引入默认和其他内容
import defaultExport, { export1 [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";

// 引入模块
import "module-name";