升级ArcGIS API for JavaScript 4.26踩坑指南

背景

    之前有个老项目用了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