React/Preact组件库集成遗留Web应用：依赖方案抉择咨询

Hey there! Let's walk through your options to help you pick the best approach for your reusable component library, balancing legacy app integration, future reuse, and dependency management.

First, Let's Recap Your Two Core Options #

Option A: Treat React/Preact as External Dependencies #

• Pros:
  • No extra bundle bloat—your library stays lean, making it usable for both legacy and modern apps.
  • Follows standard component library practices, so modern React projects can adopt it without hassle.
• Cons:
  • Version conflict risk is real. If your library relies on React 16, and the legacy app later adds a component library that needs React 18, you’ll run into compatibility issues. Your temporary fix (pinning versions and planning a full migration) works, but it adds overhead for your team to manage.

Option B: Embed Preact Directly in Your Bundle #

• Pros:
  • Preact’s tiny footprint (3-4KB gzipped) is negligible—hardly a hit to load times.
  • Self-contained bundle means the legacy app doesn’t need to install or configure any extra dependencies. Integration is as simple as dropping in your script tag.
• Cons:
  • Reuse in modern React projects gets trickier out of the box. If you want to combine these components with other React-based libraries, you’ll need extra configuration to avoid duplicate React/Preact instances.

Which Option Is Better? It Depends on Your Priorities #

• If legacy app integration speed & simplicity are top priorities: Go with Option B. The zero-fuss integration for your ES5/JQuery app is worth the minor tradeoff in modern reuse flexibility—especially since you can mitigate that tradeoff with extra config (more on that below).
• If long-term cross-project reuse is non-negotiable: Stick with Option A. Just make sure your team has a clear plan for version pinning and eventual legacy app upgrades to avoid future conflicts.

Are There Other Middle-Ground Options? Absolutely! #

1. Build a Dual-Mode Component Library #

Create two bundle variants to serve both use cases:

• A UMD bundle for legacy apps: Embeds Preact, transpiled to ES5, ready to drop into script tags.
• An ES module bundle for modern apps: Marks React/Preact as external dependencies, so modern projects can use their own installed versions.

You can set this up in your package.json and webpack config:

{
  "main": "dist/legacy-umd-bundle.js", // For legacy apps (includes Preact)
  "module": "dist/modern-es-bundle.js", // For modern apps (external React/Preact)
  "peerDependencies": {
    "react": "^16.0.0 || ^18.0.0",
    "react-dom": "^16.0.0 || ^18.0.0"
  },
  "dependencies": {
    "preact": "^10.0.0" // Only bundled in the legacy build
  }
}

This way, you get the best of both worlds—no extra work for legacy teams, full compatibility with modern React projects.

2. Use Preact Compat for Cross-Framework Compatibility #

If you go with Option B, use preact/compat (a drop-in React compatibility layer) in your components. This lets your library work seamlessly in both:

• Legacy apps (with embedded Preact)
• Modern React projects (by mapping preact/compat to the project’s installed React instance via webpack aliases or module resolution).

For modern projects, they just need to add an alias in their config:

// webpack.config.js (modern React project)
module.exports = {
  resolve: {
    alias: {
      'react': 'preact/compat',
      'react-dom': 'preact/compat'
    }
  }
};

This eliminates the "duplicate React instance" problem and makes your component library reusable across both environments.

3. Microfrontends for Isolated Integration #

If your legacy app is large and you’re planning a gradual refactor, consider wrapping your React/Preact components as microfrontends (using tools like single-spa or Module Federation). This keeps your component’s dependencies fully isolated from the legacy app, avoiding version conflicts entirely. It’s more complex upfront, but it’s a great long-term strategy for modernizing legacy apps piece by piece.

Is Option B Feasible? 100% Yes! #

Preact is designed to be lightweight and compatible with ES5 environments (when transpiled correctly). Here’s how to make it work:

1. Configure webpack/babel to transpile your code and Preact to ES5.
2. Bundle your components + Preact into a UMD format, which exposes a global variable (e.g., MyLegacyComponents).
3. In your legacy jQuery app, you can mount components directly using the global variable:

// Legacy ES5/JQuery code
$(document).ready(function() {
  // Mount your button component into a DOM element
  MyLegacyComponents.renderButton('#button-container', { 
    label: 'Click Me',
    onClick: function() { alert('Hello from Preact!'); }
  });
});

No extra setup needed for the legacy team—just drop in your script and go.

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