vue-cli项目异常-npm包需要被 babel-loader 编译

问题

项目启动后异常日志

./node_modules/@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.js 1:4153
Module parse failed: Unexpected token (1:4153) 
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
...

| //# sourceMappingURL=leaflet-geoman.js.map
| 

 @ ./src/hook/leafletjs/drawTools.js 3:0-40
 @ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader-v16/dist??ref--1-1!./src/views/snzw/patrolMap/index.vue?vue&type=script&setup=true&lang=js
 @ ./src/views/snzw/patrolMap/index.vue?vue&type=script&setup=true&lang=js
 @ ./src/views/snzw/patrolMap/index.vue
 @ ./src/router/index.ts
 @ ./src/main.ts
 @ multi (webpack)-dev-server/client?http://192.168.0.10:8010&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts

问题分析

日志指出 /src/hook/leafletjs/drawTools.js 文件内部出现错误，查看该文件

可以看引入该包引起的错误，由编译失败的日志可以看出 @geoman-io/leaflet-geoman-free 包内 1:4153 位置出现错误，日志标注为 webpack loader 无法正常处理该文件，看一下错误具体位置.

结论

根据错误位置可以得出，该包内部使用了 ECMA2020 的链式语法，该语法无法正常被解析。正常情况项目中的 js 文件会被 babel-loader 解析，但是该文件是 node_modules中的，所以 vue-cli项目内的 babel-loader 会默认忽略该目录中的文件不进行编译（请查阅 vue-cli 文档）。

解决

• 将 @geoman-io/leaflet-geoman-free加入到 babel-loader 中编译

在 vue.config.js 中配置transpileDependencies

# vue.config.js
module.exports = {
  transpileDependencies: ["@geoman-io/leaflet-geoman-free"]
}

• 查看 @geoman-io/leaflet-geoman-free官方的issues

github.com/geoman-io/l…

github.com/geoman-io/l…

查阅到有人遇到了类似的问题，在 2.16.0版本内官方确实使用了新的语法 （github.com/geoman-io/l…），给出方案是使用 import "@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.min.js"min 文件；因为我们使用的是最新版本，引用后问题依旧无法解决（固定版本至2.14.2后也可以解决）

最后

我们经常在项目的开发过程中，前期未固定npm包的版本，后期项目重新安装包后，出现包版本小版本升级，导致项目出现了一些不可控的问题，因此在开发项目过程中，尽量固定开发中的包版本。