open/vite-plugin-earth
1
0
Fork 0
Code Pull Requests Projects Releases Activity

支持cdn方式打包

Browse Source
This commit is contained in:
小冰cc
2023-03-28 15:11:58 +08:00
parent 38621cb3ee
commit 306bca5d3c
7 changed files with 145 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.npmrc Normal file
View File

@ -0,0 +1 @@
registry=https://registry.npmjs.org/

2
LICENSE
View File

@ -1,6 +1,6 @@
MIT License MIT License
Copyright (c) 2021 Nshen Copyright (c) 2021 xuwoool@qq.com
Permission is hereby granted, free of charge, to any person obtaining a copy Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal of this software and associated documentation files (the "Software"), to deal

136
README.md
View File

@ -1,65 +1,70 @@
# ⚡ vite-plugin-cesium # ⚡ vite-plugin-earth
[![npm](https://img.shields.io/npm/v/vite-plugin-cesium.svg)](https://www.npmjs.com/package/vite-plugin-cesium) [![npm](https://img.shields.io/npm/v/vite-plugin-earth.svg)](https://www.npmjs.com/package/vite-plugin-earth)
[![npm](https://img.shields.io/npm/dt/vite-plugin-cesium)](https://www.npmjs.com/package/vite-plugin-cesium) [![npm](https://img.shields.io/npm/dt/vite-plugin-earth)](https://www.npmjs.com/package/vite-plugin-earth)
Easily set up a [`Cesium`] project in [`Vite`]. Easily set up a [`Cesium`] & [`Mars3D`] project in [`Vite`].
[`cesium`]: https://github.com/CesiumGS/cesium [`cesium`]: https://cesium.com/platform/cesiumjs/
[`vite`]: https://github.com/vitejs/vite [`vite`]: https://vitejs.dev/
[`Mars3D`]: http://mars3d.cn/
**update：** if you just wanna a scaffolding by using this plugin, try a simply command `yarn create cesium`, click [create-cesium](https://www.npmjs.com/package/create-cesium) for more info. ## Cesium
Chinese tutorial: [中文教程](https://zhuanlan.zhihu.com/p/354856692) ### Install
## Install
```bash ```bash
npm i cesium vite-plugin-cesium vite -D npm i cesium vite-plugin-earth vite -D
# yarn add cesium vite-plugin-cesium vite -D
``` ```
## Usage ### Usage
add this plugin to `vite.config.js` add this plugin to `vite.config.js`
```js ```js
import { defineConfig } from 'vite'; import { defineConfig } from 'vite';
import cesium from 'vite-plugin-cesium'; import earth from 'vite-plugin-earth';
export default defineConfig({ export default defineConfig({
plugins: [cesium()] plugins: [earth()]
}); });
``` ```
add dev command to `package.json` ## Mars3D
```json ### Install
"scripts": {
"dev": "vite", ```bash
"build": "vite build" npm i mars3d mars3d-cesium vite-plugin-earth vite -D
}
``` ```
run: ### Usage
`yarn dev` add this plugin to `vite.config.js`
## Options
**rebuildCesium**
- **Type :** `boolean`
- **Default :** `false`
Default copy min cesium file to dist. if `true` will rebuild cesium from source.
```js ```js
import { defineConfig } from 'vite'; import { defineConfig } from 'vite';
import cesium from 'vite-plugin-cesium'; import earth from 'vite-plugin-earth';
export default defineConfig({
plugins: [earth({ useMars3D: true })]
});
```
## Options
**useCDN**
- **Type :** `object`
- **Default :** `{ mars3d: '3.5.0', mars3dCesium: '1.103.1', cesium: '1.103.0', turf: '6.5.0' }`
打包时使用 cdn 方式
```js
import { defineConfig } from 'vite';
import earth from 'vite-plugin-earth';
export default defineConfig({ export default defineConfig({
plugins: [ plugins: [
cesium({ earth({
rebuildCesium: true useCDN: {}
}) })
] ]
}); });
@ -67,70 +72,31 @@ export default defineConfig({
## Demo ## Demo
`src/index.js` ### Cesium
```html
<div id="cesiumContainer"></div>
```
```js ```js
import { Viewer } from 'cesium'; import { Viewer } from 'cesium';
import './css/main.css';
const viewer = new Viewer('cesiumContainer'); const viewer = new Viewer('cesiumContainer');
``` ```
> or if you like global Cesium object you can write as ### Mars3D
```js
import * as Cesium from 'cesium';
const viewer = new Cesium.Viewer('cesiumContainer');
```
`index.html`
```html ```html
<!DOCTYPE html> <div id="mars3dContainer"></div>
<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` ```js
import * as mars3d from 'mars3d';
import 'mars3d/dist/mars3d.css';
```css const map = new mars3d.Map('mars3dContainer', {});
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](https://github.com/nshen/vite-plugin-cesium/tree/main/demo) folder.
##
## License ## License
MIT MIT

3
demo-mars3d/vite.config.ts
View File

@ -4,7 +4,8 @@ import earth from 'vite-plugin-earth';
export default defineConfig({ export default defineConfig({
plugins: [ plugins: [
earth({ earth({
useMars3D: true useMars3D: true,
useCDN: { mars3d: '3.5.1' }
}) })
] ]
}); });

2
demo/vite.config.ts
View File

@ -2,5 +2,5 @@ import { defineConfig } from 'vite';
import earth from 'vite-plugin-earth'; import earth from 'vite-plugin-earth';
export default defineConfig({ export default defineConfig({
plugins: [earth()] plugins: [earth({ useCDN: {} })]
}); });

4
package.json
View File

@ -1,7 +1,7 @@
{ {
"name": "vite-plugin-earth", "name": "vite-plugin-earth",
"version": "2.0.0", "version": "2.0.4",
"description": "cesium & mars3d library plugin for Vite", "description": "Cesium & Mars3D library plugin for Vite",
"main": "./dist/index.js", "main": "./dist/index.js",
"module": "./dist/index.mjs", "module": "./dist/index.mjs",
"types": "./dist/index.d.ts", "types": "./dist/index.d.ts",

79
src/index.ts
View File

@ -13,6 +13,12 @@ interface VitePluginEarthOptions {
cesiumBuildRootPath?: string; cesiumBuildRootPath?: string;
cesiumBuildPath?: string; cesiumBuildPath?: string;
useMars3D?: boolean; useMars3D?: boolean;
useCDN?: {
mars3d?: string;
mars3dCesium?: string;
cesium?: string;
turf?: string;
};
} }
export default function vitePluginEarth(options: VitePluginEarthOptions = {}): Plugin { export default function vitePluginEarth(options: VitePluginEarthOptions = {}): Plugin {
@ -21,9 +27,17 @@ export default function vitePluginEarth(options: VitePluginEarthOptions = {}): P
rebuildCesium = false, rebuildCesium = false,
devMinifyCesium = false, devMinifyCesium = false,
cesiumBuildRootPath = `node_modules/${CESIUM_NAME}/Build`, cesiumBuildRootPath = `node_modules/${CESIUM_NAME}/Build`,
cesiumBuildPath = `node_modules/${CESIUM_NAME}/Build/Cesium/` cesiumBuildPath = `node_modules/${CESIUM_NAME}/Build/Cesium/`,
useMars3D = false,
useCDN = null
} = options; } = options;
// 默认使用的版本号
let cdnVersion = Object.assign(
{ mars3d: '3.5.0', mars3dCesium: '1.103.1', cesium: '1.103.0', turf: '6.5.0' },
useCDN
);
let CESIUM_BASE_URL = `${CESIUM_NAME}/`; let CESIUM_BASE_URL = `${CESIUM_NAME}/`;
let MARS3D_BASE_URL = `mars3d/`; let MARS3D_BASE_URL = `mars3d/`;
let outDir = 'dist'; let outDir = 'dist';
@ -69,7 +83,7 @@ export default function vitePluginEarth(options: VitePluginEarthOptions = {}): P
let external = ['cesium']; let external = ['cesium'];
let plugins = [externalGlobals({ cesium: 'Cesium' })]; let plugins = [externalGlobals({ cesium: 'Cesium' })];
if (options.useMars3D) { if (useMars3D) {
external.push('mars3d'); external.push('mars3d');
plugins.push(externalGlobals({ mars3d: 'mars3d' })); plugins.push(externalGlobals({ mars3d: 'mars3d' }));
} }
@ -86,7 +100,7 @@ export default function vitePluginEarth(options: VitePluginEarthOptions = {}): P
}, },
configureServer({ middlewares }) { configureServer({ middlewares }) {
if (options.useMars3D) { if (useMars3D) {
const cesiumPath = path.join(cesiumBuildRootPath, 'Cesium'); const cesiumPath = path.join(cesiumBuildRootPath, 'Cesium');
middlewares.use(path.posix.join('/', CESIUM_BASE_URL), serveStatic(cesiumPath)); middlewares.use(path.posix.join('/', CESIUM_BASE_URL), serveStatic(cesiumPath));
@ -99,7 +113,7 @@ export default function vitePluginEarth(options: VitePluginEarthOptions = {}): P
}, },
async closeBundle() { async closeBundle() {
if (isBuild) { if (isBuild && !useCDN) {
try { try {
await fs.copy(path.join(cesiumBuildPath, 'Assets'), path.join(outDir, `${CESIUM_NAME}/Assets`)); await fs.copy(path.join(cesiumBuildPath, 'Assets'), path.join(outDir, `${CESIUM_NAME}/Assets`));
await fs.copy(path.join(cesiumBuildPath, 'ThirdParty'), path.join(outDir, `${CESIUM_NAME}/ThirdParty`)); await fs.copy(path.join(cesiumBuildPath, 'ThirdParty'), path.join(outDir, `${CESIUM_NAME}/ThirdParty`));
@ -109,7 +123,7 @@ export default function vitePluginEarth(options: VitePluginEarthOptions = {}): P
await fs.copy(path.join(cesiumBuildPath, 'Cesium.js'), path.join(outDir, `${CESIUM_NAME}/Cesium.js`)); await fs.copy(path.join(cesiumBuildPath, 'Cesium.js'), path.join(outDir, `${CESIUM_NAME}/Cesium.js`));
} }
if (options.useMars3D) { if (useMars3D) {
await fs.copy(path.join(`node_modules/mars3d/`, 'dist'), path.join(outDir, 'mars3d')); await fs.copy(path.join(`node_modules/mars3d/`, 'dist'), path.join(outDir, 'mars3d'));
} }
} catch (err) { } catch (err) {
@ -119,15 +133,60 @@ export default function vitePluginEarth(options: VitePluginEarthOptions = {}): P
}, },
transformIndexHtml() { transformIndexHtml() {
const tags: HtmlTagDescriptor[] = [ const tags: HtmlTagDescriptor[] = [];
if (useCDN) {
let cesiumVersion = useMars3D ? cdnVersion.mars3dCesium : cdnVersion.cesium;
tags.push(
{ {
tag: 'link',
attrs: {
rel: 'stylesheet',
href: `https://unpkg.com/${CESIUM_NAME}@${cesiumVersion}/Build/Cesium/Widgets/widgets.css`
}
},
{
tag: 'script',
children: `window['CESIUM_BASE_URL'] = 'https://unpkg.com/${CESIUM_NAME}@${cesiumVersion}/Build/Cesium'`
},
{
tag: 'script',
attrs: {
src: `https://unpkg.com/${CESIUM_NAME}@${cesiumVersion}/Build/Cesium/Cesium.js`
}
}
);
if (useMars3D) {
tags.push(
{
tag: 'link',
attrs: {
rel: 'stylesheet',
href: `https://unpkg.com/mars3d@${cdnVersion.mars3d}/dist/mars3d.css`
}
},
{
tag: 'script',
attrs: {
src: `https://unpkg.com/mars3d@${cdnVersion.mars3d}/dist/mars3d.js`
}
},
{
tag: 'script',
attrs: {
src: `https://unpkg.com/@turf/turf@${cdnVersion.turf}/turf.min.js`
}
}
);
}
} else {
tags.push({
tag: 'link', tag: 'link',
attrs: { attrs: {
rel: 'stylesheet', rel: 'stylesheet',
href: normalizePath(path.join(CESIUM_BASE_URL, 'Widgets/widgets.css')) href: normalizePath(path.join(CESIUM_BASE_URL, 'Widgets/widgets.css'))
} }
} });
];
if (isBuild && !rebuildCesium) { if (isBuild && !rebuildCesium) {
tags.push({ tags.push({
tag: 'script', tag: 'script',
@ -137,7 +196,7 @@ export default function vitePluginEarth(options: VitePluginEarthOptions = {}): P
}); });
} }
if (options.useMars3D) { if (useMars3D) {
tags.push( tags.push(
{ {
tag: 'link', tag: 'link',
@ -154,6 +213,8 @@ export default function vitePluginEarth(options: VitePluginEarthOptions = {}): P
} }
); );
} }
}
return tags; return tags;
} }
}; };