mapbox-gl-js 与 browserify 捆绑时不会呈现

Question

我对 mapbox-gl-js 有一个奇怪的问题。当我将 mapbox-gl.js 文件作为 CDN 添加到 html 文档头时，地图呈现良好。当我需要它并按照记录将其与 browserify 捆绑时，地图不会呈现并且我收到如下捆绑错误：Error: Cannot find module './feature' from '/home/.../mbtst/node_modules/mapbox-gl/dist'

文档描述了如何使用模块打包器： https://www.mapbox.com/mapbox-gl-js/api/。在发布此问题时（由于此问题已更改）：

npm install --save mapbox-gl
import mapboxgl from 'mapbox-gl/dist/mapbox-gl';
// or "const mapboxgl = require('mapbox-gl/dist/mapbox-gl');"

我的地图是这样初始化的：

mapboxgl.accessToken = 'pk.eyJ1IjoiZWxsdnRyemVnIiwiYSI6ImNpejl4M2M0NDAxbWoycXRlanZnc283dnYifQ.sPFCSTsdlCOp1hk6afDvJg';
this.map = new mapboxgl.Map({
    container: 'map-container', // container id
    style: 'mapbox://styles/mapbox/streets-v9', 
    center: [6.16342, 62.47126], // aalesund 
    zoom: 11
});

如果我只需要这样的模块require('mapbox-gl'); - 同样的错误。

我什至尝试从 CDN 源保存文件并需要该文件 - 它抱怨缺少多个依赖模块。

代码在这个仓库中： https://github.com/awesomemaptools/mbtst

PS：我需要在 Cordova 应用程序中捆绑脚本以供离线使用，即使用 cdn 不是一个选项。

Answer 1

你提供的代码基本没问题。尝试使用 require 而不是 import:

const mapboxgl = require('mapbox-gl/dist/mapbox-gl');

然后在终端中调用以下命令：

browserify your-main-js-file.js > bundle.js

这会将您的代码和所需的模块添加到创建的 JavaScript 文件 bundle.js，因此即使您处于离线状态，所有内容也应该可用。

然后通过脚本标签将输出包添加到您的 HTML 页面：

<script src="bundle.js"></script>

请参阅 https://github.com/substack/browserify-handbook#bundling-for-the-browser for a bit more details and check the options browserify 自定义您的包。

Answer 2

事实证明这是一个错误，mapbox 的人员正在努力修复它，请在此处查看问题：https://github.com/mapbox/mapbox-gl-js/issues/4453

与此同时，我从 mapbox-gl 版本“^0.33.1”升级到“^0.34.0”，现在当包含 src 而不是 dist 时它可以使用解决方法，如下所示：

const mapboxgl = require('mapbox-gl/src/index.js');

我在以前的版本中尝试过，但它没有用。

mapbox-gl-js 与 browserify 捆绑时不会呈现

mapbox-gl-js won't render when bundled with browserify

javascript

cordova

browserify

mapbox-gl-js