diff --git a/.gitignore b/.gitignore index c8d2ef8..4f0ef04 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,6 @@ +.DS_Store node_modules dist demo/public -yarn.lock \ No newline at end of file +yarn.lock +pnpm-lock.yaml diff --git a/.prettierrc b/.prettierrc index b89bc72..a32846f 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,5 +1,7 @@ -semi: true -tabWidth: 2 -singleQuote: true -printWidth: 80 -trailingComma: none \ No newline at end of file +{ + "semi": true, + "tabWidth": 2, + "singleQuote": true, + "printWidth": 120, + "trailingComma": "none" +} \ No newline at end of file diff --git a/README.md b/README.md index d7a9fc2..fa37d63 100644 --- a/README.md +++ b/README.md @@ -1,14 +1,22 @@ -# ⚡ vite-plugin-earth +# ⚡ vite-plugin-cesium -Easily set up a [`cesium`] & [`mars3d-cesium`] project in [`Vite`]. +[![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) + +Easily set up a [`Cesium`] project in [`Vite`]. [`cesium`]: https://github.com/CesiumGS/cesium -[`mars3d`]: https://mars3d.cn/ +[`vite`]: https://github.com/vitejs/vite + +**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. + +Chinese tutorial: [中文教程](https://zhuanlan.zhihu.com/p/354856692) ## Install ```bash -npm i vite-plugin-earth -D +npm i cesium vite-plugin-cesium vite -D +# yarn add cesium vite-plugin-cesium vite -D ``` ## Usage @@ -17,53 +25,28 @@ add this plugin to `vite.config.js` ```js import { defineConfig } from 'vite'; -import earth from 'vite-plugin-earth'; +import cesium from 'vite-plugin-cesium'; export default defineConfig({ - plugins: [earth()] + plugins: [cesium()] }); ``` +add dev command to `package.json` + +```json +"scripts": { + "dev": "vite", + "build": "vite build" +} +``` + +run: + +`yarn dev` + ## Options -### **pkgName** - -- **Type :** `string` -- **Default :** `cesium` - -`mars3d-cesium` 为`mars3d`对应的依赖库 - -```js -import { defineConfig } from 'vite'; -import earth from 'vite-plugin-earth'; -export default defineConfig({ - plugins: [ - earth({ - pkgName: 'mars3d-cesium' - }) - ] -}); -``` - -### **libPath** - -- **Type :** `string` -- **Default :** `lib` - -将类库复制到指定的`lib/`目录下面 - -```js -import { defineConfig } from 'vite'; -import earth from 'vite-plugin-earth'; -export default defineConfig({ - plugins: [ - earth({ - libPath: 'lib' - }) - ] -}); -``` - -### **rebuildCesium** +**rebuildCesium** - **Type :** `boolean` - **Default :** `false` @@ -72,12 +55,82 @@ Default copy min cesium file to dist. if `true` will rebuild cesium from source. ```js import { defineConfig } from 'vite'; -import earth from 'vite-plugin-earth'; +import cesium from 'vite-plugin-cesium'; export default defineConfig({ plugins: [ - earth({ + cesium({ rebuildCesium: true }) ] }); ``` + +## Demo + +`src/index.js` + +```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` + +```html + + + + + + + cesium-vite + + + + +
+ + +``` + +`src/css/main.css` + +```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](https://github.com/nshen/vite-plugin-cesium/tree/main/demo) folder. + +## + +## License + +MIT diff --git a/demo/index.html b/demo/index.html new file mode 100644 index 0000000..bef254d --- /dev/null +++ b/demo/index.html @@ -0,0 +1,14 @@ + + + + + + + cesium-vite + + + + +
+ + diff --git a/demo/package.json b/demo/package.json new file mode 100644 index 0000000..82548bf --- /dev/null +++ b/demo/package.json @@ -0,0 +1,16 @@ +{ + "name": "cesium-demo", + "version": "1.0.0", + "license": "MIT", + "type": "module", + "scripts": { + "dev": "vite", + "build": "vite build", + "serve": "vite build && vite preview" + }, + "devDependencies": { + "cesium": "^1.96.0", + "vite": "^3.0.4", + "vite-plugin-earth": "link:.." + } +} diff --git a/demo/src/css/main.css b/demo/src/css/main.css new file mode 100644 index 0000000..902b715 --- /dev/null +++ b/demo/src/css/main.css @@ -0,0 +1,7 @@ +html, body, #cesiumContainer { + width: 100%; + height: 100%; + margin: 0; + padding: 0; + overflow: hidden; +} \ No newline at end of file diff --git a/demo/src/index.ts b/demo/src/index.ts new file mode 100644 index 0000000..391e1ab --- /dev/null +++ b/demo/src/index.ts @@ -0,0 +1,11 @@ +/** + * You can also import Cesium Object like this + * + * import * as Cesium from 'cesium'; + * const viewer = new Cesium.Viewer('cesiumContainer'); + */ + +import { Viewer } from 'cesium'; +import './css/main.css'; + +const viewer = new Viewer('cesiumContainer'); diff --git a/demo/vite.config.ts b/demo/vite.config.ts new file mode 100644 index 0000000..8ba056b --- /dev/null +++ b/demo/vite.config.ts @@ -0,0 +1,6 @@ +import { defineConfig } from 'vite'; +import cesium from 'vite-plugin-earth'; + +export default defineConfig({ + plugins: [cesium()] +}); diff --git a/package.json b/package.json index e270cc3..365a656 100644 --- a/package.json +++ b/package.json @@ -1,28 +1,39 @@ { "name": "vite-plugin-earth", - "version": "1.2.3", + "version": "2.0.0", "description": "cesium & mars3d library plugin for Vite", - "main": "dist/index.js", - "types": "dist/index.d.ts", + "main": "./dist/index.js", + "module": "./dist/index.mjs", + "types": "./dist/index.d.ts", "files": [ "dist" ], + "exports": { + ".": { + "types": "./dist/index.d.ts", + "import": "./dist/index.mjs", + "require": "./dist/index.js" + } + }, "scripts": { - "build": "tsc", - "dev": "tsc -w" + "dev": "tsup --watch", + "build": "tsup", + "prepare": "npm run build" }, "keywords": [ + "vite", + "vite-plugin", "cesium", "mars3d" ], - "author": "xuxb", + "author": "xuxb ", "license": "MIT", "repository": { "type": "git", - "url": "git+http://git.hfxtsk.cn" + "url": "git+https://github.com/hfxtsk/vite-plugin-earth" }, "bugs": { - "url": "http://git.hfxtsk.cn" + "url": "https://github.com/hfxtsk/vite-plugin-earth/issues" }, "dependencies": { "fs-extra": "^9.1.0", @@ -35,11 +46,14 @@ "@types/node": "^14.14.31", "@types/serve-static": "^1.13.9", "prettier": "^2.2.1", + "tsup": "^6.2.1", "typescript": "^4.2.2", - "vite": "^2.8.0" + "vite": "^3.0.4" }, "peerDependencies": { + "cesium": "^1.95.0", "mars3d-cesium": "^1.90.0", - "mars3d": "^3.2.0" + "mars3d": "^3.2.0", + "vite": ">=2.7.1" } -} \ No newline at end of file +} diff --git a/src/index.ts b/src/index.ts index 27a664d..c9e56f4 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,89 +1,117 @@ -/** - * @Author: xuwoool@qq.com - * @Date: 2022-04-22 13:50:15 - */ -import path from 'path'; import fs from 'fs-extra'; +import path from 'path'; +import externalGlobals from 'rollup-plugin-external-globals'; import serveStatic from 'serve-static'; -import { HtmlTagDescriptor, normalizePath, Plugin } from 'vite'; +import { HtmlTagDescriptor, normalizePath, Plugin, UserConfig } from 'vite'; -interface PluginOptions { - libPath: String; - useUnminified: Boolean; - pkgName: 'mars3d-cesium' | 'cesium'; +interface VitePluginEarthOptions { + /** + * rebuild cesium library, default: false + */ + rebuildCesium?: boolean; + devMinifyCesium?: boolean; + cesiumBuildRootPath?: string; + cesiumBuildPath?: string; } -function vitePluginEarth( - options: PluginOptions = { - libPath: 'lib', - useUnminified: false, - pkgName: 'cesium' - } -): Plugin { - const cesiumBuildPath = `./node_modules/${options.pkgName}/Build`; - let base = '/'; +export default function vitePluginEarth(options: VitePluginEarthOptions = {}): Plugin { + const { + rebuildCesium = false, + devMinifyCesium = false, + cesiumBuildRootPath = 'node_modules/cesium/Build', + cesiumBuildPath = 'node_modules/cesium/Build/Cesium/' + } = options; + + let CESIUM_BASE_URL = 'cesium/'; let outDir = 'dist'; - let isBuild = false; - let libPath = options.libPath || 'lib'; - let useUnminified = options.useUnminified || false; + let base: string = '/'; + let isBuild: boolean = false; return { name: 'vite-plugin-earth', - config(config, { command }) { + + config(c, { command }) { isBuild = command === 'build'; - base = config.base || '/'; - outDir = config.build?.outDir || 'dist'; + 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 + userConfig.build = { + rollupOptions: { + external: ['cesium'], + plugins: [externalGlobals({ cesium: 'Cesium' })] + } + }; + } + } + return userConfig; }, + configureServer({ middlewares }) { - middlewares.use( - `/${libPath}/Cesium`, - serveStatic( - normalizePath( - path.join( - cesiumBuildPath, - useUnminified ? 'CesiumUnminified' : 'Cesium' - ) - ) - ) - ); + const cesiumPath = path.join(cesiumBuildRootPath, devMinifyCesium ? 'Cesium' : 'CesiumUnminified'); + middlewares.use(path.posix.join('/', CESIUM_BASE_URL), serveStatic(cesiumPath)); }, - closeBundle() { + + async closeBundle() { if (isBuild) { try { - fs.copySync( - path.join(cesiumBuildPath, 'Cesium'), - path.join(outDir, String(libPath), 'Cesium') - ); - } catch (e) {} + await fs.copy(path.join(cesiumBuildPath, 'Assets'), path.join(outDir, 'cesium/Assets')); + await fs.copy(path.join(cesiumBuildPath, 'ThirdParty'), path.join(outDir, 'cesium/ThirdParty')); + await fs.copy(path.join(cesiumBuildPath, 'Workers'), path.join(outDir, 'cesium/Workers')); + await fs.copy(path.join(cesiumBuildPath, 'Widgets'), path.join(outDir, 'cesium/Widgets')); + if (!rebuildCesium) { + await fs.copy(path.join(cesiumBuildPath, 'Cesium.js'), path.join(outDir, 'cesium/Cesium.js')); + } + } catch (err) { + console.error('copy failed', err); + } } }, transformIndexHtml() { - let tags: HtmlTagDescriptor[] = []; - - tags.push({ - tag: 'link', - attrs: { - rel: 'stylesheet', - href: normalizePath( - path.join(base, String(libPath), 'Cesium/Widgets/widgets.css') - ) - }, - injectTo: 'head' - }); - tags.push({ - tag: 'script', - attrs: { - src: normalizePath( - path.join(base, String(libPath), 'Cesium/Cesium.js') - ) - }, - injectTo: 'head' - }); - + 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')) + } + }); + } return tags; } }; } - -export default vitePluginEarth; diff --git a/tsconfig.json b/tsconfig.json index 9e479cf..0639959 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,11 +1,17 @@ { - "extends": "@tsconfig/node12/tsconfig.json", "include": [ "src" ], "compilerOptions": { "outDir": "dist", "declaration": true, + "target": "ES2017", + "module": "commonjs", "removeComments": false, - }, + "strict": true, + "moduleResolution": "node", + "esModuleInterop": true, + "skipLibCheck": true, + "forceConsistentCasingInFileNames": true + } } \ No newline at end of file diff --git a/tsup.config.ts b/tsup.config.ts new file mode 100644 index 0000000..0455782 --- /dev/null +++ b/tsup.config.ts @@ -0,0 +1,10 @@ +import { defineConfig } from 'tsup'; + +export default defineConfig({ + entry: ['src/index.ts'], + format: ['esm', 'cjs'], + splitting: false, + clean: true, + dts: true, + minify: false +});