多ReactJS项目下可复用组件存储位置咨询（非npm/非node_modules方案）

嘿，这个场景我太有共鸣了！之前我也在多个React项目里反复复制粘贴可复用组件，不仅麻烦还容易出现版本不一致的问题，正好有几个完美匹配你需求的方案——不用发布到npm，也不会把组件混进项目的node_modules，还能统一管理所有组件：

这是我最早用的方法，操作简单，完全满足“一处修改、所有项目同步”的需求：

• 先在所有项目的同级目录下，新建一个独立的组件库文件夹，比如叫shared-components，把你的A.jsx和其他可复用组件都放进去：

  shared-components/
    src/
      A.jsx
      Button.jsx
      // 其他组件...
  project1/
  project2/
  

• 然后给每个React项目配置路径别名，这样就能像引用第三方包一样调用组件：
  • 如果用的是Create React App（没eject过）：先装craco（用来覆盖默认webpack配置），然后在项目根目录新建craco.config.js，添加别名配置：

    const path = require('path');
    
    module.exports = {
      webpack: {
        alias: {
          // 把@shared指向组件库的src目录
          '@shared': path.resolve(__dirname, '../shared-components/src')
        }
      }
    };
    

    之后在项目里就能这么引用：import A from '@shared/A.jsx';
  • 如果是自定义webpack配置：直接在webpack.config.js的resolve.alias里加同样的配置即可。

这个方案的好处是组件库完全独立，修改一次所有项目都能实时拿到最新版本，不用做任何额外的同步操作。

如果你希望组件库有自己的版本迭代记录，或者不同项目可以选择不同版本的组件，Git子模块是个不错的选择：

• 先把shared-components做成一个独立的Git仓库（本地仓库就行，不用推到公开平台）。
• 然后在每个项目里添加子模块：

  git submodule add ../shared-components ./src/shared-components
  

  这样项目里的src/shared-components就会和你的组件库仓库关联起来。
• 当组件库有更新时，在项目里执行以下命令拉取最新版本：

  git submodule update --remote
  

• 引用的时候直接用相对路径（或者配别名更方便）：import A from './shared-components/A.jsx';

这个方案适合组件库需要独立迭代的场景，每个项目可以灵活选择拉取特定版本的组件。

如果你的项目都是相关联的，打算长期统一维护，用Monorepo的方式管理会更高效：

• 把所有项目和组件库放到一个根目录下，结构如下：

  my-monorepo/
    package.json
    shared-components/
      package.json
      src/
        A.jsx
    project1/
      package.json
      src/
        index.js
    project2/
      package.json
      src/
        index.js
  

• 在根目录的package.json里启用Workspaces：

  {
    "private": true,
    "workspaces": [
      "shared-components",
      "project1",
      "project2"
    ]
  }
  

• 给shared-components的package.json设置一个内部包名（比如@my/shared-components），然后在每个项目的package.json里添加依赖：

  "dependencies": {
    "@my/shared-components": "workspace:*"
  }
  

• 之后在项目里就能直接引用组件：import A from '@my/shared-components/A.jsx';

这个方案的优势是可以统一管理所有项目和组件库的依赖，组件库的修改会实时同步到各个项目，还能方便地在组件库和项目之间共享代码，适合长期维护多个相关项目的场景。

你可以根据自己的实际需求选择合适的方案——如果只是简单统一管理，方案1最快上手；需要版本控制选方案2；长期维护多个项目的话，方案3会更省心。

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