如何在一个React项目中引入本地其他React项目（无需发布至公共NPM）

Hey there! I’ve dealt with this exact scenario plenty of times—you don’t need to publish your sub-projects to public NPM to use them in your main React app. There are several practical approaches, each with its own pros depending on your workflow. Let’s dive in:

1. Use npm link (Quick & Flexible for Testing) #

This is the go-to for local development when you need to iterate on sub-projects while using them in your main app.

Steps: #

• In your sub-project:
  1. Make sure your sub-project’s package.json has a valid main (or module) field pointing to your built entry file (e.g., "main": "dist/index.js").
  2. Run npm link in the sub-project’s root directory. This creates a global symlink for your package.
• In your main project:
  1. Run npm link <sub-project-package-name> (replace with the name from your sub-project’s package.json). This links the global symlink to your main project’s node_modules.

Key Notes: #

• To avoid duplicate React instances (which causes hook errors), set react and react-dom as peerDependencies in your sub-project’s package.json instead of regular dependencies:

  "peerDependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
  

• If using Webpack, you might need to add resolve.symlinks: false to your config to resolve symlinked files correctly.

2. Direct Local Paths with file: Protocol #

This is a more stable alternative to npm link for projects that live in fixed local directories. It lets you declare the dependency directly in your main project’s package.json.

Steps: #

• In your main project’s package.json, add the sub-project as a dependency using the file: protocol:

  "dependencies": {
    "my-sub-project": "file:../path/to/your/sub-project"
  }
  

• Run npm install (or yarn install/pnpm install). This creates a symlink in your main project’s node_modules pointing to the local sub-project.

Key Notes: #

• If your sub-project isn’t pre-built, you’ll need to configure your main project’s build tool (Webpack/Vite/TS) to process the sub-project’s source code. For example, add the sub-project path to your tsconfig.json’s include array:

  "include": ["src", "../path/to/sub-project/src"]
  

• Same as above, use peerDependencies for React to avoid duplication.

3. Monorepo Setup (Best for Long-Term Maintenance) #

If you plan to maintain the main project and sub-projects together long-term, a monorepo is the most scalable solution. Tools like pnpm Workspaces, Lerna, or Nx make this seamless.

Example with pnpm Workspaces: #

1. Create a root directory for all your projects, then add a pnpm-workspace.yaml file:

   packages:
     - "main-project"
     - "sub-projects/*"
   

2. In each sub-project’s package.json, add dependencies on other local projects using the workspace: protocol:

   "dependencies": {
     "another-sub-project": "workspace:*"
   }
   

3. In your main project, import components from sub-projects like any other dependency:

   import { MySubComponent } from 'my-sub-project';
   

Pros: #

• Shared dependency management (no duplicate packages across projects).
• Changes to sub-projects are reflected instantly in the main app (no need to rebuild/relink).
• Easy to version all projects together.

4. Manual Copy of Built Files (Temporary/Simple Use Cases) #

For one-off or very small sub-projects, you can just build the sub-project and copy the output to your main project.

Steps: #

1. Build your sub-project to generate a dist folder (or similar).
2. Copy the dist folder into your main project (e.g., src/external/my-sub-project).
3. Import components directly from this path:

   import { MySubComponent } from '../external/my-sub-project';
   

Caveat: #

This is manual and not ideal for ongoing development—you’ll have to re-copy files every time you update the sub-project.

General Tips for All Approaches #

• TypeScript Support: If using TS, enable declaration: true in your sub-project’s tsconfig.json to generate type definitions (*.d.ts files) so your main project can recognize types.
• Hot Reload: Make sure your build tool is set up to watch for changes in sub-projects (monorepos handle this automatically; for npm link/file: paths, you may need to run a dev server in the sub-project).

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