NPM 包 ESM 使用教程

什么是 ESM？

ESM 是指 ECMAScript 模块，它是一种用于 JavaScript 模块化的标准。在早期的前端开发中，我们使用 CommonJS 或 AMD 来实现模块化开发。但随着 ES6 的推出，原生的 ESM 已成为了前端开发中一种普遍的模块化方案。

为什么要使用 ESM？

相对于以前的模块化方案，ESM 有以下优点：

• 原生支持动态导入，可以异步加载模块
• ESM 对静态分析友好，可以更好地进行 Tree Shaking
• 在 Node.js 中支持 ESM 可以提高代码执行效率

如何在 NPM 包中使用 ESM？

1. 首先，在 package.json 中添加 "type" 字段，指定包类型为 module。这使得包管理器知道你的包是一个 ESM 包。

{
  "name": "my-package",
  "type": "module"
}

1. 在你的代码中使用 import/export 语法而不是 require/module.exports。如下所示：

// esm-demo.js
export function add(a, b) {
  return a + b;
}

// main.js
import { add } from 'esm-demo';
console.log(add(1, 2)); // 输出：3

1. 如果你需要在 Node.js 中使用 ESM，那么你需要在运行 Node.js 时添加 --experimental-modules 参数。例如：

node --experimental-modules main.js

注意：目前，Node.js 中仍然存在某些模块化相关的问题，使用 ESM 仍然需要小心谨慎。

如何发布一个 ESM 包？

1. 首先，在 package.json 中添加 "type" 字段，指定包类型为 module。

2. 然后，在你的代码中使用 import/export 语法而不是 require/module.exports。

3. 在你的项目中安装 es-dev-server 和 rollup：

npm install --save-dev es-dev-server rollup

1. 创建一个名为 rollup.config.js 的文件，并配置它：

// rollup.config.js
export default {
  input: 'src/index.js', // 入口文件
  output: {
    file: 'dist/index.js', // 输出文件路径
    format: 'esm' // 输出格式
  },
};

1. 在 package.json 中添加以下脚本，以便于打包和启动本地服务器：

{
  "scripts": {
    "start": "es-dev-server --node-resolve --watch",
    "build": "rollup -c"
  }
}

1. 运行 npm run build 打包代码，此时你的 ESM 包就已经构建好了。你可以在 dist 目录下找到你的包。

总结

ESM 是前端开发中一种普遍的模块化方案，支持动态导入，对静态分析友好，可以提高代码执行效率。在 NPM 包中使用 ESM 需要指定包类型为 module，并使用 import/export 语法。如果你需要发布一个 ESM 包，可以使用 es-dev-server 和 rollup 进行打包和构建。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/51643