Webpack+TypeScript项目出现SCRIPT1003: Expected ':'错误求助

云上老周

2026-5-27

问题根源分析

这个SCRIPT1003: Expected ':'错误是旧版IE浏览器（比如IE11及以下）不支持ES6对象属性简写语法导致的。你看到的Webpack自动生成代码里的{ i, l: !1, exports :{} }，其中i是ES6的简写语法（等价于i: i），而IE无法识别这种写法，所以抛出了语法错误。

解决方法

下面是几个针对性的配置调整步骤，按顺序尝试即可：

1. 调整TypeScript编译目标到ES5

打开你的tsconfig.json，确保compilerOptions里的target设置为ES5，让TypeScript把代码编译成旧浏览器能识别的语法：

{
  "compilerOptions": {
    "target": "ES5",
    "module": "CommonJS", // 根据项目需求调整，确保模块语法兼容
    // 其他原有配置...
  }
}

2. 用Babel转译Webpack生成的Runtime代码

即使TypeScript编译到ES5，Webpack自身生成的模块加载runtime代码可能还是会包含ES6语法。这时候需要配置Babel来转译所有JS/TS文件：
首先安装依赖：

npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/preset-typescript

然后修改Webpack配置（比如webpack.config.js），添加babel-loader规则：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(ts|js)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env', {
                targets: {
                  browsers: ['IE 11', 'last 2 versions'] // 明确指定要兼容的浏览器
                }
              }],
              '@babel/preset-typescript'
            ]
          }
        }
      }
    ]
  },
  // 其他原有配置...
};

3. 设置Webpack的`target`为兼容旧浏览器

在Webpack配置里添加target选项，告诉Webpack生成适配旧浏览器的代码：

module.exports = {
  target: ['web', 'es5'], // 或者直接写'target: "ie11"'
  // 其他原有配置...
};

4. 验证开发环境配置

如果是在开发环境（比如用webpack-dev-server）报错，确保开发环境的Webpack配置也应用了上述转译规则，避免开发环境生成不兼容的代码。

完成以上配置后，重新构建项目，再在IE里测试，这个语法错误应该就能解决了。

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