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

【问题标题】：Receiving 'require not defined' in browser when implementing Mapbox with node使用节点实现 Mapbox 时在浏览器中接收“要求未定义”
【发布时间】：2021-01-29 05:06:06
【问题描述】：

我正在学习课程，目前正在尝试实施 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')

【问题讨论】：

您正在阅读哪些文档？我在这里看不到任何提及require：docs.mapbox.com/mapbox-gl-js/api
我刚刚添加了一张他们网站上给我的说明图片。感谢您的帮助
如果我只看到其中一小部分的屏幕截图，我无法查看文档的上下文！
这能回答你的问题吗？ Client on node: Uncaught ReferenceError: require is not defined

标签： javascript html css pug mapbox

【解决方案1】：

require 是 node 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',
});

【讨论】：