mapbox-gl-jsはbrowserifyにバンドルされてもレンダリングされません

Question

mapbox-gl-jsで奇妙な問題があります。 mapbox-gl.jsファイルをCDNとしてhtml doc headに追加すると、マップはうまく描画されます。私はそれを必要とし、文書化し、マップがレンダリングされません。また、私はこのようなバンドルのエラーが出るようbrowserifyとの同梱する場合： https://www.mapbox.com/mapbox-gl-js/api/：Error: Cannot find module './feature' from '/home/.../mbtst/node_modules/mapbox-gl/dist'

ドキュメントは、モジュールバンドラを使用する方法について説明します。 （それは以来、この問題が原因で変更されている）であった。この問題を掲示する時 ：

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：私は、CDNを使用することはオプションではありませんつまり、コルドバのアプリでオフラインで使用するためのスクリプトをバンドルする必要があります。

Answer 1

それはここでの問題を参照してください、それはバグであるとmapboxの人々はそれを修正するために働いていることが判明：https://github.com/mapbox/mapbox-gl-js/issues/4453

。一方、私は^ 0.34」にmapbox-GLバージョン「^ 0.33.1」からアップグレード0.0" 今では、代わりにこのようなDISTのSRCなどの回避策で動作します：

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

私は、以前のバージョンであることを試みたが、それは、その後動作しませんでした。

Answer 2

あなたが提供したコードは基本的にはOKのようです。代わりにimportのrequireを使用してみてください：

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を参照してくださいoptions browserifyを確認し、あなたのバンドルをカスタマイズするのにかかります。