背景
之前有个老项目用了4.23 的版本,就想着升级到最新,万万没想到折腾了一天,踩了不少坑终于搞好了。
版本升级问题
首先升级版本不是改下版本好就行,还要配置解析插件,设置了webpack插件,因为
新版本的 API引用 optional chaining和nullish coalescing,导致Webpack出现解析错误,要安装新的解析器才可以。
"@arcgis/core": "4.26.0",
"@babel/core": "^7.18.9",
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
"@babel/plugin-proposal-optional-chaining": "^7.18.9",
"babel-loader": "^8.2.5"
29e6f9c0a2704966904309ed633f95e1_tplv-k3u1fbpfcp-watermark.png
但是我运行起来发现还不对,运行起来浏览器老有这些错误,经过一番尝试原来要这样,限制只对arcgis和esri的包起作用
2eb4623b31d4473c939acfaa90775d39_tplv-k3u1fbpfcp-watermark.png
module: {
rules: [
{
test: /.m?js$/,
include: [ path.resolve(__dirname, './node_modules/@esri/'),path.resolve(__dirname, './node_modules/@arcgis/')],
use: {
loader: "babel-loader",
options: {
plugins: [
["@babel/plugin-proposal-nullish-coalescing-operator", { loose: true }],
["@babel/plugin-proposal-optional-chaining", { loose: true }]
]
}
}
}
]
}
0f96d350465c46ecbaee9bf4a16877da_tplv-k3u1fbpfcp-watermark.png
worker打包问题
参考esri的官方项目,研究怎么打包worker依赖,发现运行build:rollup老有问题,一看问题代码提示找不到node:process,查到错误提示处发现要用到node进程,原来是因为node版本太低,14版本的是process,16之后就是node:process,于是更新一下就可以了,一定要用打包出来的chunk和RemoteClient.js,以及对应的loader,把chunk、RemoteClient.js、s.min.js拷贝进项目里
参考资料:
https://github.com/Esri/jsapi-resources/tree/main/esm-samples/jsapi-custom-workers
https://blog.csdn.net/qq_34443031/article/details/127285197
网友评论