npm - 带有 Webpack : "ReferenceError: e is not defined" (in vue-cli app) 的 MapboxGL

Question

我正在使用 webpack 模板开发一个 vue-cli 2.9.3 应用程序。我有一个使用 MapboxGL 的组件，使用 import mapboxgl from 'mapbox-gl;' 导入。

使用 npm run dev 在开发中一切正常。

我可以使用 npm run build 毫无问题地构建项目。但是，当使用 MapboxGL 导航到组件时，我在控制台上收到以下错误:

ReferenceError: e is not defined

Firefox 或 Chrome 的 DevTools 无法链接到 sourcemap (.js.map) 文件，因此错误消息不是很有帮助。

我能够通过使用 devtool: eval-source-map 而不是 ./config/index 中的 devtool: source-map 来使捆绑工作.js，但包大小变为 > 8Mb，这是 Not Acceptable ，它是 not recommended in production .

我也尝试过不使用 sourcemaps，但我遇到了同样的神秘错误。

如何调试打包包中的这个错误？我希望至少能够看到错误的来源。

Answer 1

好像是一个known bug使用 MapboxGL 和 Webpack。

在./build/webpack.prod.conf.js中添加如下内容即可解决:

module: {
     ...
     noParse: /(mapbox-gl)\.js$/,
     ...
}