es-module-devserver 是一个能够帮助前端项目实现开发阶段中 ES modules (ESM) 模块导入和导出的 npm 包。通过使用 es-module-devserver，前端开发者可以简便地进行模块化开发和测试。
安装
使用 npm 命令进行安装：
npm install es-module-devserver
使用方法
以下为 es-module-devserver 的使用流程：
启动服务器
在命令行中输入以下命令即可启动服务器：
npx es-module-devserver
此时，服务器会默认启动在 8080 端口，如果该端口已被占用，可使用 -p 参数将其调整到其他可用端口，例如：
npx es-module-devserver -p 3000
创建页面
在项目的 HTML 网页文件中，添加以下内容：
<script type="module" src="http://localhost:8080/path/to/your/script.js"></script>
其中，path/to/your/script.js 是你要使用的脚本的路径。
编写代码
在脚本文件中，通过 ESM 进行导入和导出。例如：
// 导入模块
import { foo } from './path/to/your/module.js';
// 导出模块
export const bar = foo + 1;运行
运行脚本文件所在的网页，然后在浏览器控制台中查看导入和导出的模块是否成功。
示例代码
以下是一个简单的示例代码：
index.html
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- -------------------------- ------------ ------- ------ ----------------------- --------- ------- ------------- ---------------------------------------------- ------- -------
index.js
import { getData } from './api.js';
(async function() {
const data = await getData();
console.log(data);
})();api.js
const BASE_URL = 'https://jsonplaceholder.typicode.com';
export async function getData() {
const response = await fetch(`${BASE_URL}/todos/1`);
const data = await response.json();
return data;
}在该示例代码中，index.js 中导入了一个外部的模块 getData ，它是在 api.js 中导出的函数。运行该示例可以从 jsonplaceholder API 请求数据并在浏览器控制台中输出。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f88238a385564ab6d40