Cuando trabajo con capas abiertas, uso la distribución JS simple (sin módulos) usando
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.9.0/build/ol.js">o una copia local de ol.js y depurar a voluntad en mi navegador local.
Cuando todo funciona con declaraciones como
var map = new ol.Map({ ...}); var mySource = new ol.source.Vector(); etc ...Me gustaría poder construir un custom-ol.js más pequeño que ol.js que contenga justo lo que uso.
Intenté un enfoque diferente sin gran éxito. Instalar un entorno de desarrollo en Node con un simple main.js importando justo lo que necesito parecía una buena solución:
import {Map, View} from 'ol'; import Vector from 'ol/layer/Vector'; ...Sin embargo, cuando construyo con node como se explica en https://openlayers.org/en/latest/doc/tutorials/bundle.html , usando las numerosas opciones que se ofrecen (Vite, Webpack, RollUp, etc...), me enfrento a una de estos dos temas:
También traté de construir Openlayers desde la fuente con 'npm run build-legacy', pero es engorroso intentar adivinar qué fuente se excluirá.
Realmente echo de menos un buen tutorial para crear manualmente una biblioteca Openlayers personalizada mínima manteniendo las declaraciones de estilo ol.xxx.yyy.
Tuve un tiempo libre y tuve algunas lecturas realmente buenas sobre Javascript. Sin embargo, usar módulos al desarrollar un sitio web pequeño todavía es un poco excesivo para mí, al menos por el momento.
Entonces, esto es lo que hice para obtener una biblioteca ol.js más pequeña:
npm installnpm run build-index./build/index.js para comentar exportaciones innecesarias //~ 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; ...Es un poco tedioso, pero eficiente.
npx webpack --config config/webpack-config-legacy-build.mjs && npx cleancss --source-map src/ol/ol.css -o build/legacy/ol.css Solo eliminando formatos y fuentes que no uso, junto con vector-tiles y webgl, ol.js se reduce de 1,2 MB a 540 kB.