vite-plugin-ol-external

external openlayers plugin for vite

Can be used in production mode without other rollup configuration.

Usage

npm i vite-plugin-ol-external -D

Add it to vite.config.js

// vite.config.js
import { viteExternalOlPlugin } from 'vite-plugin-ol-external'

export default {
  plugins: [
    viteExternalOlPlugin({}),
  ]
}

How to work

transform source code of js file.

// source code
import Map from 'ol/Map'
// transformed
const Map = window['ol.Map']

// source code
import { Vector, Tile as TileLayer } from 'ol/layer'
// transformed
const Vector = window['ol.layer'].Vector
const TileLayer = window['ol.layer'].Tile

Warning: please use the plugin after converting to JS code, because the plugin only transform JS code. Eg.

import vue from '@vitejs/plugin-vue'

export default {
  plugins: [
    vue(), // @vitejs/plugin-vue will transform SFC to JS code

    // It should be under @vitejs/plugin-vue
    viteExternalOlPlugin(),
  ]
}

If an error occurs, you can check whether the error is caused by the plugin order.

Configuration

disableInServe

disable transform in serve mode .

viteExternalOlPlugin({ disableInServe: true })

enforce

vite plugin ordering. Resolve plugin ordering cause unexpected error. Such as #21.

See https://vitejs.dev/guide/api-plugin.html#plugin-ordering.

useWindow

set false, the window prefix will not be added.

Warning: If your module name has special characters, such as /, set useWindow option false, will throw error.

viteExternalOlPlugin({ useWindow: false }),

// source code
import Map from 'ol/Map'
// transformed, no `const Vue = window['Vue']`
const Map = ol.Map

sourceMapOptions

The configuration item of the code sourcemap after code conversion. The library is magic-string.