当与browserify捆绑在一起时，mapbox-gl-js不会呈现

Question

我对mapbox-gl-js有一个奇怪的问题。 当我将mapbox-gl.js文件作为CDN添加到html doc head时，地图呈现良好。 当我需要它并按照记录将其与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

原来，这是一个错误，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');

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

Answer 2

您提供的代码基本上可以。 尝试使用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 ，并检查browserify用来定制软件包的选项 。