Блог

Главная - Вопросы по программированию - Уменьшенные открытые слои без модулей

Уменьшенные открытые слои без модулей

#javascript #build #commonjs #openlayers-6

Вопрос:

При работе с openlayers я использую простой дистрибутив JS (без модулей), используя

 <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.9.0/build/ol.js">

или локальную копию ol.js и отлаживайте по желанию в моем локальном браузере.

Когда все работает с такими объявлениями, как

 var map = new ol.Map({ ...});
var mySource = new ol.source.Vector();
etc ...

Я хотел бы иметь возможность построить custom-ol.js меньше, чем ol.js содержит только то, что я использую.

Я попробовал другой подход, но без особого успеха. Установка среды разработки в узле с помощью простого main.js импорт только того, что мне нужно, показался хорошим решением:

 import {Map, View} from 'ol';
import Vector from 'ol/layer/Vector';
...

Однако при построении с узлом, как описано в https://openlayers.org/en/latest/doc/tutorials/bundle.html, Используя множество предлагаемых вариантов (Vite, веб-пакет, накопительный пакет и т. Д.), Я сталкиваюсь с одной из этих двух проблем:

  1. Либо custom-ol.js построен как модуль, и локальное развитие больше невозможно
  2. Или custom-ol.js построен как обычный файл JS, без модулей, но у меня не может быть синтаксиса, подобного ol.source.Вектор() работает

Я также пытался создавать Openlayers из исходного кода с помощью «npm run build-legacy», но пытаться угадать, какой источник следует исключить, громоздко.

Я действительно скучаю по хорошему учебнику по ручному созданию минимальной пользовательской библиотеки Openlayers, сохраняя при этом объявления в стиле ol.xxx.yyy.

Ответ №1:

У меня было немного свободного времени, и я действительно хорошо изучил Javascript. Тем не менее, использование модулей при разработке небольшого веб-сайта все еще является для меня немного излишним, по крайней мере, на данный момент.

Итак, вот что я сделал, чтобы получить меньший ol.js библиотека:

  1. Вилочные открывалки
  2. Установите зависимости с помощью npm install
  3. Построить index.js с npm run build-index
  4. Отредактируйте ./build/index.js , чтобы прокомментировать ненужный экспорт
 //~ import $ol$source$Raster from './ol/source/Raster.js';
import $ol$source$Source from './ol/source/Source.js';
//~ import $ol$source$Stamen from './ol/source/Stamen.js';
import $ol$source$Tile from './ol/source/Tile.js';
...
//~ ol.source.Raster = $ol$source$Raster;
//~ ol.source.Raster.Processor = _ol_source_Raster$Processor;
//~ ol.source.Raster.RasterSourceEvent = _ol_source_Raster$RasterSourceEvent;
//~ ol.source.Raster.newImageData = _ol_source_Raster$newImageData;
ol.source.Source = $ol$source$Source;
//~ ol.source.Stamen = $ol$source$Stamen;
ol.source.Tile = $ol$source$Tile;
...

Это немного утомительно, но эффективно.

  1. Создайте наследие ol.js плоский файл с npx webpack --config config/webpack-config-legacy-build.mjs amp;amp; npx cleancss --source-map src/ol/ol.css -o build/legacy/ol.css

Только за счет удаления форматов и источников, которые я не использую, а также векторных плиток и webgl, ol.js объем уменьшается с 1,2 МБ до 540 КБ.

Метки: