如何处理React和Express应用共同引用的使用import的TS公共库？

方案1：让Express原生支持ES模块 #

• 给Express项目的package.json添加配置 "type": "module"，Node 14.13.0及以上版本会默认将项目内的.js文件识别为ES模块，直接支持import语法，无需额外将import转译为require。
• 公共TS包无需再用Babel额外输出CommonJS格式的lib目录，仅保留tsc编译出的tscompiled产物即可。
• 若Express项目中仍有需使用require的场景，可将对应文件后缀改为.cjs，或者使用module.createRequire API手动创建require方法。

方案2：配置包入口自动适配不同环境 #

无需手动修改main字段，通过package.json的标准字段让不同环境自动匹配对应入口：

高兼容性写法

{
  "main": "./lib/index.js",
  "module": "./tscompiled/index.js",
  "types": "./tscompiled/index.d.ts"
}

CRA内置的Webpack等前端打包工具会优先读取module字段指向的ES模块入口，Node环境默认读取main字段指向的CommonJS入口，类型定义也可以统一指向tscompiled目录的.d.ts文件。

更规范的条件导出写法

如果不需要兼容Node 12及以下版本，可以用exports字段做更精准的控制：

{
  "exports": {
    "types": "./tscompiled/index.d.ts",
    "import": "./tscompiled/index.js",
    "require": "./lib/index.js"
  },
  "types": "./tscompiled/index.d.ts"
}

方案3：monorepo内实时转译公共包，无需预编译 #

如果使用pnpm/yarn/npm workspace管理monorepo，可以修改下游项目的转译配置，直接引入公共包的TS源码，不用提前编译出产物：

• React项目：使用craco或react-app-rewired修改CRA的Webpack配置，将公共TS包的src目录加入Babel转译范围。
• Express项目：开发阶段用ts-node或babel-node直接运行源码，自动转译依赖的公共TS包，无需预编译。

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