From 306bca5d3c05a280173955c7cffafabb7d8cede9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B0=8F=E5=86=B0cc?= Date: Tue, 28 Mar 2023 15:11:58 +0800 Subject: [PATCH] =?UTF-8?q?=E6=94=AF=E6=8C=81cdn=E6=96=B9=E5=BC=8F?= =?UTF-8?q?=E6=89=93=E5=8C=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .npmrc | 1 + LICENSE | 2 +- README.md | 136 ++++++++++++++----------------------- demo-mars3d/vite.config.ts | 3 +- demo/vite.config.ts | 2 +- package.json | 4 +- src/index.ts | 113 +++++++++++++++++++++++------- 7 files changed, 145 insertions(+), 116 deletions(-) create mode 100644 .npmrc diff --git a/.npmrc b/.npmrc new file mode 100644 index 0000000..5660f81 --- /dev/null +++ b/.npmrc @@ -0,0 +1 @@ +registry=https://registry.npmjs.org/ \ No newline at end of file diff --git a/LICENSE b/LICENSE index 74bf9ab..61b783b 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ 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 of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index fa37d63..7bc0706 100644 --- a/README.md +++ b/README.md @@ -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/dt/vite-plugin-cesium)](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-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 -[`vite`]: https://github.com/vitejs/vite +[`cesium`]: https://cesium.com/platform/cesiumjs/ +[`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 -npm i cesium vite-plugin-cesium vite -D -# yarn add cesium vite-plugin-cesium vite -D +npm i cesium vite-plugin-earth vite -D ``` -## Usage +### Usage add this plugin to `vite.config.js` ```js import { defineConfig } from 'vite'; -import cesium from 'vite-plugin-cesium'; +import earth from 'vite-plugin-earth'; export default defineConfig({ - plugins: [cesium()] + plugins: [earth()] }); ``` -add dev command to `package.json` +## Mars3D -```json -"scripts": { - "dev": "vite", - "build": "vite build" -} +### Install + +```bash +npm i mars3d mars3d-cesium vite-plugin-earth vite -D ``` -run: +### Usage -`yarn dev` - -## Options - -**rebuildCesium** - -- **Type :** `boolean` -- **Default :** `false` - -Default copy min cesium file to dist. if `true` will rebuild cesium from source. +add this plugin to `vite.config.js` ```js 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({ plugins: [ - cesium({ - rebuildCesium: true + earth({ + useCDN: {} }) ] }); @@ -67,70 +72,31 @@ export default defineConfig({ ## Demo -`src/index.js` +### Cesium + +```html +
+``` ```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 - -```js -import * as Cesium from 'cesium'; -const viewer = new Cesium.Viewer('cesiumContainer'); -``` - -`index.html` +### Mars3D ```html - - - - - - - cesium-vite - - - - -
- - +
``` -`src/css/main.css` +```js +import * as mars3d from 'mars3d'; +import 'mars3d/dist/mars3d.css'; -```css -html, -body, -#cesiumContainer { - width: 100%; - height: 100%; - margin: 0; - padding: 0; - overflow: hidden; -} +const map = new mars3d.Map('mars3dContainer', {}); ``` -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 MIT diff --git a/demo-mars3d/vite.config.ts b/demo-mars3d/vite.config.ts index 944e1a5..fda5548 100644 --- a/demo-mars3d/vite.config.ts +++ b/demo-mars3d/vite.config.ts @@ -4,7 +4,8 @@ import earth from 'vite-plugin-earth'; export default defineConfig({ plugins: [ earth({ - useMars3D: true + useMars3D: true, + useCDN: { mars3d: '3.5.1' } }) ] }); diff --git a/demo/vite.config.ts b/demo/vite.config.ts index 10fb5bf..5cf09e7 100644 --- a/demo/vite.config.ts +++ b/demo/vite.config.ts @@ -2,5 +2,5 @@ import { defineConfig } from 'vite'; import earth from 'vite-plugin-earth'; export default defineConfig({ - plugins: [earth()] + plugins: [earth({ useCDN: {} })] }); diff --git a/package.json b/package.json index f92207a..c840be5 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "vite-plugin-earth", - "version": "2.0.0", - "description": "cesium & mars3d library plugin for Vite", + "version": "2.0.4", + "description": "Cesium & Mars3D library plugin for Vite", "main": "./dist/index.js", "module": "./dist/index.mjs", "types": "./dist/index.d.ts", diff --git a/src/index.ts b/src/index.ts index 54123e6..06a567c 100644 --- a/src/index.ts +++ b/src/index.ts @@ -13,6 +13,12 @@ interface VitePluginEarthOptions { cesiumBuildRootPath?: string; cesiumBuildPath?: string; useMars3D?: boolean; + useCDN?: { + mars3d?: string; + mars3dCesium?: string; + cesium?: string; + turf?: string; + }; } export default function vitePluginEarth(options: VitePluginEarthOptions = {}): Plugin { @@ -21,9 +27,17 @@ export default function vitePluginEarth(options: VitePluginEarthOptions = {}): P rebuildCesium = false, devMinifyCesium = false, 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; + // 默认使用的版本号 + 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 MARS3D_BASE_URL = `mars3d/`; let outDir = 'dist'; @@ -69,7 +83,7 @@ export default function vitePluginEarth(options: VitePluginEarthOptions = {}): P let external = ['cesium']; let plugins = [externalGlobals({ cesium: 'Cesium' })]; - if (options.useMars3D) { + if (useMars3D) { external.push('mars3d'); plugins.push(externalGlobals({ mars3d: 'mars3d' })); } @@ -86,7 +100,7 @@ export default function vitePluginEarth(options: VitePluginEarthOptions = {}): P }, configureServer({ middlewares }) { - if (options.useMars3D) { + if (useMars3D) { const cesiumPath = path.join(cesiumBuildRootPath, 'Cesium'); middlewares.use(path.posix.join('/', CESIUM_BASE_URL), serveStatic(cesiumPath)); @@ -99,7 +113,7 @@ export default function vitePluginEarth(options: VitePluginEarthOptions = {}): P }, async closeBundle() { - if (isBuild) { + if (isBuild && !useCDN) { try { 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`)); @@ -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`)); } - if (options.useMars3D) { + if (useMars3D) { await fs.copy(path.join(`node_modules/mars3d/`, 'dist'), path.join(outDir, 'mars3d')); } } catch (err) { @@ -119,41 +133,88 @@ export default function vitePluginEarth(options: VitePluginEarthOptions = {}): P }, transformIndexHtml() { - const tags: HtmlTagDescriptor[] = [ - { - tag: 'link', - attrs: { - rel: 'stylesheet', - href: normalizePath(path.join(CESIUM_BASE_URL, 'Widgets/widgets.css')) - } - } - ]; - if (isBuild && !rebuildCesium) { - tags.push({ - tag: 'script', - attrs: { - src: normalizePath(path.join(CESIUM_BASE_URL, 'Cesium.js')) - } - }); - } - - if (options.useMars3D) { + const tags: HtmlTagDescriptor[] = []; + if (useCDN) { + let cesiumVersion = useMars3D ? cdnVersion.mars3dCesium : cdnVersion.cesium; tags.push( { tag: 'link', attrs: { rel: 'stylesheet', - href: normalizePath(path.join(MARS3D_BASE_URL, 'mars3d.css')) + 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: normalizePath(path.join(MARS3D_BASE_URL, 'mars3d.js')) + 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', + attrs: { + rel: 'stylesheet', + href: normalizePath(path.join(CESIUM_BASE_URL, 'Widgets/widgets.css')) + } + }); + if (isBuild && !rebuildCesium) { + tags.push({ + tag: 'script', + attrs: { + src: normalizePath(path.join(CESIUM_BASE_URL, 'Cesium.js')) + } + }); + } + + if (useMars3D) { + tags.push( + { + tag: 'link', + attrs: { + rel: 'stylesheet', + href: normalizePath(path.join(MARS3D_BASE_URL, 'mars3d.css')) + } + }, + { + tag: 'script', + attrs: { + src: normalizePath(path.join(MARS3D_BASE_URL, 'mars3d.js')) + } + } + ); + } } + return tags; } };