mapbox-gl-js ne s'affichera pas lorsque livré avec browserify

Question

J'ai un problème étrange avec mapbox-gl-js. Lorsque j'ajoute le fichier mapbox-gl.js en tant que CDN à la tête de doc html, la carte s'affiche correctement. Quand je requiers et paquet avec browserify comme indiqué, la carte ne rend pas et je reçois une erreur de bottelage comme ceci: Error: Cannot find module './feature' from '/home/.../mbtst/node_modules/mapbox-gl/dist'

Les documents décrivent comment utiliser un module Bundler: https://www.mapbox.com/mapbox-gl-js/api/. Au moment de l'affichage de cette question qui était (il a depuis été changé en raison de cette question):

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

Ma carte est initiée comme ceci:

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 
}); 

Si je requiers que le module comme tel require('mapbox-gl'); - même erreur.

J'ai même essayé d'enregistrer le fichier à partir de la source CDN et j'ai besoin de ce fichier - qui se plaint de plusieurs modules de dépendance manquants.

Le code est dans ce repo: https://github.com/awesomemaptools/mbtst

PS: Je dois regrouper le script pour une utilisation hors connexion dans une application Cordova, à savoir l'aide cdn n'est pas une option.

Answer 1

Il se trouve qu'il est un bug et les gens de MapBox travaillent à corriger, voir le numéro ici: https://github.com/mapbox/mapbox-gl-js/issues/4453

Pendant ce temps, je mis à jour de la version MapBox-gl «^0.33.1 » à «^0.34 .0" et maintenant il fonctionne avec une solution de contournement en incluant src au lieu de dist comme ceci:

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

J'ai essayé avec la version précédente, mais cela n'a pas fonctionné alors.

Answer 2

Le code que vous avez fourni semble fondamentalement OK. Essayez d'utiliser require au lieu de import:

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

appellent ensuite les éléments suivants dans le terminal:

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

Cela ajoute votre code et les modules nécessaires au fichier JavaScript créé bundle.js, donc tout devrait être disponible même si vous êtes déconnecté.

ajouter ensuite le faisceau de sortie sur votre page HTML via le script-tag:

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

Voir https://github.com/substack/browserify-handbook#bundling-for-the-browser pour un peu plus de détails et vérifiez la options browserify faut pour personnaliser votre paquet.