时间戳

首页 > 解决方案 > 没有模块的缩小 OpenLayers

javascript - 没有模块的缩小 OpenLayers

问题描述

使用 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 ...

我希望能够构建一个比 ol.js 更小的 custom-ol.js，其中包含我使用的内容。

我尝试了不同的方法，但没有取得很大成功。在 Node 中安装一个开发环境，使用一个简单的 main.js 导入我需要的东西似乎是一个很好的解决方案：

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

但是，当按照https://openlayers.org/en/latest/doc/tutorials/bundle.html中的说明使用节点构建时，使用提供的众多选项（Vite、Webpack、RollUp 等），我面临一个这两个问题中：

  1. 要么 custom-ol.js 构建为模块，本地开发不再可能
  2. 或者 custom-ol.js 被构建为一个普通的 JS 文件，没有模块，但我不能像 ol.source.Vector() 这样的语法工作

我还尝试使用“npm run build-legacy”从源代码构建 Openlayers，但是尝试错误猜测要排除哪个源代码很麻烦。

我真的很想念一个很好的教程来手动构建一个最小的自定义 Openlayers 库，同时保留 ol.xxx.yyy 样式的声明。

标签： javascriptbuildcommonjsopenlayers-6

解决方案

我休息了一段时间，并且阅读了一些关于 Javascript 的非常好的文章。然而，在开发小型网站时使用模块对我来说仍然有点矫枉过正，至少目前是这样。

所以这是我为获得一个更小的 ol.js 库所做的：

  1. 分叉OpenLayers
  2. 安装依赖项npm install
  3. 构建 index.jsnpm 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 && npx cleancss --source-map src/ol/ol.css -o build/legacy/ol.css

通过仅删除我不使用的格式和源，以及矢量切片和 webgl，ol.js从 1.2MB 减少到 540kB。

推荐阅读