基于webpack构建SuperMapiClientforJavaScript9D项目

作者 小舜

SuperMap iClient for Javascript 9D 是云GIS网络客户端开发平台。基于现代Web技术栈全新构建&＃xff0c;是SuperMap云四驾马车和在线GIS平台系列产品的统一JS客户端。 同以往不同的是&＃xff0c;新一代的SuperMap iClient for Javascript进行了代码模块化&＃xff0c;支持开发时使用 Javascript ES6 标准的 import 语法进行模块化引入并发布了npm项目&＃xff0c;可以通过npm进行包管理。本文就主要聊聊如何在webpack下构建一个SuperMap iClient for Javascript工程。

什么是npm

npm是随同NodeJS一起安装的包管理工具&＃xff0c;在工程化开发中&＃xff0c;你可以将自己实现的功能代码封装成模块包&＃xff0c;并上传到npm进行管理和供他人使用&＃xff0c;它

• 允许用户从NPM服务器下载别人编写的第三方包到本地使用
• 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用
• 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用

由于新版的NodeJS已经集成了npm&＃xff0c;所以之前npm也一并安装好了。同样可以通过输入 “npm -v” 来测试是否成功安装。命令如下&＃xff0c;出现版本提示表示安装成功:

$ npm -v
5.6.0


SuperMap iClient for Javascript全面集成了Openlayers&＃xff0c;Leaflet&＃xff0c;MapboxGL 领先的开源地图库、可视化库。其下载地址分别为

npm install &＃64;supermap/iclient-openlayersnpm install &＃64;supermap/iclient-leafletnpm install &＃64;supermap/iclient-mapboxgl


什么是webpack

webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析&＃xff0c;然后将这些模块按照指定的规则生成对应的静态资源。你可以把它看做是模块打包器&＃xff0c;分析你的项目结构&＃xff0c;找到Javascript模块以及其它的一些浏览器不能直接运行的拓展语言或文件类型&＃xff0c;并将其转换和打包为合适的格式供浏览器使用。那么为什要使用WebPack&＃xff1f;现今的很多网页其实可以看做是功能丰富的应用&＃xff0c;它们拥有着复杂的Javascript代码和一大堆依赖包。为了简化开发的复杂度&＃xff0c;前端社区涌现出了很多好的实践方法,比如组件化、css预处理、类似TypeScript的js拓展开发语言等&＃xff1b;这些改进确实大大的提高了我们的开发效率&＃xff0c;但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常繁琐的&＃xff1b;webpack这类的工具的出现就良好的解决了这类问题。首先我们就要安装webpack&＃xff0c;
使用npm我们可以安装webpack

npm install webpack -g


webpack默认以项目根目录下的webpack.config.js作为配置文件。我们构建iClient项目主要就是修改这个文件。

配置基于Leaflet的iClient项目

首先我们要安装Leaflet和 &＃64;supermap/iclient-leaflet。

npm install leaflet &＃64;supermap/iclient-leaflet -S


其次由于使用了es6的语法&＃xff0c;我们需要配置babel编译器以让浏览器能够兼容使用。先安装babel相关的库

npm install babel-core babel-loader babel-preset-env babel-preset-stage-3 -D


然后在webpack.config.js配置文件中设置我们需要的model.rules

{test: /\.js$/,loader: &＃39;babel-loader&＃39;,include: [path.resolve(__dirname, "node_modules/&＃64;supermap/iclient-common"),path.resolve(__dirname, "node_modules/&＃64;supermap/iclient-leaflet"),path.resolve(__dirname, "node_modules/elasticsearch"),]
}


&＃64;supermap/iclient-common是iclient-leaflet的基础库&＃xff0c;安装iclient-leaflet时会自动安装&＃xff0c;elasticsearch也是client-leaflet的依赖库之一&＃xff1b;由于都是采用了es6语法编写所以都需要用babel进行编译,配置好后就可以通过import方式引入啦

import L from &＃39;leaflet&＃39;;
import {tiledMapLayer} from &＃39;&＃64;supermap/iclient-leaflet&＃39;;


&＃64;supermap/iclient-leaflet全都采用了模块化方式进行封装&＃xff0c;所以可以使用ES6的解构语法&＃xff0c;按需引入tiledMapLayer。iclient-openlayers,iclient-mapboxgl项目配置方法和iclient-leaflet配置方法也是类似&＃xff0c;这里就不做详述。

配置基于iclient-classic的项目

iclient-classic前身是SuperMap iClient for Javascript &＃xff0c;在8C基础上增加了9D的相关新功能特性发布到npm上&＃xff1b;如果您在项目中直接引入iclient-classic并进行开发会报错。

import &＃39;&＃64;supermap/iclient-classic&＃39;;
var map &＃61; new SuperMap.Map("map", {});//报错 未找到SuperMap


由于iclient-classic是以SuperMap iClient for Javascript 8c为基础的所以还需要引入SuperMap iClient for Javascript 8c的相关库;我们先在webpack配置中给src目录配置别名

resolve: {alias: {&＃39;~&＃39;:path.resolve(__dirname,&＃39;src&＃39;)
}}


然后在超图技术资源中心下载iClient for Javascript 8c开发包(下载地址http://support.supermap.com.cn/DownloadCenter/DownloadPage.aspx?id&＃61;666)&＃xff0c;并将其中lib文件夹拷贝到src目录中同时更名为icl8c(文件夹名字随意&＃xff0c;这里只是做区分)&＃xff0c;然后在主入口js文件中将8c的库引入进来

import &＃39;~/icl8c/SuperMap-8.1.1-14620&＃39;
import classic from &＃39;&＃64;supermap/iclient-classic&＃39;;
var map &＃61; new SuperMap.Map("map", {...});


通过webpack-dev-server运行起来就可以看到地图啦&＃xff01;
需要注意一点:webpack编译后的文件需要通过http方式访问才能出图哦。

webpack的配置其实是很灵活的&＃xff0c;这里只是简单提供一个思路&＃xff0c;相信有更多的大牛有自己的项目优化方案&＃xff0c;有更好的请在下方留言吧&＃xff01;