react 地圖發布 cesium 篇

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

一、react 靜態資源處理

修改 config/paths.js

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

二、cesium 資源處理

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

修改 /src/index.js，增加如下代碼

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

buildModuleUrl.setBaseUrl("./");
...

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

修改 config/webpack.config.js

module.exports = function(webpackEnv) {
  return {
    module: {
      unknownContextCritical: false
    }
  };
};

四、關閉 sourceMap

修改 package.json

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

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