Как использовать импорт Leaflet в Sails. js?

Question

Super basi c вопрос: Я хочу установить и использовать модуль Leaflet в моем проекте Sails. js. Во-первых, я устанавливаю его с помощью npm i leaflet --save. Это успешно обновляет список зависимостей в пакете. json файл.

Чтобы использовать его, я пишу следующий код внутри скрипта страницы:

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

Паруса. js жалуется : Uncaught (в обещании) ReferenceError: require не определено.

Почему? Если мне нужно сначала создать хук, что бы он должен был содержать?

Answer 1

Модули, установленные через менеджер пакетов npm, должны использоваться на стороне сервера (контроллеры, действия и т. Д. c.), А не в браузере.

Вы можете использовать решения такие как Browserify или Webpack, но в этом случае просто лучше загрузить Leaflet с веб-сайта и добавить папку в assets / зависимостей.

Наконец, вы можете импортировать JavaScript Leaflet файлы в layout.e js (внутри папки 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 таким же образом.

Answer 2

Вам не нужно ничего требовать, после того, как вы npm установили его, просто добавьте буклет. js, leaflet.markercluster. js и буклет. css в заголовке, и все готово.

Вы можете использовать короткий пример карты инициализации на их сайте, и она будет работать.