npm 包 esm-refactor 使用教程

ESM（ES Modules）是 ECMAScript 模块标准，是 Web 前端开发领域的一大进步。但是在实际开发中，ESM 的使用时常遇到一些问题，例如跨模块引用、文件路径问题等。针对这些问题，有一款 npm 包 esm-refactor 可以提供帮助，本文将详细介绍 esm-refactor 的使用方法。

安装

安装 esm-refactor 可以使用 npm：

npm install esm-refactor

用途

esm-refactor 的用途有以下几点：

• 将 Node.js CommonJS（require 和 module.exports）模块转换为 ES6 模块；
• 支持多模块的 ESM 应用程序；
• 自动将导出名称从 CommonJS 转换为 ESM；
• 支持类型变换，将 TypeScript 转换为 ESM。

示例

下面以将 Node.js 的模块转换为 ESM 为例进行示范。

在项目的根目录下新建一个名为 cjs 的文件夹，并在其中创建一个名为 index.js 的文件，输入以下代码：

const name = 'World';
exports.sayHello = function() {
  console.log(`Hello, ${name}!`);
}

该模块的功能为输出 "Hello, World!"。

然后，我们在项目根目录下创建一个名为 index.js 的文件，输入以下代码：

import { sayHello } from './cjs';

sayHello();

这里使用了相对路径引入 sayHello 函数。当我们运行时，会发现如下错误：

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/xxx/cjs/index.js from /Users/xxx/index.js not supported.
Instead change the require of cjs/index.js in /Users/xxx/index.js to a dynamic import() which is available in all CommonJS modules.

这是因为所使用的 import 语句是 ESM 的特性，但是 sayHello 模块并不支持 ESM。这时，我们可以使用 esm-refactor 来进行转换。

首先，在项目根目录下创建一个名为 .esm.js 的文件，输入以下代码：

// .esm.js
const esmRefactor = require('esm-refactor');
const refactor = new esmRefactor();

// 将 'cjs/index' 转化为 ESM 并输出为 'esm/index'
refactor.transform('cjs/index', 'esm/index')
	.then(() => console.log('Complete!'))
	.catch((error) => console.error(error));

执行这段代码后，我们可以在项目根目录的 esm 文件夹下找到和 cjs 文件夹一模一样的文件夹，文件夹中的文件已经转换为 ESM，其中 esm 文件夹下的 index.js 文件内容为：

const name = 'World';

export function sayHello() {
  console.log(`Hello, ${name}!`);
}

这时，在项目根目录下的 index.js 文件中，我们引入 sayHello 时可以直接使用 ESM 语法：

import { sayHello } from './esm';

sayHello();

这样，我们就可以顺利地运行该项目了。

总结

本文介绍了 npm 包 esm-refactor 的使用方法，并通过示例代码演示了如何将 Node.js 的模块转换为 ESM。ESM 在前端开发中越来越重要，通过学习 esm-refactor 的使用，可以提高前端开发的效率和代码质量。

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