arcgis api + webpack前端工程化开发

前言

公司里的项目都涉及到地图方面到开发，使用到是Arcgis api for js框架，目前Arcgis api for js采用到是dojo框架开发，内部采用AMD加载方式和模块管理机制。项目内的组件利用dojo的widget进行开发，其中dojo的模块使用require([])按需加载。本来使用dojo开发一张图系统就可以，但是这种模式开发，不免让我们错失了许多的MVVM模式开发带来的优势。

• 无法使用ES6
• 没有部署模块热加载功能，代码存在缓存，常常需要清除缓存后手动进行刷新加载
• 没有采用eslint代码规范工具，无法统一代码的风格
• 部署的时候，必须手动修改版本信息，才能达到清除缓存的效果
• 代码上传时没有经过压缩，导致首屏加载时间较长
• 跨组件之通信过多采用dojo/Topic,window变量，容易引起命名冲突，不好管理
• 没有采用CSS预加载器(less,sass,stylus…)，写css比较费力，难以复用和管理

关于dojo和vue

dojo
1.非MVC、MVVM框架
2.对view层操作采用直接操作dom的方式
3.dojo提供widget基本类编写组件，其组件面向对象编程
4.另外dojo非常的重，是一个巨型工具包

vue
1.现代的MVVM框架
2.数据驱动视图层，对view层操作无需直接操作dom
3.双向数据绑定
4.轻量、组件化，申明式写法
5.vue-loader完美利用webpack实现HRM（热替换）
6.内部采用virtual-dom和diff算法，性能良好
7.拥有vue-router、vuex，更好的管理单页面应用
8.社区完善，学习资料多

解决办法

针对以上的问题，是时候引入webpack构建前端工程了

• 引入Babel编译ES6+
• 对代码进行压缩
• 引入Less预编辑器

需要解决的问题

如果我们想使用webpack进行打包，需要解决如下的问题：
1.Arcgis jsapi(dojo)目前采用AMD加载机制，若在模块中使用import XXX from XXX的写法，用webpack默认打包方式去打包，框架无法识别
2.如何实现import esriMap from "esri/map"，进而统一采用这种方式去编写
3.如何接入流行的前端框架，去维护我们项目的View层
4.如何引入各类loader

修改webpack配置

1.利用webpack将模块打包成AMD模块，以便arcgis api框架可以识别

module.exports = {
  output: {
    libraryTarget: "amd" // 解决amd模块问题
  }
};

2.对require的模块不做打包，统一用require.js进行加载。

module.exports = {
  // 末尾添加即可 (其实顺序不重要)
  externals: [
    // 当遇到引入包含dojo/esri/dgp等模块时，不处理
    function(context, request, callback) {
      if (
        /^dojo/.test(request) ||
        /^dojox/.test(request) ||
        /^dijit/.test(request) ||
        /^esri/.test(request)
      ) {
        return callback(null, "amd " + request);
      }
      callback();
    }
  ]
};