![8fae37bbe3fdb55581565e10f3f1ec84.png](https://i-blog.csdnimg.cn/blog_migrate/038451b0b1d43236404fa59b876ba106.png)
基于上篇的介绍,虽然有比较esri-loader、@arcgis/webpack-plugin,还是觉得有必要需要讲述一下“esri-loader”的开发模式,待大家体验后也会有更直观的感受。
本篇文章是配合react脚手架reate-react-app使用,无需自己配置复杂的Webpack的环境。废话不多说,直接上手。
项目搭建
- 安装create-react-app
npm install -g create-react-app
- 创建react应用
create-react-app是全局命令来创建react项目
- create-react-app xxx(你的项目名)
![cecc8b3efb54121b2794f6bd6e2e3d37.png](https://i-blog.csdnimg.cn/blog_migrate/3a069a22ea69b36f6ab386f74dbdf973.jpeg)
- 运行成功生成的文件目录
![b640c6040f944a69dee48645d87ae878.png](https://i-blog.csdnimg.cn/blog_migrate/e2c6cef5a2b57af6d33e6a156ef5344a.jpeg)
- npm start
![e77c581c8136082bf178a1e24e06be67.png](https://i-blog.csdnimg.cn/blog_migrate/9a11354b526a19e2e22784869f6b3f50.jpeg)
- 运行成功则会打开
![79aaf529e6b31ec3e45bd2f97cfe7b41.png](https://i-blog.csdnimg.cn/blog_migrate/4ac1ff1d35c4e7d168a557893df90561.jpeg)
- 安装esri-loader
npm i esri-loader --save
![f99042d798c60468e8d232c3bb23e2fb.png](https://i-blog.csdnimg.cn/blog_migrate/784fab70924b2ff5a0219550570ae9a1.jpeg)
- 代码开发
更多的详情见:
arcgis api 4.x for js 结合 react 入门开发系列"esri-loader"篇(附源码下载) - 小专栏xiaozhuanlan.com![a90b17fd80b5352c696b907e7d822ae9.png](https://i-blog.csdnimg.cn/blog_migrate/fb7ac546a1318540117c88eb546cb1d3.png)
文章尾部提供源代码下载,对本专栏感兴趣的话,可以关注一波
GIS之家店铺:GIS之家
GIS之家源码咨询:GIS之家webgis入门开发系列demo源代码咨询