npm 包 esri-jsapi-build 使用教程

esri-jsapi-build 是面向 ES6 的适用于 ArcGIS API for JavaScript (JSAPI) 打包工具,它可以将常规JSAPI应用程序打包成文件大小小、性能更优的应用程序。

安装

--- ------- ---------- ----------------

使用方式

在项目的根目录下创建一个 esri-bundle.js 文件,使用以下代码:

------ ---------- ---- --------------
------ --------- ---- -------------------

----- ------- - -
  ---- ------------------------------
  ---- -----
--

------------------------------------ --------------------- -- -
  ----- --- - --- -----
    -------- --------------
  ---
  ----------------- -- -----
---

------------

然后在 package.jsonscripts 中添加以下内容:

-
  -  
  ---------- -
    -------- ---- --- ----- -- ---- -----------
    -------- ----------------- ----- -------------- ----- -------------------
  --
  -
-

运行 npm run build 命令,它将生成一个给定路径的打包后的代码。

打包的输出一般是 dist/ 目录,你可以指定一个不同的输出目录,通过 --out 选项更改输出路径:

---------------- ----- -------------- ----- ------------------------

示例代码

------ ---------- ---- --------------
------ --------- ---- -------------------

----- ------- - -
  ---- ------------------------------
  ---- -----
--

------------------------------------ --------------------- -- -
  ----- --- - --- -----
    -------- --------------
  ---
  ----------------- -- -----
---

------------

总结

使用 esri-jsapi-build 可以让你更好地控制你的应用程序大小和性能。通过使用该工具,你可以在保证功能的同时提高应用程序性能、减小 bundle 的文件大小。

因此,我们建议使用它来避免出现大量的额外冗余代码,同时提高 WebGIS 应用程序的性能,让用户获得更好的体验。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/6005551181e8991b448d2457


猜你喜欢

  • npm 包 connection-modes 使用教程

    在前端开发中,我们经常需要与后端进行数据交互。而不同的数据交互方式,又需要不同的连接模式。npm 包 connection-modes 就是一个帮助前端开发者快速选择和使用不同连接模式的工具。

    2 年前
  • npm 包 grunt-chimp-sco 使用教程

    #npm 包 grunt-chimp-sco 使用教程 Grunt是一个非常流行的构建工具,可以帮助前端开发人员更轻松地管理和构建他们的项目。grunt-chimp-sco是一个可靠的扩展,它可以帮助...

    2 年前
  • npm 包 "hubot-swimlane" 使用教程

    前言 随着互联网的发展,人机交互变得越来越普遍,机器人也变得越来越流行。在这个趋势下,hubot-swimlane 就是一个可以让你用代码来实现机器人的 npm 包。

    2 年前
  • npm 包 hyps 使用教程

    前言 在开发前端项目的过程中,很多时候需要计算元素的各种尺寸和位置信息。虽然可以通过 CSS 或 JavaScript 来实现,但是计算比较复杂的时候就需要耗费很多时间和精力。

    2 年前
  • npm 包 pegakit-fonts 使用教程

    什么是 pegakit-fonts? pegakit-fonts 是一款前端使用的字体库,该库提供了众多印刷体风格的字体,包含了英文字母、数字、拉丁文、希腊文、西里尔文等多种字符。

    2 年前
  • npm 包 bower-dir 使用教程

    什么是 bower-dir? bower-dir 是一个 npm 包,用于查找 bower 包的路径。在开发前端网站时,通常需要使用一些第三方库或框架,这些库或框架通常都是通过 bower 进行安装和...

    2 年前
  • npm 包 react-scrollable-list-view 使用教程

    React 是当今最流行的前端框架之一,它可以帮助开发者构建交互性强、性能高的 web 项目。在 React 中,组件是构建 web 应用的核心模块。但是,当项目变得越来越复杂时,我们需要使用一些工具...

    2 年前
  • npm 包 colorful-logs 使用教程

    引言 在开发过程中,我们需要经常输出日志来辅助调试和开发。然而,使用默认的 console.log 往往会给输出带来很多不便和困惑,比如不同级别的日志难以区分甚至被同类日志淹没。

    2 年前
  • npm 包 cerebro-mdn 使用教程

    前言 对于前端开发者来说,Mozilla Developer Network(MDN) 无疑是一个在线技术文档库的绝佳选择。MDN在线文档库包含了Web开发的所有方面,不仅详尽全面而且时时更新,而且简...

    2 年前
  • npm 包 cerebro-rubygems 使用教程

    前言 RubyGems 是一个用于 Ruby 包管理的工具,提供了一种方便地扩展 Ruby 应用程序的方法。而 cerebro-rubygems 是一个为 cerebro 提供 RubyGems 模糊...

    2 年前
  • npm 包 prime-table-app 使用教程

    什么是 prime-table-app? prime-table-app 是一个基于 Node.js 的命令行应用程序,它可以生成一个任意大小的素数乘法表,并输出到命令行窗口或者保存到文件中。

    2 年前
  • npm 包 npm-grade-it-tools 使用教程

    npm 是 Node.js 的包管理器,可以方便地安装和管理 Node.js 的各种包。本文将介绍一款名为 npm-grade-it-tools 的 npm 包,并详细介绍如何使用它。

    2 年前
  • npm包 @deployable/asset的使用教程

    简介 在 web 开发中,我们通常需要在页面中引入静态资源,如:图片、stylesheets 和 JavaScript 文件等。通常,我们会直接在 HTML 文件中加入这些资源路径。

    2 年前
  • npm 包 @deployable/config 使用教程

    在前端开发中,配置管理是一个很重要的环节。很多时候我们需要针对不同的环境,使用不同的配置,比如开发环境、测试环境、生产环境等等。而 npm 包 @deployable/config 就是一款专门用于配...

    2 年前
  • npm 包 faogustavo-react-native-grid-component 使用教程

    在前端开发中,我们经常需要用到格子布局组件。faogustavo-react-native-grid-component 是一款基于 React Native 开发的 npm 包,它提供了多种格子布局...

    2 年前
  • npm 包 leaflet-grayscaleoverlay 使用教程

    前言 在地图应用中,黑白效果图形常常被用于突出地物信息,提高地图视觉效果。而 Leaflet 是一款广泛使用的开源 JavaScript 地图库,它提供了丰富的图层扩展插件,其中 leaflet-gr...

    2 年前
  • npm 包 markovinator 使用教程

    本文将介绍如何使用 npm 包 markovinator ,该包用于生成随机文本,其生成的文本基于 Markov 链。 什么是 Markov 链? Markov 链是一种生成随机序列的数学模型。

    2 年前
  • npm 包 pegakit-buttons 使用教程

    介绍 pegakit-buttons 是一个基于 CSS 和 JavaScript 的 UI 组件库,提供了多种样式的按钮,方便开发者快速构建 Web 应用。pegakit-buttons 可以通过 ...

    2 年前
  • npm 包 pegakit-settings-breakpoints 使用教程

    在前端开发中,响应式设计是非常重要的一个方面。而为了能够快速编写响应式布局,我们可以使用类似于 pegakit-settings-breakpoints 这样的 npm 包,来定义一些常用的断点和媒体...

    2 年前
  • 使用 npm 包 react-parallax-hover-with-borders 制作惊艳的交互特效

    本文介绍使用 react-parallax-hover-with-borders 这个 npm 包来制作图片悬停效果。这个效果可以为网站增加出色的交互特效,吸引用户的注意力,提高网站的趣味性。

    2 年前

相关推荐

    暂无文章