當與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用來定制軟件包的選項 。