Cesium - Webpack Modular Engine Implementation vs Monolithic

CesiumJS
1

Hi team,

I have a query about implementing modular Cesium via cesium@engine. I am able to get the globe working when using the full version via node_modules/cesium but I want to use it via cesium@engine to benefit from tree shaking/minimal implementation.

With reference to:

“However if you only install @cesium/engine then you should change the paths in webpack.config.js to the ones below:”

  • Do I simply just need to specify the three engine sources in my webpack.config.js then initialise? Is there any different mechanism I need to use to initialise when compared to the monolithic implementation?
  • Does anyone have an example of a working package.json for modular - is the below on the right track? 
    • "dependencies": {

    "@cesium/engine": "^19.0.0",
  • I can confirm the node_modules/@cesium is present. Do I need to put the pre-built package anywhere. I notice a difference when compared to monolithic and modular that Cesium.js is in my static directory. Do I need this for modular?

Thank you so much for help.

2

Hey @unclepeppy, thanks for the question!

First for a little bit of background we publish 3 packages for CesiumJS: cesium, @cesium/engine and @cesium/widgets. You can think of the main cesium package as just a pre-combined bundle of @cesium/engine and @cesium/widgets. Anything you can import from cesium can be imported from either @cesium/engine or @cesium/widgets directly. You can check which sub-package a class/function is from in our documentation by the package it’s under

Do I simply just need to specify the three engine sources in my webpack.config.js then initialise? Is there any different mechanism I need to use to initialise when compared to the monolithic implementation?

Correct, you should be able to update your webpack.config.js with those new routes. If you are not using @cesium/widgets then you can drop the Widgets path. You shouldn’t have to do anything differently with the CesiumJS API, just change where it’s imported from.

Do I need to put the pre-built package anywhere. I notice a difference when compared to monolithic and modular that Cesium.js is in my static directory. Do I need this for modular?

I’m not entirely sure what you mean by this but you shouldn’t have to move any of the CesiumJS files around yourself. The CopyWebpackPlugin should be all that’s needed to set things up.

Hopefully that helps, let me know if you have any more questions!