react 地圖發佈 cesium 篇

上篇文章介紹瞭如何搭建 react cesium 開發環境。在開發環境下，項目一切運行正常。最近把項目打包發佈出來，卻碰見了 cesium 不能正確初始化。打開瀏覽器的調試面板，出現好多 404，資源路徑錯誤。下面是項目的資源處理過程整理，其中 cesium 須要獨立處理，你們之後要注意。

1、react 靜態資源處理

修改 config/paths.js

function getServedPath(appPackageJson) {
  ...
  const servedUrl = envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : "./");
  ...
}
複製代碼

2、cesium 資源處理

這個是重點，若是不處理，項目構建後會沒法正常運行，cesium 資源會報 404 錯誤。主要思路是，在加載 cesium 以前設置 cesium 資源的 baseUrl，調用 cesium 自帶的 buildModuleUrl 函數來設置 baseUrl。

修改 /src/index.js，增長以下代碼

...
import buildModuleUrl from "cesium/Core/buildModuleUrl";

buildModuleUrl.setBaseUrl("./");
...
複製代碼

3、關閉 cesium 的一些警告信息

修改 config/webpack.config.js

module.exports = function(webpackEnv) {
  return {
    module: {
      unknownContextCritical: false
    }
  };
};
複製代碼

4、關閉 sourceMap

修改 package.json

"scripts": {
    "build": "cross-env GENERATE_SOURCEMAP=false node scripts/build.js"
}
複製代碼

以上是發佈環境的所有增量配置，如何您是新建項目，請先配置開發環境，再按照上面的步驟配置發佈環境。