如何构建保留ol.xxx.yyy语法的无模块精简版自定义OpenLayers库

1. 初始化项目 #

新建空的项目文件夹，在文件夹内执行以下命令初始化项目、安装依赖：

npm init -y
npm install ol vite --save-dev

2. 编写入口挂载文件 #

在项目根目录新建src/index.js，导入所有你用到的OpenLayers组件，按照原有ol.xxx.yyy的层级结构挂载到全局ol对象上，示例如下：

// 导入用到的所有OpenLayers组件，可根据自己的实际使用情况增减
import { Map, View } from 'ol';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import { Zoom, FullScreen } from 'ol/control';

// 按原有命名空间层级挂载到全局对象
window.ol = {
  Map,
  View,
  layer: {
    Vector: VectorLayer,
    Tile: TileLayer
  },
  source: {
    Vector: VectorSource,
    OSM: OSM
  },
  control: {
    Zoom,
    FullScreen
  }
  // 用到其他模块（如interaction、style等）按相同规则补全结构即可
}

3. 配置Vite构建规则 #

根目录新建vite.config.js，配置为无模块的IIFE格式输出：

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    lib: {
      entry: 'src/index.js',
      name: 'ol',
      formats: ['iife'],
      fileName: () => 'custom-ol.js'
    },
    minify: 'terser', // 开启代码压缩，进一步减小体积
    emptyOutDir: true
  }
});

4. 执行构建 #

打开package.json，修改scripts配置项，添加构建命令：

{
  "scripts": {
    "build": "vite build"
  }
}

执行npm run build，构建完成后产物会生成在dist目录下的custom-ol.js，直接用<script>标签引入即可沿用原有的ol.xxx.yyy调用语法，不会有任何兼容问题。

额外说明 #

• 不要忘记把OpenLayers的样式文件node_modules/ol/ol.css复制到你的业务项目中引入，否则地图样式会异常
• 后续需要新增用到的OpenLayers功能时，只需在src/index.js中添加对应的导入和挂载规则，重新执行构建即可

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