使用节点实现 Mapbox 时在浏览器中接收“要求未定义”

Question

我正在上一门课程，目前正在尝试实施 mapbox.js 。我已直接按照 mapbox 文档中的所有说明进行操作，但在控制台中收到错误消息：

Uncaught ReferenceError: require is not defined

<anonymous> http://localhost:8000/js/mapbox.js:3

这是我的 mapbox.js 文件：

var mapboxgl = require('mapbox-gl/dist/mapbox-gl.js');

mapboxgl.accessToken =

  'pk.eyJ1IjoiYnJhbmF1c3QiLCJhIjoiY2tnOHVibGllMDVuYjJ5cHFmbmpucndwZSJ9.KBzYV-QSHSChEb6QJpNpdg';

var map = new mapboxgl.Map({

  container: 'map',

  style: 'mapbox://styles/mapbox/streets-v11',

});

我在一个单独的 .pug 文件中附加到我的基本文件的头部：

block append head

link(href='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css' rel='stylesheet'

Answer 1

require是节点 js（服务器端）中的一个函数，而不是浏览器中的函数。或者或者，只需添加链接到 mapbox js 文件的脚本标签并删除你的 require 语句。因此，将其添加到您的 html 中： <script src='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js'></script>然后将您的代码更改为：mapboxgl.accessToken =  'pk.eyJ1IjoiYnJhbmF1c3QiLCJhIjoiY2tnOHVibGllMDVuYjJ5cHFmbmpucndwZSJ9.KBzYV-QSHSChEb6QJpNpdg';var map = new mapboxgl.Map({  container: 'map',  style: 'mapbox://styles/mapbox/streets-v11',});