随着前端主流框架Vue和React的发展，大家在做WebGIS项目开发时是不是也在vue或者react项目里使用ArcGIS API for JavaScript呢，之前我们在vue或者react项目里使用ArcGIS API for JavaScript的时候一直给大家推荐"esri-loader"的AMD方式，示例代码如下所示(在这里仅仅演示React项目中的使用，Vue中的使用方式见文章后半部分)：

以上我们演示了在React项目中通过"esri-loader"使用ArcGIS API for JavaScript开发的两种方式，至于在Vue中的使用方式见下面的文章即可，里面有详细的介绍流程，文章列表如下：

以上的方式不管我们怎么优化，都有一个问题：我们在组件代码的某一个地方如果需要ArcGIS API for JavaScript中的某一个API模块的话，就需要通过"esri-loader"的loadModules方法来异步加载进来，然后才能进行相应的功能开发。这样其实很不方便我们的代码编写，我们更希望的一种方式是：如果需要什么ArcGIS API for JavaScript的API模块，我们直接在组件代码的顶部引入即可，这样在组件代码的任何地方都可以使用这个API模块了。这样的一种使用方式其实通过"esri-loader"是没法实现的，除非你对ArcGIS API for JavaScript的接口根据项目需要再进行封转。

但是随着ArcGIS API for JavaScript 4.18的发布，这种尴尬的局面被打破了，ArcGIS API for JavaScript 4.18新增了一种使用方式——@arcgis/core。通过这种方式，我们可以实现直接在组件顶部引入所需的API模块，然后在组件代码任何地方即可使用。

1、初始化一个Vue或者React项目demo(如果不会创建的话，阅读上面提到的三篇文章即可，里面有详细的介绍)。在此处为了演示我新建了一个React项目demo，项目demo新建完成后按照官网所示在项目demo根目录下打开命令行窗口，然后安装@arcgis/core这个包：

npm install @arcgis/core

安装完成后我们可以在"package.json"文件中看到安装后的版本号，其实就是API的版本号：

2、安装完成之后，我们打开项目根目录下的"package.json"文件，修改项目启动命令：

以上的启动命令中我们修改了默认的start和build命令，然后新增了一个copy命令，这条命令主要是将@arcgis/core这个包里面的静态资源拷贝到了项目的public目录下。

可以看到copy命令里面使用了ncp这个命令，所以我们要通过以下命令来全局安装一下这个工具：

npm install ncp -g

3、然后在React项目的"App.js"或者"index.js"文件中通过如下命令引入ArcGIS API for JavaScript所需的样式文件包，如下：

import '@arcgis/core/assets/esri/themes/light/main.css';

4、最后在组件代码文件顶部位置引入所需要的API模块，此处我们仅仅创建一张二维地图，所以代码直接写在了App.js文件里，如下所示：

5、写一个生命周期函数，然后在函数里面编写实例化二维地图的代码，如下：

6、最后就可以看到结果了，如下：

7、以上就是全部的关于@arcgis/core方式的介绍了。

随着@arcgis/core方式的出现，目前我们在Vue或者React项目中使用ArcGIS API for JavaScript的开发方式由以前的一种变为了目前的两种方式："esri-loader"和"@arcgis/core"。因为是新出现的使用方式，目前仅仅是测试版，但是能满足大部分的开发需求，就博主目前来开发的功能来说，没有出现过任何问题，所以大家可以放心使用。但是在@arcgis/core的方式中目前还没找到如何使用特定版本API的方式，因为目前通过"npm install @arcgis/core"安装的话，里面包含的API默认就是最新版4.18，在这里仅仅是猜测，或许通过"npm install @arcgis/[email protected]"这种方式可以安装4.17版本的API，但是没有试过，或许也不行，因为@arcgis/core是在4.18才出现的嘛，有兴趣的小伙伴可以自己试试。

最后我们来看看"@arcgis/core"的这种ES Modules方式和传统的"esri-loader"的AMD方式有什么区别吧，下图是一张官网的截图，里面大概的比较了两种方式的区别：