https://github.com/srothst1/cesiumjs-webpack-starter-tutorial

CesiumJS is an open source JS library for creating 3D globes and maps. Webpack is a popular tool for bundling JS modules. This repository showcases how CesiumJS and webpack can be used together.
https://github.com/srothst1/cesiumjs-webpack-starter-tutorial

cesiumjs webpack

Last synced: 16 days ago
JSON representation

CesiumJS is an open source JS library for creating 3D globes and maps. Webpack is a popular tool for bundling JS modules. This repository showcases how CesiumJS and webpack can be used together.

• Host: GitHub
• URL: https://github.com/srothst1/cesiumjs-webpack-starter-tutorial
• Owner: srothst1
• License: apache-2.0
• Created: 2021-08-12T20:45:26.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2021-10-14T18:15:37.000Z (about 3 years ago)
• Last Synced: 2024-10-09T19:22:25.711Z (about 1 month ago)
• Topics: cesiumjs, webpack
• Language: JavaScript
• Homepage:
• Size: 52.8 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# cesium-webpack-example

A minimal recommended setup for an applications using [Cesium](https://cesium.com) with [Webpack](https://webpack.js.org/concepts/).

[![Build Status](https://travis-ci.org/AnalyticalGraphicsInc/cesium-webpack-example.svg?branch=using-custom-loader)](https://travis-ci.org/AnalyticalGraphicsInc/cesium-webpack-example)

### Running this application

	npm install

	npm start

Navigate to `localhost:8080`.

##### Available scripts

* `npm start` - Runs a webpack build with `webpack.config.js` and starts a development server

* `npm run build` - Runs a webpack build with `webpack.config.js`

* `npm run release` - Runs an optimized webpack build with `webpack.release.config.js`

* `npm run serve-release` - Runs an optimized webpack build with `webpack.release.config.js` and starts a development server

##### Configurations

We've included two webpack configuration files in this repository. `webpack.config.js` contains configuration for development while `webpack.release.config.js` contains an optimized configuration for production use.

### Requiring Cesium in your application

We recommend using Cesium as an [ES6](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) module, via the `import` keyword.

#### Import named modules from Cesium

	import { Color } from 'cesium';

	var c = Color.fromRandom();

#### Import Cesium static asset files

	

	import "cesium/Build/Cesium/Widgets/widgets.css";

### Treeshaking

`webpack.release.config.js` enables tree-shaking of CesiumJS modules so that unused modules are not included in the production bundle. See Webpack's [Tree Shaking](https://webpack.js.org/guides/tree-shaking/) documentation for more details.

##### Removing pragmas

To remove pragmas such as a traditional Cesium release build, use the [`strip-pragma-loader`](https://www.npmjs.com/package/strip-pragma-loader).

Install the plugin with npm,

```

npm install strip-pragma-loader --save-dev

```

and include the loader in `module.rules` with `debug` set to `false`.

```

rules: [{

	test: /\.js$/,

	enforce: 'pre',

	include: path.resolve(__dirname, cesiumSource),

	use: [{

		loader: 'strip-pragma-loader',

		options: {

		    pragmas: {

				debug: false

			}

		}

	}]

}]

```

## Contributions

Pull requests are appreciated. Please use the same [Contributor License Agreement (CLA)](https://github.com/AnalyticalGraphicsInc/cesium/blob/master/CONTRIBUTING.md) used for [Cesium](https://cesiumjs.org/).

---

Developed by the Cesium team.