是否可将npm包拆分为可独立安装的可互换子模块？

你需要的拆分效果完全可以实现，目前有两种成熟的落地方案可选：

方案1：Monorepo多包结构（推荐，支持子包单独安装） #

这个方案适合需要子包独立版本管理、单独发布、单独安装的场景，最终可实现仅拉取对应子包和必要公共代码的需求：

• 首先搭建如下目录结构：

shapes/
├── package.json # 主包配置，执行 `npm install shapes` 时安装的就是这个包
├── packages/
│   ├── shared/ # 公共框架代码，所有子包共用的基础逻辑都放在这里
│   │   └── package.json
│   ├── square/ # square 专属子包，仅依赖 shared 包，不依赖其他子包
│   │   └── package.json
│   └── circle/ # circle 专属子包，同理仅依赖 shared 包
│       └── package.json

• 在根包的package.json中配置workspaces字段，指定子包所在路径，支持npm/yarn/pnpm所有主流包管理工具：

{
  "name": "shapes",
  "workspaces": ["./packages/*"]
}

• 每个子包的package.json中仅声明对shared公共包的依赖，不需要引入其他无关子包，安装时只会拉取当前子包和公共依赖的代码，不会加载其他冗余内容
• 如果你需要实现类似npm install shapes/square的安装格式，可以将所有子包发布在名为shapes的npm组织下，最终安装命令为npm install @shapes/square，如果需要严格匹配shapes/square的写法，可以在项目中配置依赖别名实现映射。

方案2：子路径导出（轻量方案，无需单独发布子包） #

如果你的子包不需要独立版本管理和单独发布，只是希望用户可以按需引入子模块、不加载冗余代码，可以直接使用npm 7+原生支持的子路径导出能力：

• 只需在主包的package.json中添加exports字段配置子路径映射：

{
  "name": "shapes",
  "main": "./index.js",
  "exports": {
    ".": "./index.js",
    "./square": "./packages/square/index.js",
    "./circle": "./packages/circle/index.js"
  }
}

• 该方案下用户只需执行一次npm install shapes安装主包，就可以直接导入对应子模块：import Square from 'shapes/square'，现代构建工具会自动执行tree-shaking，剔除所有未使用的子模块代码，不会引入冗余内容。

注意事项 #

• 选择Monorepo方案时推荐使用pnpm作为包管理工具，对多包依赖的处理更高效，也能避免很多幽灵依赖问题
• 公共框架代码包的版本要做好统一管理，避免不同子包依赖的公共代码版本不一致出现兼容性问题
• 配置子路径导出时要同时兼容CommonJS和ESModule两种模块规范，适配不同场景的用户使用需求

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