arcgis在webpack中的使用

时间: 2019-06-02阅读: 35标签: 模块

因为dojo本身带有模块加载的功能,会与webpack本身有冲突,所以需要借助esriLoder。


安装

npm i esri-loader


使用esri-loader

esri-loader暴露了loadCss和loadModules两个方法,分别用来加载css和js文件。
引入

import { loadCss,loadModule } from 'esri-loader'


loadCss的使用

自动加载cdn上最新版本的arcgis的css

loadCss()

加载制定路径的arcgis的css

loadCss('http://115.29.42.107:8686/410/esri/css/main.css')


loadModules的使用

代替之前的dojo,传入需要的模块与配置项,返回一个promise对象,then中的参数为返回模块,示例:

import { loadModules } from 'esri-loader';
 
// if the API hasn't already been loaded (i.e. the frist time this is run)
// loadModules() will call loadScript() and pass these options, which,
// in this case are only needed b/c we're using v3.x instead of the latest 4.x
const options = { version: '3.28' };
 
loadModules(['esri/map'], options)
  .then(([Map]) => {
    // create map with the given options at a DOM node w/ id 'mapNode'
    let map = new Map('mapNode', {
      center: [-118, 34.5],
      zoom: 8,
      basemap: 'dark-gray'
    });
  })
  .catch(err => {
    // handle any script or module loading errors
    console.error(err);
  });

option已知配置项:

option = {
    version: 4.7, // 在线加载js时使用选择版本号
    url: 'http://115.29.42.107:8686/410/init.js', // 制定路径加载arcgis的js,需指向init.js的路径
    dojoConfig: {  // 配置dojo
        baseUrl: config.dojoUrl  // 需指向dojo目录
    }
}

如果你是在线使用最新的无需配置,需要在线使用某个版本配置version

如果你部署js的api,需要配置url和dojoConfig。


module.exports与exports与require

Node.js分为原生模块 第三方模块 自定义模块,原生模块:不需要加载也不需要指定地址也不用npm下载 常见的有:第三方模块:npm下载到node_moules,不需要指定地址,自定义模块:用require引用,需要指定地址

import和export的用法

import和export语句表示什么意思?有什么区别呢?ES6模块功能主要有两个命令构成:export和import。export命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能。

Node.js模块系统 (创建模块与加载模块)

Node.js模块系统:为了让Node.js的文件相互调用,Node.js提供了一个简单的模块系统,Node.js应用程序的组成就是由模块组成基本部分,文件和模块是一一对应的。

计算一个页面内每个模块的曝光时间(停留时间)

产品希望看到投放出去的活动页,用户对其页面内的什么信息比较感兴趣,对什么信息完全不感兴趣。=> 计算页面内每模块的停留时间

Vue 中如何正确引入第三方模块

配置 webpack ProvidePlugin 全局引入,假设要使用到 jquery,那么可以通过配置 webpack 的 ProvidePlugin 的插件来全局引入;另外一种比较靠谱的方法是将第三方模块打包成插件,如我需要全局使用 echarts,那么在 src 目录下新建一个 lib

最全的前端模块化方案

模块化主要是用来抽离公共代码,隔离作用域,避免变量冲突等。将一个复杂的系统分解为多个模块以方便编码。会讲述以下内容:CommonJS、AMD 及 核心原理实现、CMD 及 核心原理实现

关于export和export default你不知道的事

网上有很多关于export和export default的文章,他们大部门都是只讲了用法,但是没有提到性能,打包等关键的东西。大家应该应该能理解import * from xxx会把文件中export default的内容都打包到文件中,而import {func} from xxx只会把文件中的func导入

export和export default的区别

export与export default均可用于导出常量、函数、文件、模块;你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式,将其导入,以便能够对其进行使用;

JS模块化_CommonJS AMD CMD UMD ES6 Module 比较

模块化开发优点:模块化开发中,通常一个文件就是一个模块,有自己的作用域,只向外暴露特定的变量和函数,并且可以按需加载。依赖自动加载,按需加载。提高代码复用率,方便进行代码的管理,使得代码管理更加清晰、规范。

ES模块基础用法及常见使用问题

ES6中引入了模块(Modules)的概念,相信大家都已经挺熟悉的了,在日常的工作中应该也都有使用。本文会简单介绍一下ES模块的优点、基本用法以及常见问题。

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全