使用节点实现 Mapbox 时在浏览器中接收 'require not defined'

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（服务器端）中的函数，而不是浏览器中的函数。

在此处查看在浏览器中使用 require 的答案： Node-style require for in-browser javascript?

或

或者，只需添加链接到 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',
});

使用节点实现 Mapbox 时在浏览器中接收 'require not defined'

Receiving 'require not defined' in browser when implementing Mapbox with node

html

javascript

css

mapbox

pug

或