RuoYi框架结合OpenLayer实现地图模块

前言

有一个需求需要使用RuoYi框架搭配OpenLayer使用。于是记录一下遇到的问题。

eslint

首先在安装包的过程中，就已经出现包冲突了。

报错信息主要是在说eslint-loader的版本与eslint的版本不兼容。在处理eslint-loader版本信息的时候，依赖eslint的版本应该在（含）到（不含）之间。

所以，修改package.json文件，将eslint的版本从降到。

改了这个之后，npm install命令不再报错。

OpenLayer

OpenLayer是用于在web页面上展示地图的高效前端框架。在结合RuoYi的时候发现npm install命令并没有报错，但是运行npm run dev命令报错。

报错信息：

Module parse failed: Unexpected token (165:61)                                                                                                                    
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|      * @private                                                                                                                                                 
|      */                                                                                                                                                         
>     this.hitDetectionEnabled_ = options.hitDetectionEnabled ?? true;                                                                                            
|                                                                                                                                                                 
|     const customAttributes = options.attributes

可以看到将报错信息指向了

this.hitDetectionEnabled_ = options.hitDetectionEnabled ?? true;

乍一看是没有任何问题的，但是具体而言的话就是这个命令：??。

这是什么东西呢？是ES2020新特性中的一个符号，作用是：如果前面一个值是null或者undefined，那就输出后面一个值。

于是，问题就在这里了，RuoYi的各类框架并不支持ES2020。具体是哪一个，并不清楚。为了稳一手，将OpenLayer的版本降下去。

经测试，最大支持版本是，从以上的版本都是ES2020的了。

所以，修改package.json文件，将ol的版本从最新的降到。

成功

最后，我们使用npm run dev就能够运行了。