-
2018-06-29 09:52:26
作者 小舜
SuperMap iClient for JavaScript 9D 是云GIS网络客户端开发平台。基于现代Web技术栈全新构建,是SuperMap云四驾马车和在线GIS平台系列产品的统一JS客户端。 同以往不同的是,新一代的SuperMap iClient for JavaScript进行了代码模块化,支持开发时使用 JavaScript ES6 标准的 import 语法进行模块化引入并发布了npm项目,可以通过npm进行包管理。本文就主要聊聊如何在webpack下构建一个SuperMap iClient for JavaScript工程。
什么是npm
npm是随同NodeJS一起安装的包管理工具,在工程化开发中,你可以将自己实现的功能代码封装成模块包,并上传到npm进行管理和供他人使用,它
- 允许用户从NPM服务器下载别人编写的第三方包到本地使用
- 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用
- 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用
由于新版的NodeJS已经集成了npm,所以之前npm也一并安装好了。同样可以通过输入 “npm -v” 来测试是否成功安装。命令如下,出现版本提示表示安装成功:
$ npm -v 5.6.0
SuperMap iClient for JavaScript全面集成了Openlayers,Leaflet,MapboxGL 领先的开源地图库、可视化库。其下载地址分别为
npm install @supermap/iclient-openlayers npm install @supermap/iclient-leaflet npm install @supermap/iclient-mapboxgl
什么是webpack
webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。你可以把它看做是模块打包器,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言或文件类型,并将其转换和打包为合适的格式供浏览器使用。那么为什要使用WebPack?现今的很多网页其实可以看做是功能丰富的应用,它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度,前端社区涌现出了很多好的实践方法,比如组件化、css预处理、类似TypeScript的js拓展开发语言等;这些改进确实大大的提高了我们的开发效率,但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常繁琐的;webpack这类的工具的出现就良好的解决了这类问题。首先我们就要安装webpack,
使用npm我们可以安装webpacknpm install webpack -g
webpack默认以项目根目录下的webpack.config.js作为配置文件。我们构建iClient项目主要就是修改这个文件。
配置基于Leaflet的iClient项目
首先我们要安装Leaflet和 @supermap/iclient-leaflet。
npm install leaflet @supermap/iclient-leaflet -S
其次由于使用了es6的语法,我们需要配置babel编译器以让浏览器能够兼容使用。先安装babel相关的库
npm install babel-core babel-loader babel-preset-env babel-preset-stage-3 -D
然后在webpack.config.js配置文件中设置我们需要的model.rules
{ test: /\.js$/, loader: 'babel-loader', include: [ path.resolve(__dirname, "node_modules/@supermap/iclient-common"), path.resolve(__dirname, "node_modules/@supermap/iclient-leaflet"), path.resolve(__dirname, "node_modules/elasticsearch"), ] }
@supermap/iclient-common是iclient-leaflet的基础库,安装iclient-leaflet时会自动安装,elasticsearch也是client-leaflet的依赖库之一;由于都是采用了es6语法编写所以都需要用babel进行编译,配置好后就可以通过import方式引入啦
import L from 'leaflet'; import {tiledMapLayer} from '@supermap/iclient-leaflet';
@supermap/iclient-leaflet全都采用了模块化方式进行封装,所以可以使用ES6的解构语法,按需引入tiledMapLayer。iclient-openlayers,iclient-mapboxgl项目配置方法和iclient-leaflet配置方法也是类似,这里就不做详述。
配置基于iclient-classic的项目
iclient-classic前身是SuperMap iClient for JavaScript ,在8C基础上增加了9D的相关新功能特性发布到npm上;如果您在项目中直接引入iclient-classic并进行开发会报错。
import '@supermap/iclient-classic'; var map = new SuperMap.Map("map", {});//报错 未找到SuperMap
由于iclient-classic是以SuperMap iClient for JavaScript 8c为基础的所以还需要引入SuperMap iClient for JavaScript 8c的相关库;我们先在webpack配置中给src目录配置别名
resolve: { alias: { '~':path.resolve(__dirname,'src') }}
然后在超图技术资源中心下载iClient for JavaScript 8c开发包(下载地址http://support.supermap.com.cn/DownloadCenter/DownloadPage.aspx?id=666),并将其中lib文件夹拷贝到src目录中同时更名为icl8c(文件夹名字随意,这里只是做区分),然后在主入口js文件中将8c的库引入进来
import '~/icl8c/SuperMap-8.1.1-14620' import classic from '@supermap/iclient-classic'; var map = new SuperMap.Map("map", {...});
通过webpack-dev-server运行起来就可以看到地图啦!
需要注意一点:webpack编译后的文件需要通过http方式访问才能出图哦。webpack的配置其实是很灵活的,这里只是简单提供一个思路,相信有更多的大牛有自己的项目优化方案,有更好的请在下方留言吧!
更多相关内容 -
API项目:使用Vanilla Javascript构建的Web应用程序,用于跟踪卡路里的增长,并利用Github-api进行Github...
2021-02-04 07:15:12这些Web应用程序是使用Vanilla Javascript构建的,用于跟踪卡路里的增加,并使用Github-api来搜索用户数据和用户数据,使用Github查找程序。 拉取请求 如果您找到其他/更好的方法来解决应用程序中的问题,那就... -
gem-drop:HTML5益智游戏是最后一年项目的一部分,使用Phaser.js中的Javascript构建
2021-04-29 19:44:22Gem Drop是一款HTML5益智游戏,灵感来自经典街机游戏,例如Dr. Mario和Tetris。 该项目是我在莱斯特大学获得学位的... 它利用Javascript和Phaser.js-和PHP取得在线高分。 存储库中包含完整的源代码和所有随附的资产。 -
基于Node.js的JavaScript项目构建工具gulp的使用教程
2020-11-26 02:02:51gulp是新一代的前端项目构建工具,你可以使用gulp及其插件对你的项目代码(less,sass)进行编译,还可以压缩你的js和css代码,甚至压缩你的图片,gulp仅有少量的API,所以非常容易学习。 gulp 使用 stream 方式处理... -
visualizationDemo:一个利用HTML5构建可视化系统的课程项目
2021-06-22 01:03:37可视化演示。 全球教育统计可视化工具 一个通过 HTML5 构建可视化系统的课程项目。... -- 本项目使用构建可视化系统。 数据来源是。 您可以在查看演示。 首选浏览器是 Safari / Chrome / FireFox。 -
PC-Builder-Webapp:利用三年级项目-React,HTML,CSS,Javascript和Express.js
2021-05-28 14:22:34该项目是通过引导的。 可用脚本 在项目目录中,可以运行: npm start 在开发模式下运行应用程序。... 此命令将从项目中删除单个构建依赖项。 而是将所有配置文件和传递依赖项(Webpack,Babel,ESLint等)直接复 -
ProgrammingEssentials:利用各种技术构建完全堆叠的应用程序以弄湿脚的项目
2021-04-02 13:11:28编程必备 该项目旨在利用各种技术来构建完全堆叠的应用程序。 -
Serverless-JavaScript-Projects:无服务器JavaScript项目[视频],由Packt发行
2021-05-27 10:03:27先进JavaScript技能可提高应用程序的可扩展性为您的应用程序使用不同的Lambda函数说明和导航假设知识要充分利用本课程所涵盖的范围,您需要: 本课程适用于希望构建无服务器应用程序以满足其业务需求的JS开发人员。 -
-Building-Declarative-Apps-using-Functional-[removed]使用功能性JavaScript构建声明式应用程序,由Packt...
2021-05-27 03:45:20使用功能性JavaScript构建声明性应用[视频] 这是发行的的代码存储库。 它包含从头到尾完成视频课程所需的所有支持项目文件。 关于视频课程 带有功能性JavaScript的声明性Webapps通过构建和连接前端Webapp的各种组件... -
bloxui:HTML,CSS和JavaScript组件,用于构建基于浏览器的现代用户界面
2021-05-06 00:30:20Blox用户界面HTML,CSS和JavaScript组件,用于构建基于浏览器的现代用户界面。使用Blox UI Blox UI(blox)非常特定于我们在Impact Marketing Specialists此处构建的应用程序。 但是,这并不意味着您无法利用我们在... -
该模块专注于利用JavaScript的语言,工具和技术,以教育游戏的形式开发交互式前端站点。
2021-03-10 04:25:25英国手语手指拼写:-一个教育性JavaScript记忆配对游戏作为Code Institute Milestone 2项目的一部分构建:交互式前端开发模块目录概述当我接近第二个里程碑项目时,该项目是从学习JavaScript和Interactive Front-End... -
利用arttemplate和轻量路由配合webpack多页打包定制运营活动项目构建方案
2019-08-11 02:41:59利用art-template和轻量路由配合webpack多页打包定制运营活动项目构建方案 -
Sauce:Sauce是一个简单JavaScript框架,可用于将复杂的过渡作为CSS动画进行构建
2021-05-13 12:55:03),用于构建常规CSS过渡无法实现的复杂过渡。 假设您要使用复杂的效果,例如只有通过弹性或反弹缓和才能实现的效果? 或者,您是否想利用其中一个属性的延迟来同时为两个不同的属性设置动画? 好吧,我发现您可以... -
js Javascript递归构建菜单 展开式菜单的构建利用接口的数据
2022-01-30 21:00:24js Javascript递归构建菜单 展开式菜单的构建利用接口的数据js js Javascript递归构建菜单 展开式菜单的构建利用接口的数据
构建导航菜单
// 使用数据库中的结点列表构建导航菜单 // 结点结构如下 // interface Node { // /** 导航菜单结点 id */ // id: number // /** 导航菜单父结点 id (parent id),根结点 pid 为 -1 */ // pid: number // /** 菜单名称 */ // name: string // /** 子菜单列表 */ // children?: Node[] // }
// 从数据库取出的结点列表数据 let data = [ { id: 0, pid: -1, name: '面试' }, { id: 1, pid: 0, name: '计算机基础知识及原理' }, { id: 2, pid: 0, name: '前端技能' }, { id: 3, pid: 0, name: '综合素质' }, { id: 4, pid: 1, name: '编码' }, { id: 5, pid: 1, name: '操作系统' }, { id: 6, pid: 1, name: '网络' }, { id: 7, pid: 1, name: '数据结构' }, { id: 8, pid: 2, name: 'js' }, { id: 9, pid: 2, name: '异步' }, { id: 10, pid: 2, name: '项目' }, { id: 11, pid: 3, name: '学习能力' }, { id: 12, pid: 3, name: '解决问题能力' }, ]
应该返回以下的对象(省略部分结点)
{ id: 0, pid: -1, name: '面试', children: [ { id: 1, pid: 0, name: '计算机基础知识及原理', children: [ { id: 4, pid: 1, name: '编码' }, { id: 5, pid: 1, name: '操作系统' }, // ... ] }, { id: 2, pid: 0, name: '前端技能', children: [ // ... ] }, { id: 3, pid: 0, name: '综合素质', children: [ // ... ] } ] }
直接上代码 利用递归找到父节点
let data = [{ id: 0, pid: -1, name: '面试' }, { id: 1, pid: 0, name: '计算机基础知识及原理' }, { id: 2, pid: 0, name: '前端技能' },//...省略数据 ] let mp = {//全局变量 递归使用 也可以传参 }; function build(nodes) { // 请实现这个函数,要求时间复杂度 O(n) // (可以直接修改结点列表 data 中的各个结点,如增加 children 属性) //console.log(nodes); for (node of nodes) { if (node['pid'] == -1) { mp.id=node.id; mp.pid=node.pid; mp.name=node.name; mp.children = []; nodes.splice(0, 1); console.log(mp); nodes=buildtree(mp, nodes); } } console.log(nodes); } function buildtree(itemtreenode, itemlist) { if (itemlist.length === 0) { return; } var j = 0 for (j = 0, len = itemlist.length; j < len; j++) { if (itemtreenode.id === itemlist[j].pid) { var node = { id: itemlist[j].id, pid:itemlist[j].pid, name: itemlist[j].name, children: [] } console.log(node); itemtreenode.children.push(node) buildtree(node, itemlist) } } //console.log(mp) return mp; } build(data)
效果如下
-
Isomorphic-JavaScript-with-MEVN-Stack:带MEVN堆栈的同构JavaScript [视频],由Packt发布
2021-05-28 01:02:39利用JavaScript生态系统的功能来运行,构建和测试全栈应用程序。 本课程将指导您使用同构JavaScript框架构建全栈应用程序。 您将使用JavaScript中的MEVN堆栈来构建Web应用程序。 本课程将带您进行端到端的旅程,以... -
jasce:JavaScript 编译引擎
2021-06-22 12:29:58JasCe:JavaScript 编译器引擎该项目处于早期开发阶段! JasCe( JavaScript Compiler Engine )是一个利用编译器注释的 JavaScript 编译器,类似于著名的'use strict'; . 该程序将所有源代码编译成一个单独的 ... -
TP5(thinkPHP5)+JavaScript构建的电影网站模板,程序员们利用好开源项目,你也可以有额外收入。
2019-03-31 20:04:04首先我要为程序员说句话,程序员们,每天想尽办法学习更多的技术,特别是前端,这也要学那也要学,好不容易都学会了,却没有把自己学到的东西发挥最大...所以呢,我这里把这个开源项目发表出来(用的苹果cms搭建的)...首先我要为程序员说句话,程序员们,每天想尽办法学习更多的技术,特别是前端,这也要学那也要学,好不容易都学会了,却没有把自己学到的东西发挥最大的价值,名企进不去,小企业又不需要那么多技术。怎么办呢,难道荒废自己的一身本领吗?错,我们要多想办法去发挥自己的优点,如果你不能通过自己的技术给自己带来便利或利益,那么你学再多会再多技术都是没用的。
所以呢,我这里把这个开源项目发表出来(用的苹果cms搭建的),让更有技术的兄弟能利用好自己的技术。不敢保证可以赚多少钱,但是你完全可以搭建起来放自己服务器上给自己使用或周围家人朋友使用,这也是价值的一种体现。
涉及版权请联系我 微信(17771806167)
团结就是力量。
有兴趣的朋友可以加我微信资讯呀。
有推广能力的朋友也可以加我微信资讯我哦!
wordpress项目等更多项目也可以加微信沟通哦! -
lesson6_javascript3
2021-05-01 13:55:42项目名称:照相馆申请 ... 利用Javascript BOM(浏览器对象模型)指定浏览器的对象,属性和方法以及它们之间的关系。 文档对象模型(DOM)表示浏览器中文档的内容,并具有自己的模型,因为动态网页的内容可能会更改。 -
harry_potter_quintus_game:使用 Quintus 构建的哈利波特游戏
2021-06-21 20:11:52哈利波特游戏是一款有趣、易玩的 Quintus 风格游戏。 当心摄魂怪,捕捉金色... 任务是一个 72 小时的前端项目,用于学习和利用外部 JavaScript 库。 我使用 Quintus、HTML 和 Tiled Map Editor 构建了游戏。 网站: : -
Hands-On-Robotics-with-[removed]Packt发行的《具有JavaScript的动手机器人》
2021-05-28 01:00:15本书涵盖以下激动人心的功能: 在Raspberry Pi上安装并运行Node.js和Johnny-Five 组装,编码和运行LED项目利用JavaScript库构建令人兴奋的机器人使用传感器收集您周围世界的数据使用伺服和电机使您的项目顺利进行为... -
kimbo.js:ECMAScript 5仅兼容JavaScript库
2021-04-30 09:06:42当然,只有在现代浏览器中才能利用惊人的本机速度,而不必再为较旧的浏览器添加额外的字节。 尝试一下,立即开始使用功能强大的轻量级现代图书馆。 API文档 请以了解使用其类似jQuery的API有多么容易。 建造 为了... -
spa-build:单页应用程序构建
2021-07-11 14:01:01JavaScript 捆绑。 了解 ES6、AMD 和 CommonJs 人类可读的开发构建和生产就绪的 dist 构建。 将 NPM 或 Bower 用于前端包管理器的选项 利用实时加载推送热门内容的“观看”操作 用于分发的图像压缩 应有尽有 一个 ... -
利用 vue-cli 构建一个 Vue 项目
2017-08-13 23:05:23首先,咱们先来全局安装 vue-cli ,打开命令行工具,输入以下命令:$ npm install -g vue-cli然后,利用 vue-cli 构建一个 Vue 项目:$ vue init <template-name> <project-name># 例如: $ vue init webpac一、项目初始构建
现在如果要构建一个 Vue 的项目,最方便的方式,莫过于使用官方的 vue-cli 。
首先,咱们先来全局安装 vue-cli ,打开命令行工具,输入以下命令:
$ npm install -g vue-cli
然后,利用 vue-cli 构建一个 Vue 项目:
$ vue init <template-name> <project-name> # 例如: $ vue init webpack my-project
这行代码其实就是从 Github 的 Vue 官方项目模板库—— vuejs-templates 组织拉取代码,并设置该项目的名称。该命令是帮助大家通过选择应用比较广泛的几种官方项目模板库中的一种和可配置的几个步骤快速构建我们的应用。然而,这些模板并不限制你自己对于使用 Vue.js 的架构组织和选择类库。
注意:这里的第三个参数代表的是几种官方项目模板库中的一种,今天只粗略的介绍其中的四种:
- browserify——全功能的 Browserify + vueify ,包括热加载,静态检测,单元测试等;
- browserify-simple——一个简易的 Browserify + vueify ,以便于快速开始;
- webpack——全功能的 Webpack + vueify ,包括热加载,静态检测,单元测试等;
- webpack-simple——一个简易的 Webpack + vueify ,以便于快速开始。
不同的模板有不同的用处: 简易的可以更快速的开发,全功能适合有野心的(大型、扩展性很高的–个人认为)应用。他们的共同点就是,都支持 .vue 文件类型的组件方式。意味着任何只要符合 .vue 形式的第三方的组件都可以被使用,只需要发布在 npm 上。
基于官方项目模板构建自己特殊的应用?
作为自由开发者,你如果不喜欢上面的模板,你可以
fork
这些模板,修改它们以符合你自己特殊要求(甚至还可以创建一个你自己的模板),通过 vue-cli 命令使用。$ vue init username/repo my-project
安装依赖
进入刚创建的工程文件夹,安装依赖:
# 安装依赖 $ cd <project-name> $ npm install
到这里,一个 Vue 工程就初步构建完成了。
二、项目文件夹及文件简介
先简单介绍几个第一层的文件夹:
- build 中是官方项目模板的基本配置文件,在例子中是 webpack :开发环境配置文件,生产环节配置文件等;
- node_modules 是各种依赖模块;
- src 中是 vue 组件及入口文件;
- static 中放置静态资源文件;
- index.html 是页面入口文件。
App.vue 文件
先来看看 src 下的 App.vue 文件中的这个代码段:
<template> <div id="#app"> <img src="./assets/logo.png"> <router-view></router-view> </div> </template>
这个代码段中的
<router-view>
组件是 vue-router 中渲染路径匹配到的视图组件。牵扯到路径,也就是路由,又由于是 Vue 单页面工程,所以自然少不了 vue-router 。那咱们自然要用以下命令来先安装 vue-router :$ npm install --save vue-router
main.js 文件
安装好 vue-router 后,那到哪里配置具体的路由呢?答案是 src 文件夹下面的 main.js 文件中,可以这么配置路由:
import Vue from 'vue'; import App from './App'; import VueRouter from 'vue-router'; Vue.use(VueRouter); // 定义路由组件 const Worldcloud = require('./components/cloud.vue'); const Building = require('./components/building.vue'); // 定义路由,配置路由映射 const routes = [ { path: '/', redirect: '/wordcloud' }, { path: '/wordcloud', component: Worldcloud }, { path: '/building', component: Building } ]; // 创建router实例 const router = new VueRouter({ routes }); new Vue({ el: '#app', template: '<App/>', components: { App }, router })
从路由映射的配置中可以看出,访问网站的根路由会直接跳转到 /wordcloud 组件页面下。
三、组件与其他插件
ok,到这步就可以开始写页面组件了,到 src 文件夹下的 components 文件夹下面,去定义自己的组件吧~
其他插件
如果想使用数据可视化库—— echarts ,可以输入以下命令来安装:
$ npm install --save echarts
如果想实现状态管理的功能,比如:登录功能。就需要安装 vuex ,可以输入以下命令来安装:
$ npm install --save vuex
如果想使用 ES6 中新的 API ,而不仅仅是利用 Babel 转译新的 JavaScript 句法,那就需要安装 babel-polyfill 为当前环境提供一个垫片,否则会报错。有哪些属于 ES6 中新的 API 呢?比如:Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象,以及一些定义在全局对象上的方法。可以输入以下命令来安装 babel-polyfill :
$ npm install --save babel-polyfill
四、项目预览与发布
在命令行中输入
$ npm run dev
就可以预览你也写的页面了。事实上,我们一般都是先输入以上命令开启实时预览,然后再开始开发的,即它可以监听我们开发中的改动。
项目可以在本地预览了,但是要怎么发布到网上呢?首先,在命令行中输入
$ npm run build
会生成一个 dist 文件夹.该文件夹中就是我们可以用来发布的代码,直接将代码上传到你的服务器上就可以了。
五、参考文章
这篇文章的撰写主要是参考了这两篇文章:
-
ExpenseCalcJS:使用Vanilla JS,HTML,CSS构建费用计算器应用程序
2021-05-25 21:13:15这是使用HTML5,CSS和JavaScript构建的简单的预算/费用计算器。 它利用Vanilla JavaScript来构建此小型应用程序。 检出GH页面以玩该应用程序。 屏幕截图 建于 发展: 入门 要启动并运行本地副本,请遵循以下简单... -
lib-js:自动编码标准库JavaScript(Web)绑定
2021-03-30 15:24:07您可以在Autocode上利用任何服务,而无需安装任何其他依赖项,并且在将服务部署到Autocode标准库后,您将拥有一个基于Web的预先构建的SDK。 lib . yourUsername . hostStatus ( { name : 'Dolores Abernathy' } , ... -
Web前端开发技术-JavaScript的诞生和发展.pptx
2022-07-07 16:16:07基于Angular构建的响应式移动Web项目 使用WePY框架并结合ES 6语法开发小程序电商项目 基于Vue.js全套技术栈开发出来的网页端后台管理系统 初识JavaScript 2.JavaScript的诞生和发展 初识JavaScript 2.JavaScript的... -
JavaScript 对引擎、运行时、调用堆栈的概述理解
2021-01-19 17:15:13随着JavaScript越来越流行,越来越多的团队广泛的把JavaScript应用到前端、后台、hybrid 应用、嵌入式等等领域。...如果一个项目越来越依赖 JavaScript,这就意味着开发人员必须利用这些语言和生态系统提供更深层次的 -
random-number-generator:使用HTML,CSS和JavaScript的随机数生成器网站
2021-05-07 09:26:35项目动机我想构建一个随机数生成器,因为当我不知道在给定选择中要选择什么时,我会利用它们。 这样做的原因是因为选择过多。 过度选择是一种认知障碍,当人们面对许多选择时,他们很难做出决定。 我的目标是利用我... -
jsx-for-web-components:WIP:基本的JSX工厂,用于利用Web组件的项目中
2021-02-06 17:49:19WIP:基本的JSX工厂,可用于利用项目 产品特点 准备好 支持 要求 可以将JSX转换为JSX工厂JavaScript调用的编译器 安装 yarn add jsx-for-web-components 入门 我们将使用TypeScript和为浏览器进行构建。 让我们从... -
eslint-config-mx:我们的javascript eslint规则和样式
2021-05-28 17:58:20像这样利用.eslintrc的extends功能: { "extends" : "mx" } 如果您需要应用任何自定义规则,只需将其添加到extends属性下方的.eslintrc文件中: { "extends" : "mx" , "rules" : { "space-infix-ops" : 0 ...