基于Create React App构建多应用可行性及实现方案问询

Absolutely! You can absolutely run multiple small React applications within a single create-react-app (CRA) project—this is a smart way to avoid redundant node_modules folders (which can easily take hundreds of MB each) and share common code/components across your apps. Here's how to pull this off:

Key Overview #

You won't need a special template, but you will need to tweak your project structure and adjust the underlying Webpack configuration (don't worry, you don't have to eject CRA to do this).

Step 1: Initialize a Single CRA Project #

Start by creating one base CRA project—this will be your shared workspace:

npx create-react-app multi-app-workspace
cd multi-app-workspace

Step 2: Restructure Your Project #

Organize your source code to separate each small app, plus shared assets/components. A typical structure might look like this:

src/
├── apps/
│   ├── dashboard/
│   │   ├── App.js
│   │   ├── index.js
│   │   └── DashboardStyles.css
│   ├── todo-app/
│   │   ├── App.js
│   │   ├── index.js
│   │   └── TodoStyles.css
│   └── profile/
│       ├── App.js
│       ├── index.js
│       └── ProfileStyles.css
├── shared/
│   ├── components/
│   │   ├── Button.js
│   │   └── Navbar.js
│   ├── styles/
│   │   └── global.css
│   └── utils/
│       └── apiHelpers.js
└── index.js  # We'll replace this with app-specific entries later

Step 3: Adjust Webpack Configuration (Without Ejecting) #

CRA hides its Webpack config by default, but we can use react-app-rewired and customize-cra to modify it safely:

1. Install the tools:

   npm install react-app-rewired customize-cra cross-env --save-dev
   

2. Create a config-overrides.js file in your project root to override Webpack settings based on which app you're targeting:

   const { override, adjustWebpackConfig } = require('customize-cra');
   
   module.exports = override(
     adjustWebpackConfig((config, env) => {
       const targetApp = process.env.REACT_APP_TARGET_APP;
       if (!targetApp) {
         throw new Error("Set the REACT_APP_TARGET_APP environment variable (e.g., 'dashboard')");
       }
   
       // Update entry point to the target app's index.js
       config.entry = `./src/apps/${targetApp}/index.js`;
   
       // Update output path to bundle the app into its own folder
       config.output.path = `${config.output.path}/${targetApp}`;
       config.output.filename = 'static/js/[name].[contenthash:8].js';
       config.output.chunkFilename = 'static/js/[name].[contenthash:8].chunk.js';
   
       return config;
     })
   );
   

Step 4: Update Package.json Scripts #

Modify your package.json scripts to target specific apps for development and building:

"scripts": {
  "start:dashboard": "cross-env REACT_APP_TARGET_APP=dashboard react-app-rewired start",
  "start:todo": "cross-env REACT_APP_TARGET_APP=todo-app react-app-rewired start",
  "build:dashboard": "cross-env REACT_APP_TARGET_APP=dashboard react-app-rewired build",
  "build:todo": "cross-env REACT_APP_TARGET_APP=todo-app react-app-rewired build",
  "build:all": "npm run build:dashboard && npm run build:todo",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
}

Step 5: Run or Build Your Apps #

• To start the dashboard app in development mode:

  npm run start:dashboard
  

• To build the todo app for production:

  npm run build:todo
  

• All built apps will live in separate folders under the build directory (e.g., build/dashboard, build/todo-app).

Bonus: When to Consider a Full Monorepo Tool #

If your apps grow more complex (e.g., you need separate dependencies for some apps, or want advanced code sharing), tools like Nx or Lerna might be worth exploring. But for small, lightweight apps, the above approach is simple and avoids overcomplicating things.

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