如何让一个npm包 同时支持浏览器和node端呢？

Question

我想做这样的一个utils包，
它同时支持浏览器和node使用

目前是这样做的
src/
common/**
browser/**
node/**
index_ browser.js
index_node.js

用rollup分别打包上面两个js文件
并且将打包出来的两个文件
在package.json中分别指为 main和module入口
这样代码可以正常运行

问题就是package.json 的 types只支持字符串，如果写了browser目录下代码的d.ts文件，在node端用的时候，类型就报错了

这种情况该怎么处理呢

Answer 1

一个包能不能同时支持双端，主要看你用到哪些 API。如果你用到 window，那肯定不能在 node.js 里跑；反之，如果你用到 fs、child_process，那肯定不能在浏览器里跑。除非你自己想办法 polyfill。

如果都没有的话，那就是同时支持。

至于 package.json 里的 types，我不知道你指什么，包类型只有 type，必须是 module 或者 commonjs，不能乱写。具体请参考 官方文档。

Answer 2

要使 npm 包同时适配 commonJS 和 esModule，可以在 package.json 的 "main" 字段中指定 commonJS 版本的入口文件，同时在 "module" 字段中指定 esModule 版本的入口文件。

例如：

{
  "name": "my-package",
  "main": "dist/cjs/index.js",
  "module": "dist/esm/index.js"
} 

在这种情况下，使用 commonJS 语法的项目会使用 "dist/cjs/index.js" 作为入口文件，而使用 esModule 语法的项目会使用 "dist/esm/index.js" 作为入口文件。另外，你还可以在 npm 包的代码中使用 "package.json" 的 "type" 字段来动态判断当前环境是 commonJS 还是 esModule。
例如：

if (process.env.PACKAGE_TYPE === "commonjs") {
  module.exports = require("./cjs");
} else {
  export * from "./esm";
} 

这样，你就可以在一个文件中同时支持 commonJS 和 esModule 了。

Answer 3

建议阅读nodejs文档: https://nodejs.org/docs/latest-v18.x/api/packages.html

1. 子路径导出模式 utils/node、 utils/browser ： https://nodejs.org/docs/latest-v18.x/api/packages.html#packag...
2. 条件导出： https://nodejs.org/docs/latest-v18.x/api/packages.html#condit...