Develop with SuperMap iClient and Vite

Javascript has evolved so much in recent years. One of its new technology is the module system or (EcmaScript Module) ESM. This feature brings some benefit such as tree shaking, and true encapsulation to prevent pollution of global scope. The benefit and explanation are well explained here https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive

SuperMap iClient Javascript is also available as ESM which can be found at npm https://www.npmjs.com/package/@supermap/iclient-ol. In this tutorial, we will learn how to develop SuperMap iClient with frontend tooling Vite and a famous template Vitesse.

Prerequisite

It is recommended to use pnpm as a package manager in this tutorial, so you can install it with the instruction on this website https://pnpm.io/installation.

First, you can go to Vitesse-lite https://github.com/antfu/vitesse-lite

We use this template as it provides a nice boilerplate to start development with vue and vite. Then clone the repository with this command?

npx degit antfu/vitesse-lite my-vitesse-app

Second, install all the dependencies with?

pnpm install

Then, continue to install iclient openlayer and openlayer with this command?

pnpm install -D @supermap/iclient-ol [email protected]

Open the code editor, in this example I’m using VSCode. Then,?go to the src/pages folder and open the index.vue folder. We will use this as the default map page

Copy the code in the link below to replace the content of the index.vue file then saves it.

https://gist.github.com/sahitono/b0a5e722046fe4dcc5a1accf5bacf4be

Run the server dev inside terminal with this command below and browser will open with the page.

pnpm dev

As we can see, it failed to build because some iclient need some dependency. To fix this issue we can use the vite-plugin-externals to exclude the unneeded peer dependency of iClient.

Install vite-external-plugin with this command `pnpm install -D vite-plugin-externals`. Then add this command inside vite.config.ts and save it.

Now, run dev server again with `pnpm dev` and open the browser.

Voila, it is working.

So, this issue is caused by SuperMap iClient depending on some packages such as echart, etc. If we need those packages, we can just install them. But, if we don’t need it then we need to exclude it??

Note: We are looking for distributors, resellers, and partners all over the world. For any inquiry, please contact us at: [email protected].