OpenLayers 6手动部署精简版本 无需Node环境的构建方法

以下方案可实现仅打包项目所需模块生成minimized.js的需求，不需要在日常开发环境配置Node：

方案1：在线自定义构建 #

• 可使用公开的OpenLayers在线自定义打包平台，勾选项目所需的组件（如对应图层、交互、投影、数据源等模块）后，平台会直接生成可直接使用的ol.min.js及配套样式文件，全程无需本地环境配置
• 勾选模块时注意剔除不需要的冗余组件，可进一步压缩最终包的体积，最小可控制到几十KB

方案2：ES模块按需引入 #

如果不需要打包为单独的js文件，可直接通过公共ES模块CDN按需引入所需组件，完全跳过构建环节：

// 示例：仅引入地图、OSM瓦片图层、视图三个必须模块
import Map from 'ol/Map.js';
import OSM from 'ol/source/OSM.js';
import TileLayer from 'ol/layer/Tile.js';
import View from 'ol/View.js';

// 直接初始化地图
const map = new Map({
  target: 'map',
  layers: [
    new TileLayer({
      source: new OSM()
    })
  ],
  view: new View({
    center: [0, 0],
    zoom: 2
  })
});

• 该方案浏览器会自动处理依赖，不会加载多余模块，实际加载体积和自定义构建的体积基本一致
• 若需要离线使用，可将对应的模块文件下载到本地，修改引入路径即可正常使用

方案3：单次构建复用 #

如果需要更高的自定义程度，可一次性完成构建后复用产物：

• 仅需在任意配置了Node环境的设备上拉取OpenLayers官方自定义构建模板，修改导出列表仅保留项目需要的模块
• 执行npm run build命令后即可生成自定义的ol.min.js，后续将该文件复制到无Node的开发环境中直接引入使用即可，不需要在开发环境配置Node

内容的提问来源于stack exchange，提问作者yvecai