cesium 打包环境 浅析

        今天遇到一个打包的问题折腾了我很长时间，在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"
    "Build/package.json",   
    JSON.stringify({
      type: "commonjs",
    }),
    "utf8"
  );
  // 根据.glsl文件生成对应.js
  glslToJavaScript(minifyShaders, "Build/minifyShaders.state"); 
  // 遍历source下的所有文件创建cesium.js接口文件，将shader相关的文件重命名后添加到cesium.js文件中
  createCesiumJs();
  // 处理一些测试文件          
  createSpecList();
  // 处理 "Apps", "Sandcastle", "jsHintOptions.js"
  createJsHintOptions();
  // 创建线程相关文件，创建"Apps"等相关文件
  return Promise.join(createWorkers(), createGalleryList());
});


function createWorkers() {
  // 删除createWorkers目录
  rimraf.sync("Build/createWorkers");

  // 并且删除Source/Workers目录下的一些文件，保留cesiumWorkerBootstrapper.js和    
  // transferTypedArrayTest.js文件
  // cesiumWorkerBootstrapper.js是一个引导文件，引导cesium中加载业务处理的相关js文件
  // transferTypedArrayTest.js是一个测试文件，测试是否可以向线程传递数组
  globby
    .sync([
      "Source/Workers/**",
      "!Source/Workers/cesiumWorkerBootstrapper.js",
      "!Source/Workers/transferTypedArrayTest.js",
    ])
    .forEach(function (file) {
      rimraf.sync(file);
    });

  //获取线程的ES6文件
  const workers = globby.sync(["Source/WorkersES6/**"]);

  // 将文件转换为es5的amd线程文件放到Source/Workers目录下，其中使用了Build/createWorkers这个临 
  // 时文件,最后在删除这个临时文件
  return rollup
    .rollup({
      input: workers,
      onwarn: rollupWarning,
    })
    .then(function (bundle) {
      return bundle.write({
        dir: "Build/createWorkers",
        banner:
          "/* This file is automatically rebuilt by the Cesium build process. */",
        format: "amd",
      });
    })
    .then(function () {
      return streamToPromise(
        gulp.src("Build/createWorkers/**").pipe(gulp.dest("Source/Workers"))
      );
    })
    .then(function () {
      rimraf.sync("Build/createWorkers");
    });
}

上面的这个过程中将.glsl转换为.js文件，创建cesium.js，处理workers文件等。

最后，会处理minifyRelease函数，这个函数用于将多个js文件优化、压缩、混淆等。

function combineJavaScript(options) {
  const optimizer = options.optimizer;
  const outputDirectory = options.outputDirectory;
  const removePragmas = options.removePragmas;

  const combineOutput = path.join("Build", "combineOutput", optimizer);

  const promise = Promise.join(
    // 合并cesium.js文件
    combineCesium(!removePragmas, optimizer, combineOutput),
    // 合并worker下的文件
    combineWorkers(!removePragmas, optimizer, combineOutput),
    // 压缩混淆处理
    minifyModules(outputDirectory)
  );

  return promise.then(function () {
    const promises = [];

    //copy to build folder with copyright header added at the top
    let stream = gulp
      .src([combineOutput + "/**"])
      .pipe(gulp.dest(outputDirectory));

    promises.push(streamToPromise(stream));

    const everythingElse = ["Source/**", "!**/*.js", "!**/*.glsl"];
    if (optimizer === "uglify2") {
      promises.push(minifyCSS(outputDirectory));
      everythingElse.push("!**/*.css");
    }

    stream = gulp
      .src(everythingElse, { nodir: true })
      .pipe(gulp.dest(outputDirectory));
    promises.push(streamToPromise(stream));

    return Promise.all(promises).then(function () {
      rimraf.sync(combineOutput);
    });
  });
}

function minifyRelease() {
  return combineJavaScript({
    removePragmas: true,
    optimizer: "uglify2",
    outputDirectory: path.join("Build", "Cesium"),
  });
}