Webpack - AngularJS 应用程序无法在 IE11 上运行答案

【问题标题】：Webpack - AngularJS app not working on IE11Webpack - AngularJS 应用程序无法在 IE11 上运行
【发布时间】：2018-09-07 10:44:02
【问题描述】：

AngularJS 应用程序正在使用 webpack，创建了一些模块，并且这些模块也可以与 webpack 一起使用。在所有浏览器中运行该应用程序时，除 IE11 外，一切都运行良好。这是 IE11 控制台中显示的当前错误。

SCRIPT1006: Expected ')'
File: vendor.bundle.js, Line 1, Column 546833

错误出现在已“webpackified”的导入模块之一上，尝试删除该模块和我们另一个位于不同 repo 错误中的组件。认为这可能是一个 webpack 错误，而 babel 会解决这个问题。

.bablerc

{
"presets": [
    [ "env", {
     "targets": {
      "browsers": ["last 2 versions", "ie >= 11"]
    },
          "useBuiltIns": true
      }]
    ]
}

package.json

"devDependencies":{
  "babel-core": "^6.26.3",
  "babel-loader": "^7.1.4",
  "babel-polyfill": "^6.26.0",
  "babel-preset-env": "^1.7.0",
  "eslint": "^5.0.1",
  "eslint-loader": "^2.0.0",
  "file-loader": "^1.1.11",
  "happypack": "^5.0.0",
  "hard-source-webpack-plugin": "^0.9.0",
  "html-loader": "^0.5.5",
  "html-webpack-plugin": "^3.2.0",
  "json-loader": "^0.5.7"
},
"dependencies":{
  ...,
  "dataservice": "git+ssh://git@<remote-server>/dataService.get#webpackify",
  "cart": "git+ssh://git@<remote-server>/cart.git#webpackify"
},
"externals": [
  "dataservice/app",
  "cart/app"
]

使用 angularJS 版本“^1.7.2”和 webpack 版本“^4.12.1”

webpack.config.js 内部具有构建外部模块以及 angularJS 应用程序中当前 javascript 文件的功能。

webpack.config.js

module.exports = {
  entry: ["babel-polyfill", "./scripts/app.js"],
  modules.rules: [
    {  
      enforce: 'pre',
      test: /\.js$/,
      include: build_externals(),
      loader: 'eslint-loader'
    },
    {
      test: /\.js$/,
      include: build_externals(),
      use: 'happypack/loader?id=ECMAScript'
    }
  ],
  plugins: [
    {
     loader: 'babel-loader',
     options: {
      presets: ['env'],
      plugins: ['transform-es2015-modules-commonjs']
     }
   },
   new HappyPack({
    id: 'ECMAScript',
    threads: 4,
    loaders: happy_js_loader
   })
  ]
}

因为这个问题而失去理智。希望有人能提供帮助。提前致谢。

【问题讨论】：

运行模式：“开发”与模式：“生产”有区别吗？在 dev 中查看 vendor.bundle.js 的编译 src 可能会更好，因为它不会被压缩。

标签： javascript angularjs internet-explorer webpack babel-loader

【解决方案1】：

结果我的问题的解决方案是为外部模块提供正确的路径。 Webpack 在构建过程中包含这些。 IE 完美运行。

package.json

"externals": [
 "node_modules/dataservice/app",
 "node_modules/cart/app"
]

【讨论】：