web前端：react 地图发布 cesium 篇

作者: lifefriend_007 更新于： 2020-03-02 11:46:58

　　React起源于Facebook的内部项目，因为该公司对市场上所有JavaScriptMVC框架，都不满意，就决定自己写一套，用来架设Instagram的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。

　　上篇文章介绍了如何搭建reactcesium开发环境。在开发环境下，项目一切运行正常。最近把项目打包发布出来，却遇见了cesium不能正确初始化。打开浏览器的调试面板，出现好多404，资源路径错误。下面是项目的资源处理过程整理，其中cesium需要独立处理，大家以后要注意。

　　一、react静态资源处理

　　修改config/paths.js

　　functiongetServedPath(appPackageJson){

　　...

　　constservedUrl=envPublicUrl||(publicUrl?url.parse(publicUrl).pathname:"./");

　　...

　　}

　　二、cesium资源处理

　　这个是重点，如果不处理，项目构建后会无法正常运行，cesium资源会报404错误。主要思路是，在加载cesium之前设置cesium资源的baseUrl，调用cesium自带的buildModuleUrl函数来设置baseUrl。

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

　　...

　　importbuildModuleUrlfrom"cesium/Core/buildModuleUrl";

　　buildModuleUrl.setBaseUrl("./");

　　...

　　三、关闭cesium的一些警告信息

　　修改config/webpack.config.js

　　module.exports=function(webpackEnv){

　　return{

　　module:{

　　unknownContextCritical:false

　　}

　　};

　　};

　　四、关闭sourceMap

　　修改package.json

　　"scripts":{

　　"build":"cross-envGENERATE_SOURCEMAP=falsenodescripts/build.js"

　　}

　　以上是发布环境的全部增量配置，如何您是新建项目，请先配置开发环境，再按照上面的步骤配置发布开发环境。

　　React主要用于构建UI。你可以在React里传递多种类型的参数，如声明代码，帮助你渲染出UI、也可以是静态的HTMLDOM元素、也可以传递动态变量、甚至是可交互的应用组件。