diff --git a/demo-cesium/vite.config.ts b/demo-cesium/vite.config.ts index 5cf09e7..655dd1a 100644 --- a/demo-cesium/vite.config.ts +++ b/demo-cesium/vite.config.ts @@ -1,6 +1,6 @@ import { defineConfig } from 'vite'; -import earth from 'vite-plugin-earth'; +import { cesiumPlugin } from 'vite-plugin-earth'; export default defineConfig({ - plugins: [earth({ useCDN: {} })] + plugins: [cesiumPlugin()] }); diff --git a/demo-mars3d/vite.config.ts b/demo-mars3d/vite.config.ts index 944e1a5..961e168 100644 --- a/demo-mars3d/vite.config.ts +++ b/demo-mars3d/vite.config.ts @@ -1,10 +1,6 @@ import { defineConfig } from 'vite'; -import earth from 'vite-plugin-earth'; +import { mars3dPlugin } from 'vite-plugin-earth'; export default defineConfig({ - plugins: [ - earth({ - useMars3D: true - }) - ] + plugins: [mars3dPlugin()] }); diff --git a/package.json b/package.json index 4304ca9..ea5327c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vite-plugin-earth", - "version": "2.0.5", + "version": "2.1.0", "description": "Cesium & Mars3D library plugin for Vite", "main": "./dist/index.js", "module": "./dist/index.mjs", diff --git a/src/index.ts b/src/index.ts index d3c561d..7c0dc44 100644 --- a/src/index.ts +++ b/src/index.ts @@ -4,40 +4,49 @@ import externalGlobals from 'rollup-plugin-external-globals'; import serveStatic from 'serve-static'; import { HtmlTagDescriptor, normalizePath, Plugin, UserConfig } from 'vite'; -interface VitePluginEarthOptions { - /** - * rebuild cesium library, default: false - */ +interface BaseOptions { rebuildCesium?: boolean; devMinifyCesium?: boolean; cesiumBuildRootPath?: string; cesiumBuildPath?: string; - useMars3D?: boolean; +} + +interface VitePluginCesiumOptions extends BaseOptions { + /** + * [仅build编译时] 是否使用CDN引入资源,也可以配置object定义各库的cdn的版本号 + */ + useCDN?: boolean | { cesium?: string }; +} + +interface VitePluginMars3dOptions extends BaseOptions { + /** + * [仅build编译时] 是否使用CDN引入资源,也可以配置object定义各库的cdn的版本号 + */ useCDN?: + | boolean | { mars3d?: string; mars3dCesium?: string; turf?: string; - } - | { cesium?: string }; + }; } - -export default function vitePluginEarth(options: VitePluginEarthOptions = {}): Plugin { - let CESIUM_NAME = options.useMars3D ? 'mars3d-cesium' : 'cesium'; +/** + * 集成mars3d + * @param options + * @returns + */ +export function mars3dPlugin(options: VitePluginMars3dOptions = {}): Plugin { + let CESIUM_NAME = 'mars3d-cesium'; const { rebuildCesium = false, devMinifyCesium = false, cesiumBuildRootPath = `node_modules/${CESIUM_NAME}/Build`, cesiumBuildPath = `${cesiumBuildRootPath}/Cesium/`, - useMars3D = false, useCDN = null } = options; // 默认使用的版本号 - let cdnVersion = Object.assign( - { mars3d: '3.5.0', mars3dCesium: '1.103.1', cesium: '1.105.0', turf: '6.5.0' }, - useCDN - ); + let cdnVersion = Object.assign({ mars3d: '3.5.4', mars3dCesium: '1.104.3', turf: '6.5.0' }, useCDN); let CESIUM_BASE_URL = `${CESIUM_NAME}/`; let MARS3D_BASE_URL = `mars3d/`; @@ -46,7 +55,7 @@ export default function vitePluginEarth(options: VitePluginEarthOptions = {}): P let isBuild: boolean = false; return { - name: 'vite-plugin-earth', + name: 'vite-plugin-mars3d', config(c, { command }) { isBuild = command === 'build'; @@ -84,10 +93,8 @@ export default function vitePluginEarth(options: VitePluginEarthOptions = {}): P let external = [CESIUM_NAME]; let plugins = [externalGlobals({ cesium: 'Cesium' })]; - if (useMars3D) { - external.push('mars3d'); - plugins.push(externalGlobals({ mars3d: 'mars3d' })); - } + external.push('mars3d'); + plugins.push(externalGlobals({ mars3d: 'mars3d' })); userConfig.build = { rollupOptions: { @@ -101,16 +108,11 @@ export default function vitePluginEarth(options: VitePluginEarthOptions = {}): P }, configureServer({ middlewares }) { - if (useMars3D) { - const cesiumPath = path.join(cesiumBuildRootPath, 'Cesium'); - middlewares.use(path.posix.join('/', CESIUM_BASE_URL), serveStatic(cesiumPath)); + const cesiumPath = path.join(cesiumBuildRootPath, 'Cesium'); + middlewares.use(path.posix.join('/', CESIUM_BASE_URL), serveStatic(cesiumPath)); - const mars3dPath = path.join(`node_modules/mars3d`, 'dist'); - middlewares.use(path.posix.join('/', MARS3D_BASE_URL), serveStatic(mars3dPath)); - } else { - const cesiumPath = path.join(cesiumBuildRootPath, devMinifyCesium ? 'Cesium' : 'CesiumUnminified'); - middlewares.use(path.posix.join('/', CESIUM_BASE_URL), serveStatic(cesiumPath)); - } + const mars3dPath = path.join(`node_modules/mars3d`, 'dist'); + middlewares.use(path.posix.join('/', MARS3D_BASE_URL), serveStatic(mars3dPath)); }, async closeBundle() { @@ -124,9 +126,7 @@ export default function vitePluginEarth(options: VitePluginEarthOptions = {}): P await fs.copy(path.join(cesiumBuildPath, 'Cesium.js'), path.join(outDir, `${CESIUM_NAME}/Cesium.js`)); } - 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) { console.error('copy failed', err); } @@ -136,7 +136,7 @@ export default function vitePluginEarth(options: VitePluginEarthOptions = {}): P transformIndexHtml() { const tags: HtmlTagDescriptor[] = []; if (useCDN) { - let cesiumVersion = useMars3D ? cdnVersion.mars3dCesium : cdnVersion.cesium; + let cesiumVersion = cdnVersion.mars3dCesium; tags.push( { tag: 'link', @@ -157,29 +157,27 @@ export default function vitePluginEarth(options: VitePluginEarthOptions = {}): P } ); - 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` - } + 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', @@ -197,22 +195,158 @@ export default function vitePluginEarth(options: VitePluginEarthOptions = {}): P }); } - 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')) - } + tags.push({ + tag: 'link', + attrs: { + rel: 'stylesheet', + href: normalizePath(path.join(MARS3D_BASE_URL, 'mars3d.css')) + } + }); + + if (isBuild && !rebuildCesium) { + tags.push({ + tag: 'script', + attrs: { + src: normalizePath(path.join(MARS3D_BASE_URL, 'mars3d.js')) } - ); + }); + } + } + + return tags; + } + }; +} +/** + * 集成cesium + * @param options + * @returns + */ +export function cesiumPlugin(options: VitePluginCesiumOptions = {}): Plugin { + let CESIUM_NAME = 'cesium'; + const { + rebuildCesium = false, + devMinifyCesium = false, + cesiumBuildRootPath = `node_modules/${CESIUM_NAME}/Build`, + cesiumBuildPath = `${cesiumBuildRootPath}/Cesium/`, + useCDN = null + } = options; + + // 默认使用的版本号 + let cdnVersion = Object.assign({ cesium: '1.105.0' }, useCDN); + + let CESIUM_BASE_URL = `${CESIUM_NAME}/`; + let outDir = 'dist'; + let base: string = '/'; + let isBuild: boolean = false; + + return { + name: 'vite-plugin-cesium', + + config(c, { command }) { + isBuild = command === 'build'; + if (c.base) { + base = c.base; + if (base === '') base = './'; + } + if (c.build?.outDir) { + outDir = c.build.outDir; + } + CESIUM_BASE_URL = path.posix.join(base, CESIUM_BASE_URL); + const userConfig: UserConfig = {}; + if (!isBuild) { + // -----------dev----------- + userConfig.define = { + CESIUM_BASE_URL: JSON.stringify(CESIUM_BASE_URL) + }; + } else { + // -----------build------------ + if (rebuildCesium) { + // build 1) rebuild cesium library + userConfig.build = { + assetsInlineLimit: 0, + chunkSizeWarningLimit: 5000, + rollupOptions: { + output: { + intro: `window.CESIUM_BASE_URL = "${CESIUM_BASE_URL}";` + } + } + }; + } else { + // build 2) copy Cesium.js later + let external = [CESIUM_NAME]; + let plugins = [externalGlobals({ cesium: 'Cesium' })]; + + userConfig.build = { + rollupOptions: { + external: external, + plugins: plugins + } + }; + } + } + return userConfig; + }, + + configureServer({ middlewares }) { + const cesiumPath = path.join(cesiumBuildRootPath, devMinifyCesium ? 'Cesium' : 'CesiumUnminified'); + middlewares.use(path.posix.join('/', CESIUM_BASE_URL), serveStatic(cesiumPath)); + }, + + async closeBundle() { + 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`)); + await fs.copy(path.join(cesiumBuildPath, 'Workers'), path.join(outDir, `${CESIUM_NAME}/Workers`)); + await fs.copy(path.join(cesiumBuildPath, 'Widgets'), path.join(outDir, `${CESIUM_NAME}/Widgets`)); + if (!rebuildCesium) { + await fs.copy(path.join(cesiumBuildPath, 'Cesium.js'), path.join(outDir, `${CESIUM_NAME}/Cesium.js`)); + } + } catch (err) { + console.error('copy failed', err); + } + } + }, + + transformIndexHtml() { + const tags: HtmlTagDescriptor[] = []; + if (useCDN) { + let cesiumVersion = 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` + } + } + ); + } 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(base, `${CESIUM_NAME}/Cesium.js`)) + } + }); } }