New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

vite-plugin-cesium

Package Overview
Dependencies
Maintainers
1
Versions
30
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vite-plugin-cesium

Cesium library plugin for Vite

1.2.23
latest
Source
npm
Version published
Maintainers
1
Created
Source

⚡ vite-plugin-cesium

npm npm

Easily set up a Cesium project in Vite.

update： if you just wanna a scaffolding by using this plugin, try a simply command yarn create cesium, click create-cesium for more info.

Chinese tutorial: 中文教程

Install

npm i cesium vite-plugin-cesium vite -D
# yarn add cesium vite-plugin-cesium vite -D

Usage

add this plugin to vite.config.js

import { defineConfig } from 'vite';
import cesium from 'vite-plugin-cesium';
export default defineConfig({
  plugins: [cesium()]
});

add dev command to package.json

"scripts": {
  "dev": "vite",
  "build": "vite build"
}

run:

yarn dev

Options

rebuildCesium

  • Type : boolean
  • Default : false

Default copy min cesium file to dist. if true will rebuild cesium from source.

import { defineConfig } from 'vite';
import cesium from 'vite-plugin-cesium';
export default defineConfig({
  plugins: [
    cesium({
      rebuildCesium: true
    })
  ]
});

Demo

src/index.js

import { Viewer } from 'cesium';
import './css/main.css';

const viewer = new Viewer('cesiumContainer');

or if you like global Cesium object you can write as

import * as Cesium from 'cesium';
const viewer = new Cesium.Viewer('cesiumContainer');

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>cesium-vite</title>
    <script type="module" src="/src/index.js"></script>
  </head>

  <body>
    <div id="cesiumContainer"></div>
  </body>
</html>

src/css/main.css

html,
body,
#cesiumContainer {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

Add dev and build commands to package.json

"scripts": {
    "dev": "vite",
    "build": "vite build"
},

Run yarn dev

For full demo project please check ./demo folder.

License

MIT

Keywords

vite
vite-plugin
cesium

FAQs

Package last updated on 06 Aug 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

Node.js TSC Votes to Stop Distributing Corepack

Security News

Node.js TSC Votes to Stop Distributing Corepack

Corepack will be phased out from future Node.js releases following a TSC vote.

By Sarah Gooding  -  Mar 19, 2025