CesiumJS Build Tooling Revamp

CesiumJS
#1

Hi all,

We’re considering a new approach for building cesiumjs and we’re looking for your insight and input.

Cesium is a big library made up of hundreds of individual modules. You can load each of these modules individually in the browser, or run a build process to package all those modules together into one file, or bundle, which can then be loaded in the browser. Our bundling is currently being done using rollup.

We’re looking at moving to a new build tool. With this, we could include third-party modules directly, rather than manually copying, and preprocess to perform any necessary code transformation before bundling all the modules for the web.

One appeal of preprocessing would be the ability for us to transpile ES6+ code to something compatible with all supported browsers. Up until now, we’ve been limited to using JavaScript features supported by whatever browser has the lowest level of support. For instance, we cannot use import statements in our web worker code since it’s not yet supported in Firefox. Transpiling would let us make some much needed short-term improvements, and make other changes in the future like migrate to TypeScript if/when we chose to commit to it.

However, this means that during development we’ll need to rebuild at least a portion of the code whenever the source code changes. The goal is to make sure this extra step is fast enough that the developer does not need to wait to see the results.

We’re looking mainly at these two tools:

  • esbuild is what we’ve been eyeing as we’ve gotten the chance to use it in some of our own internal projects. The appeal is its speed, being significantly fast than rollup or webpack and having a more minimal configuration.
  • webpack is a popular tool which is used by many cesium app developers (and we’ve written a tutorial on how to build Cesium app with it). While its popularity and pervasiveness are pluses, it tends to be slower and require a lot of configuration.

TLDR; We’re revamping our build process and are considering esbuild or maybe webpack to do so. We’re looking for any thoughts you may have on these or other tools, or any general tips.

Thanks!

3 Likes
#2
#3

Now there are a lot of bundlers and workflow tools to choose from.

Like vite, it uses esbuild to prebuild dependencies, and for production stability, rollup is used.

But considering CesiumJS has static assets, /Assets, /Workers, /ThirdParty, /Widgets(styles) …, keep using gulp will be better.

I don’t have any suggestions, but I think migrating to Typescript in time can reduce a lot of type-checking code.

#4

But thinking CesiumJS in most time is a JavaScript lib, not a WebApp that may includes UI framework and other tons of tools to build SPA or SSR apps, use rollup + gulp to build production output maybe better than webpack?

#5

I do like esbuild (I use it with Vite), the problem comes when HMR doesn’t know what to do with resources that touch the graphics pipeline.

#6

Thanks for the feedback all! I wrote up an issue summarizing the next steps: Revisit CesiumJS build tooling · Issue #10373 · CesiumGS/cesium · GitHub