作者 小舜

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我们可以安装webpack
npm 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的配置其实是很灵活的，这里只是简单提供一个思路，相信有更多的大牛有自己的项目优化方案，有更好的请在下方留言吧！

首先我要为程序员说句话，程序员们，每天想尽办法学习更多的技术，特别是前端，这也要学那也要学，好不容易都学会了，却没有把自己学到的东西发挥最大的价值，名企进不去，小企业又不需要那么多技术。怎么办呢，难道荒废自己的一身本领吗？错，我们要多想办法去发挥自己的优点，如果你不能通过自己的技术给自己带来便利或利益，那么你学再多会再多技术都是没用的。
所以呢，我这里把这个开源项目发表出来（用的苹果cms搭建的），让更有技术的兄弟能利用好自己的技术。不敢保证可以赚多少钱，但是你完全可以搭建起来放自己服务器上给自己使用或周围家人朋友使用，这也是价值的一种体现。

 

涉及版权请联系我 微信（17771806167）
 
团结就是力量。

有兴趣的朋友可以加我微信资讯呀。

有推广能力的朋友也可以加我微信资讯我哦！

wordpress项目等更多项目也可以加微信沟通哦！

很长一段时间就想把ts引入公司的项目，但总是因为一些原因被搁置。接下来有机会重构之前的rn项目，借此机会正好可以引入ts，为了使后期的项目架构更加完善，近期我会梳理rn的一些知识点和新特性。

首先来介绍下TypeScript


	
始于JavaScript，归于JavaScript
	
	

	
强大的工具构建 大型应用程序
	
	

	
先进的 JavaScript
	
具体看官网传送门,毕竟今天的重点在如何使用

1.新建一个react native项目

react-native init TSReactNativeDemo
复制代码

项目结构

├── App.js
├── __tests__
├── android
├── app.json
├── index.js
├── ios
├── node_modules
├── package.json
└── yarn.lock
复制代码

然后测试下新建的项目是否能运行

react-native run-android
react-native run-ios
复制代码

2.集成TypeScript

由于React Native Packager是通过Babel编译.js文件以及打包的，所以没办法直接使用.tsx。折中本思路就是，先用TypeScript的编译器tsc将.ts或.tsx文件编译成.js文件，再用React Native Packager编译打包即可。

首先我们安装TS依赖：

yarn add -D typescript
复制代码

然后需要安装types：

yarn add -D @types/react @types/react-native
复制代码

然后需要配置tsconfig.json，可以用如下命令生成：

tsc --init --pretty --sourceMap --target es2015 --outDir ./lib --rootDir ./ --module commonjs --jsx react
复制代码

生成的文件里面有具体每个参数的含义，也可以参考TS官网文档。

3.编写一个TS组件

还是一样的面孔，还是那个让我们魂牵梦绕的栗子—计数器(Counter.tsx)

import * as React from 'react';
import { Button, StyleSheet, Text, View } from 'react-native';

interface Props {
  name: string;
  count?: number;
  onInc?: () => void;
  onDec?: () => void;
}

export default ({ name, count = 1, onInc, onDec }: Props) => (
  <View style={styles.root}>
    <Text>
      Counter {name}: {count}
    </Text>
    <View>
      <Button title="+" onPress={onInc || (() => {})} />
      <Button title="-" onPress={onDec || (() => {})} />
    </View>
  </View>
);

// styles
const styles = StyleSheet.create({
  root: {
    alignItems: 'center',
    alignSelf: 'center',
  },
  buttons: {
    flexDirection: 'row',
    minHeight: 70,
    alignItems: 'stretch',
    alignSelf: 'center',
    borderWidth: 5,
  },
  button: {
    flex: 1,
    paddingVertical: 0,
  },
  greeting: {
    color: '#999',
    fontWeight: 'bold',
  },
});
复制代码

接下来就是利用ts编译器编译写好的.tsx个人建议在package.json中配置一下

...
"scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "tsx":"./node_modules/.bin/tsc",
    "test": "jest"
  },
...
复制代码

然后执行

npm run tsx
复制代码

由于ts默认的tsconfig.json中设置了

"outDir": "./lib"
复制代码

所以在项目根目录/lib下会生成编译后的.js文件如

lib
└── src
        ├── Counter.js
        └── Counter.js.map
复制代码

4.引用编译后的Counter.js

最后一步就是在入口js中引用编译后的文件，然后打包测试即可。

总结

整体看来，ts的引入让我们前期多了几步操作，但这些问题都可以在自动化打包部署中用脚本帮我们完成，另外对于ts不熟悉，一些习惯了js弱类型的开发者来说这样的写法无疑就是没事找事。我不反驳这种观点，举几个例子

interface Props {
  onInc?: () => void;
}
...
    <View>
      <Button title="+" onPress={onInc || (() => {})}
    />
...
复制代码

如果我这里没有规定onInc为可为空且无返回值的fun，并且在onPress中没有做undefind判断，页面在使用这个子组件的时候一旦传入的值是undefind就会导致奔溃。如果这些功能一个人做还好，多人协作，这样本可以避免的问题就会被无限放大。

ts的引入可以降低项目的维护成本，作为企业级的项目这是很有必要的

可能有人会拿ts和flow做比较，首先二者我都有使用过，总体的感觉ts更强大一点，个人建议还是使用ts

文章可能有很多不足的地方，希望大家指正，同时也希望大家可以多多交流，分享出更多的技术方案，谢谢～～



作者：百叶

链接：https://juejin.im/post/5b45bd9d51882519a62f4fe5

来源：掘金

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

一、项目初始构建

现在如果要构建一个 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 文件夹.该文件夹中就是我们可以用来发布的代码，直接将代码上传到你的服务器上就可以了。



五、参考文章

这篇文章的撰写主要是参考了这两篇文章：

基于vue、vuex、vue-router、echarts搭建的数据展示平台；
Vuejs自己的构建工具。