如何在Sails.js中使用import Leaflet？

Question

超级基础问题：我想在我的Sails.js项目中安装和使用Leaflet模块。首先，我使用 npm i leaflet --save 安装它。这成功更新了 package.json 文件中的依赖项列表。

为了使用它，我在页面脚本中编写了以下代码：

mounted: async function() {
  //…
  console.log('hello world!!!!');
  var leaflet = require("leaflet");
},

Sails.js 抱怨：未捕获（承诺）ReferenceError：未定义要求。

为什么？如果我需要先创建一个钩子，它需要包含什么？

Answer 1

您不需要任何要求，一旦您安装了 npm，只需在 header 中添加 leaflet.js、leaflet.markercluster.js 和 leaflet.css 即可完毕。

您可以使用他们网站上的 init map 的简短示例，它会起作用。

Answer 2

通过包管理器 npm 安装的模块将用于服务器端（控制器、操作等），而不是浏览器。

您可以使用 Browserify 或 Webpack 等解决方案，但在这种情况下最好下载 Leaflet from the website 并将文件夹添加到 assets/dependencies.

下

最后，您可以将 JavaScript 传单文件导入 layout.ejs（在 views/layouts 文件夹内）：

<% /* Auto-injected «script» tags: */ %>
<!--SCRIPTS-->
// ...
<script src="/dependencies/leaflet/leaflet.css"></script>

对于CSS：

<% /* Auto-injected «link» tags: */ %>
<!--STYLES-->
// ...
<link rel="stylesheet" href="/dependencies/leaflet/leaflet.css">

我猜这是最好的方法，因为 Sails.js 入门模板正在以相同的方式导入 Boostrap 4。

How to use import Leaflet in Sails.js?