cesium 打包环境浅析

最新推荐文章于 2025-03-07 16:16:58 发布

原创

最新推荐文章于 2025-03-07 16:16:58 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html5

本文详细介绍了在使用Rollup处理JavaScript文件引用时需要注意的大小写敏感问题，以及npm命令的执行过程。同时，通过分析Cesium的`minifyRelease`命令，揭示了从`package.json`到`gulpfile.js`的构建步骤，包括创建目录、转换GLSL文件、处理_workers_文件和最终的压缩混淆等环节，为理解JavaScript项目的构建过程提供了深入的洞察。

今天遇到一个打包的问题折腾了我很长时间，在rollup处理js文件之间的引用关系时，对路径的大小写是敏感的，例如"../FrameBuffer.js"与"../Framebuffer.js"是不同的，需要特别注意。

大概说一下npm命令的执行过程，npm是基于nodejs的一个批处理文件npm.bat，其内部类似

"%dp0%\node.exe" npm.js

是通过将js脚本传递给node.exe执行的，我们通常执行的命令"node.exe npm.js run start.js".

借着这个时间顺便看一下cesium使用gulp的打包过程，我使用的cesium的打包命令是

"npm run minifyRelease"，这个命令会执行下面的命令

//package.json文件  

"scripts": {
    "minifyRelease": "gulp minifyRelease",
 }

根据其中的"gulp minifyRelease",会在当前的目录下找到gulpfile.js文件，这个文件中会存在如下的代码，这是一个gulp的任务，从代码中我们可以看到将“build”命令和minifyRelease串联起来执行。

gulp.task("minifyRelease", gulp.series("build", minifyRelease));

首先看看"build"命令的执行过程，代码如下：

gulp.task("build", function () {
  mkdirp.sync("Build");     // 创建Build文件夹
  fs.writeFileSync(         // 向Build文件中添加package.json文件，并写入"type:commonjs"