【问题标题】：Bundle Leaflet for use in Browser捆绑传单以在浏览器中使用
【发布时间】：2018-10-12 10:31:56
【问题描述】：

我想使用传单在一个简单的本地网站上加载自定义地图。

目前我正在使用 Node Js、Express、EJS（作为模板引擎），但我似乎无法使用传单。我也尝试过使用 browserify 并导入 bundle.js 脚本，但仍然没有成功。

知道我该怎么做吗？

//map.js

var map = L.map("map-panel");

var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib = 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
var mapLayer = new L.TileLayer(osmUrl, {minZoom: 8, maxZoom: 20, attribution: osmAttrib });

map.addLayer(mapLayer).fitWorld();
//map.setView([location.lat, location.lon], 13);

<!DOCTYPE>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>Map</title>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <link rel="stylesheet" href="./../node_modules/leaflet/dist/leaflet.css" />
</head> 

<body>
<div id="map-panel">
</div>
   <!--    <script src="bundle.js"></script> -->
    <script src="/js/map_panel.js"></script>
</body>
</html>

根据导入，我在 app.js 或 map.js 中都尝试过var L = require('leaflet');

或在控制器中 var L = require('leaflet');

我曾经得到这个 ReferenceError: L is not defined。该行是指第一个js行。

现在我尝试使用 browserify，但出现“未定义窗口”错误。我正在尝试遵循本教程http://mappingandco.com/blog/leaflet-with-browserify-basic-tutorial/

感谢您的帮助或建议！

【问题讨论】：

开始的地方是发布您尝试过的代码，以及尝试时发生的情况（错误消息和其他输出。）请参阅此链接：stackoverflow.com/help/mcve
谢谢你，马特，我以为没有必要，但现在我添加了它们。
我看不到 leaflet.js 正在加载 - 这说明 L 未定义。

标签： javascript node.js webpack browserify require

【解决方案1】：

你不能require() 在浏览器中原生地做任何事情，但是 Browserify 或 Webpack 会让你将模块捆绑到你的代码中，这样它就可以在浏览器中运行。

您应该使用require 语句编写您的JavaScript 代码，然后构建它以生成一个JavaScript bundle，您可以将它与HTML 一起交付给浏览器。每次更改代码时，都需要重新构建，或在项目中添加watcher 并让观察程序运行重新构建。重要的是要了解它是由 HTML 调用的 bundle.js，不是 app.js。您在上面发布的代码尚未捆绑，因此无法正常工作。

此外，您在上面发布的代码似乎实际上并未向地图添加除缩放控件之外的任何可见内容。

使用教程代码，我在下面发布了一个工作示例：

目录结构

project
  node_modules/
  app.js
  package.json
  index.html
  dist/
    bundle.js
    style.css

package.json

{
  "name": "leaf",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "browserify app.js -o dist/bundle.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browserify": "^16.2.0"
  },
  "dependencies": {
    "jquery": "^3.3.1",
    "leaflet": "^1.3.1"
  }
}

app.js

// require modules
var L = require('leaflet');
var $ = require('jquery');
// Create the map
var map = L.map('map').setView([41.3921, 2.1705], 13);

// Indicate leaflet the specific location of the images folder that it needs to render the page
L.Icon.Default.imagePath = 'node_modules/leaflet/dist/images/'

// Use OpenStreetMap tiles and attribution
var osmTiles = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var attribution = '© OpenStreetMap contributors';

// Create the basemap and add it to the map
L.tileLayer(osmTiles, {
  maxZoom: 18,
  attribution: attribution
}).addTo(map);

// Add some geojson from this URL
var geojsonURL = 'http://mappingandco.github.io/geojsonDB/barcelona/neighbourhoods.geojson'

$.getJSON(geojsonURL, function(neighbourhoods) {
  L.geoJson(neighbourhoods, {
    onEachFeature: function (feature, layer) {
      layer.bindPopup(feature.properties.NBarri);
    }
  }).addTo(map);
});

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Leaflet with browserify template</title>
    <link rel="stylesheet" href="node_modules/leaflet/dist/leaflet.css" />
    <link rel="stylesheet" href="dist/style.css">
</head>
<body>
<div id="map"></div>
    <script src="dist/bundle.js" charset="utf-8"></script>
</body>
</html>

安装和构建

npm install
npm run build

然后在浏览器中打开index.html 文件，您应该会看到一张地图。

【讨论】：

非常感谢马特的详细解释。我试过了，效果很好！现在将尝试将它与快递服务器放在一起！再次感谢您的帮助！
太棒了。很高兴它有帮助！