Build SuperMap iClient for Javascript Project Based on Webpack

19 Jul,2018

SuperMap iClient for JavaScript 9D is the development platform for Cloud GIS network client. The new generation of SuperMap iClient for JavaScript has modular code. It supports the standard “import” syntax of JavaScript ES6 and introduces the NPM project. The following parts will talk about how to build SuperMap iClient for JavaScript project based on webpack.

What is NPM?

NPM is a package management tool which is installed with NodeJS. In engineering development, you can encapsulate your own function code into module package and upload it to NPM for management and for the other people to use. NPM has the functions bellow:

- It allows users to download the third party package written by others from the NPM server to local use.

- It allows users to download and install command line programs written by others from NPM server to local use.

- It allows users to upload their own packages or command line programs to NPM servers for others to use.

You can input “npm-v” to check the installation result. If the result shows as the picture bellow, that means the installation is successful.

SuperMap iClient for JavaScript integrated the leading open source map libraries and visualization libraries of Openlayers, Leaflet and MapboxGL. The addresses bellow are for downloading:

What is webpack?

Webpack is a loading and packaging tool for the front-end resources. It will carry out static analysis according to the dependencies of modules, and then generate those modules to the corresponding static resources according to specific rules. You can take webpack as a packager. It can analyze the project structure, find the JavaScript modules and other expansion languages or file types that some browsers can not run directly and convert and pack them to a suitable format for the browsers to use.

Then, why do we use webpack? We can take the web pages as the applications with various of functions. They have complex JavaScript codes and lots of dependent packages. To simplify those codes and packages, there appears many good practice methods, such as componentization, CSS preprocessing, JS development language which is similar to TypeScript. These improvements have greatly improved our development efficiency. However, the files developed by those methods always need extra processing to make them identified by the browsers and the manual processing progress is also very complicated. Webpack is the right tool to solve those problems.

First, we use NPM to install webpack

Webpack default webpack.config.js under the project root directory as the configuration file.

Configure the iClient project based on Leaflet

First, we need to install eaflet and @supermap/iclient-leaflet

Second, because we use the es6 syntax, we need to configure the babel compiler to be compatible with the browsers. The picture bellow shows how to install the babel related library.

Then, we can set the model.rules we need in the webpack.config.js configuration file.

@supermap/iclient-common is the basic library for iclient-leaflet, it will be automatically installed with iclient-leaflet. Also, elasticsearch is one of the dependent libraries for iclient-leaflet. Both of them are using es6 syntax, so we need to configure the babel compiler and them import.

@supermap/iclient-leaflet is packaged in a modular way, so you can use es6 syntax to introduce tiledMapLayer on demand. The configuration method of iclient-openlayers and iclient-mapboxgl is the same as the configuration method of iclient-leaflet.

Configure the projects based on iclient-classic

The iclient-classic grew out of SuperMap iClient for JavaScript. It has more new functions in SuperMap 9D version. The iclient-classic is based on SuperMap iClient for JavaScript 8C, so there will be error message if you import it directly.

Therefore, we need to import the SuperMap iClient for JavaScript 8C related libraries. First, we set alias for src catalog in webpack configuration.

Then download the iClient for JavaScript 8C SDK from SuperMap technical support center (via http://support.supermap.com.cn/DownloadCenter/DownloadPage.aspx?id=666), and change the name of “lib” file to “icl8c” and copy to src catalog. And then import the 8C libraries.