一文搞定：跨运行时的 JavaScript 包创建与发布指南

2023-08-23 07:46:50

跨越疆界：打造双模式、跨运行时 JavaScript 包的指南

在 JavaScript 开发的广阔世界里，跨运行时 JavaScript 包 犹如一颗璀璨的明珠，吸引着无数开发者的目光。想象一下，你的 JavaScript 代码可以在不同的运行时环境中无缝运行，无论是在 Node.js、Deno 还是浏览器中，都能如鱼得水。这岂不是程序员梦寐以求的境界？

而双模式 的概念更进一步，它意味着你的 JavaScript 包可以同时兼容 ESM（ECMAScript 模块）和 CommonJS 这两种模块化规范。这意味着，无论项目采用哪种模块化方式，你都可以轻松地将你的 JavaScript 包引入其中。

双模式之路：开启跨运行时的第一步

踏上双模式之旅，你需要两个好帮手：Babel 和 Rollup 。

Babel：代码转换大师

Babel 是一款神奇的工具，可以将你的 JavaScript 代码转换成兼容各种运行时的代码。它就像一个翻译器，将你的代码翻译成不同环境都能理解的语言。在你的项目中引入 Babel，并将其配置为同时支持 ESM 和 CommonJS 模块化规范。

Rollup：打包专家

Rollup 是一款打包工具，可以将你的 JavaScript 代码打包成一个可供浏览器或 Node.js 使用的单一文件。有了 Rollup，你可以轻松地创建出同时兼容 ESM 和 CommonJS 模块化规范的 JavaScript 包。

// 使用 Rollup 打包 JavaScript 代码
import { rollup } from 'rollup';

const inputOptions = {
  input: 'src/index.js',
  external: ['lodash'],
};
const outputOptions = {
  file: 'dist/index.js',
  format: 'cjs',
};

const bundle = await rollup(inputOptions);
await bundle.write(outputOptions);

跨越运行时的藩篱：让你的代码兼容无忧

不同的运行时环境可能存在不同的特性，为了让你的 JavaScript 代码在所有环境中都能正常运行，你需要一些特殊的技巧：

Polyfills：填补特性差异

Polyfills 就像代码中的万金油，可以填补不同运行时环境中的特性差异。例如，你可以在 Node.js 中使用 Polyfills 来模拟浏览器的某些特性。

// 使用 Polyfill 填充浏览器的 fetch API
if (!window.fetch) {
  window.fetch = require('node-fetch');
}

兼容性测试：确保跨运行时的稳定性

在发布你的 JavaScript 包之前，一定要进行兼容性测试，以确保你的代码在所有目标运行时环境中都能正常运行。Jest 或 Mocha 等测试框架可以帮你完成这项任务。

// 使用 Jest 进行兼容性测试
it('should work in Node.js', () => {
  const result = require('../dist/index.js').default;
  expect(result).toBe('Hello, Node.js!');
});

it('should work in the browser', () => {
  const result = window.default;
  expect(result).toBe('Hello, Browser!');
});