IE11兼容支持报错求助：SCRIPT1003及SCRIPT5009问题排查

Let's break down your issues one by one, starting with the root cause you identified first:

1. Resolving SCRIPT1003: Expected ':' in vendor.bundle.js #

This error almost always points to IE11's lack of support for ES6 object method shorthand syntax. For example, if a dependency (or your own code) uses:

// ES6 shorthand (IE11 incompatible)
const validationRules = {
  style(props, propName, componentName) {
    // Validation logic here
  }
};

IE11 expects the ES5 explicit function syntax with a colon:

// ES5 compatible
const validationRules = {
  style: function(props, propName, componentName) {
    // Validation logic here
  }
};

Here's how to fix this:

• Update your Babel configuration (.babelrc or babel.config.js):
  Ensure you're using @babel/preset-env with IE11 as a target, and enabling polyfills correctly. Your config should look something like:

  {
    "presets": [
      ["@babel/preset-env", {
        "targets": {
          "ie": "11"
        },
        "useBuiltIns": "usage",
        "corejs": 3
      }],
      // Include @babel/preset-react if you're using React
      "@babel/preset-react"
    ]
  }
  

• Adjust Webpack to transpile vendor dependencies:
  The error is in vendor.bundle.js, which means a third-party library isn't being transpiled to ES5. Modify your Webpack config to include that library in Babel's processing (exclude node_modules except for the problematic package):

  module: {
    rules: [
      {
        test: /\.js$/,
        // Replace "problematic-library" with the actual dependency causing the issue
        exclude: /node_modules\/(?!(problematic-library)\/)/,
        use: "babel-loader"
      }
    ]
  }
  

  Common culprits include UI component libraries, form validation tools, or state management utilities that ship untranspiled ES6 code.

2. Fixing SCRIPT5009: 'webpackJsonp' is undefined #

You're right to suspect this is a secondary issue—if the first error halts execution before webpackJsonp is defined, this error will follow. But if it persists after fixing the first problem, check these:

• Verify bundle load order:
  Webpack's webpackJsonp is defined in the runtime chunk. Ensure your HTML loads bundles in this order:
  1. runtime.bundle.js
  2. vendor.bundle.js
  3. app.bundle.js
• Check Webpack optimization settings:
  Ensure you're splitting chunks properly, which helps isolate the runtime code:

  optimization: {
    runtimeChunk: 'single',
    splitChunks: {
      chunks: 'all'
    }
  }
  

• Ensure Promise polyfill is loaded:
  IE11 doesn't support native Promises, which Webpack uses for chunk loading. The @babel/preset-env config with corejs:3 and useBuiltIns: 'usage' should auto-inject this, but if not, you can add it explicitly at the top of your entry file:

  import 'core-js/stable/promise';
  

Final Steps #

1. Delete your dist folder (or use Webpack's clean plugin) to clear cached builds.
2. Rebuild your project with the updated configs.
3. Test in IE11—both errors should be resolved if the above steps are applied correctly.

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