如何实现NPM模块对各类JS客户端应用的导入兼容性？

我明白你想要打造一个能在所有JS客户端环境（React、Angular、Vue、纯浏览器JS）里无缝运行的NPM模块，这个需求非常普遍，咱们可以用**UMD（Universal Module Definition）**格式来解决兼容性问题——它是一种通用的模块定义规范，能同时适配ES6模块、CommonJS（Node.js/打包工具）和纯浏览器全局环境。

手动实现UMD格式 #

首先，先写好你的核心功能对象（就是那些纯JS函数的集合），然后用UMD的包裹代码来适配不同环境：

// 你的核心功能模块
const myUtilityModule = {
  greet: (name) => `Hello, ${name}!`,
  calculateSum: (a, b) => a + b,
  // 其他你的函数...
};

// UMD包裹逻辑
(function (root, factory) {
  // 适配AMD环境（比如RequireJS）
  if (typeof define === 'function' && define.amd) {
    define([], factory);
  }
  // 适配CommonJS环境（Node.js、Webpack、Rollup等）
  else if (typeof module === 'object' && module.exports) {
    module.exports = factory();
  }
  // 适配纯浏览器全局环境
  else {
    root.myUtilityModule = factory();
  }
}(typeof self !== 'undefined' ? self : this, function () {
  // 返回核心模块对象
  return myUtilityModule;
}));

各环境使用示例 #

• 纯浏览器环境：直接通过script标签引入后，模块会挂载到window全局对象上

<script src="your-module.js"></script>
<script>
  console.log(myUtilityModule.greet('Alice')); // 输出 "Hello, Alice!"
</script>

• ES6模块环境（React/Vue/Angular现代项目）：用import导入

import myUtilityModule from 'your-module';
console.log(myUtilityModule.calculateSum(2, 3)); // 输出 5

• CommonJS环境（Node.js或旧版打包工具）：用require导入

const myUtilityModule = require('your-module');
console.log(myUtilityModule.greet('Bob')); // 输出 "Hello, Bob!"

优化package.json配置 #

为了让打包工具和包管理器更好识别你的模块，建议在package.json里添加这些字段：

{
  "name": "your-module-name",
  "main": "dist/your-module.umd.js", // UMD版本，适配CommonJS和浏览器
  "module": "dist/your-module.esm.js", // ES6模块版本，支持tree-shaking
  "browser": "dist/your-module.umd.js", // 浏览器环境优先加载的版本
  "version": "1.0.0"
}

用打包工具自动生成UMD（推荐） #

如果你的项目用Rollup、Webpack这类打包工具，可以直接配置输出UMD格式，不用手动写UMD模板，更省心：
比如Rollup的配置示例：

// rollup.config.js
export default {
  input: 'src/index.js', // 你的源码入口文件
  output: [
    {
      file: 'dist/your-module.umd.js',
      format: 'umd',
      name: 'myUtilityModule' // 浏览器全局环境的变量名
    },
    {
      file: 'dist/your-module.esm.js',
      format: 'es' // ES6模块版本
    }
  ]
};

这样打包后，你就得到了两个版本的文件，分别适配不同环境，用户导入的时候完全不需要关心环境差异，你的模块就能正常工作啦！

内容的提问来源于stack exchange，提问作者Tnargib