"本文详细介绍了ESModule在浏览器和Node环境中的使用，包括在HTML中通过`<script type="module">`引入模块和在Node中通过`package.json`配置启用。ESModule提供了具名导出和默认导出两种方式，并展示了多种导入方法。示例代码演示了如何导出和导入模块内容，强调了不能混用模块规范。"
ES Module是官方推出的标准，它支持的环境可以是浏览器，也可以是node
在浏览器环境中使用时，应该在script标签上添加type属性为module
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!-- index.js作为启动模块 -->
<script src="index.js" type="module"></script>
</body>
</html>
在node环境中使用时，应该新建一个package.json文件，在文件中写上"type": “module”，链接地址https://blog.csdn.net/sinat_36521655/article/details/109863364；
另外 Node.js默认使用CommonJS规范, 统一使用module.exports的方式导出导入 使用require()的方式导入; 如果非要使用ES6 import方式, 需要在package.json添加"type":“module”, 且整个当前环境只能选择一种规范, 不能混用。
一、ES Module分为两种导出方式：
1. 具名导出（普通导出），可以导出多个
2. 默认导出，只能导出一个
export const a = 1; // 具名，常用
export function b() {} // 具名，常用
export const c = () => {} // 具名，常用
const d = 2;
export { d } // 具名
const k = 10
export { k as temp } // 具名
// export default 3 // 默认，常用
// export default function() {} // 默认，常用
// const e = 4;
// export { e as default } // 默认
const f = 4, g = 5, h = 6
export { f, g, h as default} // 基本 + 默认
// 以上代码将导出下面的对象
/*
{
a: 1,
b: fn,
c: fn,
d: 2,
temp: 10,
f: 4,
g: 5,
default: 6
}
*/
二、ES Module导入方式(模块路径一定要加后缀.js)：
// 仅运行一次该模块，不导入任何内容
import "模块路径"
// 常用，导入属性 a、b，放到变量a、b中。a --> a, b --> b
import { a, b } from "模块路径"
// 常用，导入属性 default，放入变量c中。default --> c
import c from "模块路径"
// 常用，default->c，a->a, b->b
import c, { a, b } from "模块路径"
// 常用，将模块对象放入到变量obj中
import * as obj from "模块路径"
// 导入属性a、b，放到变量temp1、temp2 中
import {a as temp1, b as temp2} from "模块路径"
// 导入属性default，放入变量a中，default是关键字，不能作为变量名，必须定义别名
import {default as a} from "模块路径"
//导入属性default、b，放入变量a、b中
import {default as a, b} from "模块路径"
// 以上均为静态导入
import("模块路径") // 动态导入，返回一个Promise，完成时的数据为模块对象
三、示例
用ESM模块导出如下对象
{
a: 1,
b: 2,
c: function() {},
default: {
d: 1,
e: 2
}
}
// ESModule/demo.js
export const a = 1;
const b = 2;
export { b }; // export b是错误的写法，程序会把b当做变量来运行
export function c() {
console.log("ccc");
}
export default {
d: 1,
e: 2,
};
用ESM模块仅导入ESModule/demo.js里的代码
1. 仅导入default
// ESModule/index.js
import obj from "./demo.js";
console.log(obj); // { d: 1, e: 2 }
2. 仅导入a和b
// ESModule/index.js
import { a, b } from "./demo.js";
console.log(a); // 1
console.log(b); // 2
3. 同时导入default、a、b
// ESModule/index.js
import obj, { a, b } from "./demo.js";
console.log(obj); // { d: 1, e: 2 }
console.log(a); // 1
console.log(b); // 2
4. 导入整个模块对象
// ESModule/index.js
import * as all from "./demo.js";
console.log(all);
// [Module: null prototype] {
// a: 1,
// b: 2,
// c: [Function: c],
// default: { d: 1, e: 2 }
// }
5. 不导入任何东西，仅运行一次该模块
// ESModule/index.js
import "./demo.js";
扫一扫
2785
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
