单项目多package.json配置求助：IE8与IE11兼容构建

Hey there! As someone who’s navigated legacy browser compatibility and React version upgrades, let’s break down your problem and figure out the best path forward.

Your Subdirectory Package.json Approach Is Feasible — You Just Need to Tweak Configs #

The idea of using a subdirectory for IE8-specific dependencies and configs is smart for keeping maintenance low, but the issues you’re hitting (wrong TypeScript version, Cannot find name 'require') are just configuration gaps, not showstoppers. Here’s how to fix them:

1. Fix the TypeScript Version Mismatch #

The reason your build is still using TypeScript 2.8.3 instead of 2.3.4 is that either:

• Your terminal is running commands from the root directory, so it’s pulling TS from the root node_modules.
• Your Webpack config isn’t explicitly telling ts-loader to use the IE8 subdirectory’s TypeScript.

Fix steps:

• In your ie8 subdirectory, run npm install typescript@2.3.4 (and all other IE8-compatible dependencies like react@0.14.x, redux@x.x.x, etc.) to ensure they’re installed locally.
• Update your IE8-specific Webpack config to force ts-loader to use the subdirectory’s TS:

  module.exports = {
    // ... other config
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          use: {
            loader: 'ts-loader',
            options: {
              compiler: require.resolve('./ie8/node_modules/typescript')
            }
          }
        }
      ]
    }
  };
  

• Create a dedicated tsconfig.json in the ie8 subdirectory tailored for IE8:

  {
    "compilerOptions": {
      "target": "es3", // IE8 only supports ES3
      "module": "commonjs",
      "jsx": "react",
      "strict": false, // TS 2.3 is less strict than newer versions
      "lib": ["es5", "dom"], // Avoid ES6+ libs IE8 can't handle
      "types": ["node"] // Fixes the 'require' type error
    },
    "include": ["../src/**/*"] // Point to your source code
  }
  

2. Fix the Cannot find name 'require' Error #

This is a TypeScript type definition issue. IE8 builds likely use CommonJS modules (since ES modules aren’t supported), so TS needs to recognize require as a valid global. Adding "types": ["node"] to your ie8/tsconfig.json (as above) tells TS to include Node.js type definitions, which covers require. If that doesn’t work, run npm install @types/node@8.x.x (a version compatible with TS 2.3) in the ie8 subdirectory.

3. Separate Build Commands #

Add dedicated scripts to your root package.json to run builds for each environment:

"scripts": {
  "build:ie11": "webpack --config webpack.config.ie11.js",
  "build:ie8": "cd ie8 && webpack --config ../webpack.config.ie8.js"
}

Running npm run build:ie8 will switch to the subdirectory, ensuring it uses the local node_modules and configs.

Should You Split Into Two Projects? #

It depends on your long-term plans:

• Stick with single project if: Your IE8 and IE11+ versions share most business logic, and only differ in dependencies/compilation. This keeps you from duplicating code and simplifies syncing fixes across versions.
• Split into two projects if: Over time, the two versions start diverging in features, or the config complexity becomes unmanageable. If you split, use shared components/logic via private npm packages or Git submodules to avoid code duplication.

My recommendation: First fix the configuration gaps in your subdirectory approach. It’s the most efficient way to maintain both versions without doubling your codebase. If you hit unresolvable config conflicts down the line, then consider splitting.

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