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.
What is webpack?
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
Now we can run the webpack-dev-server to review the maps.