2.0 初始化

This commit is contained in:
小冰cc 2023-03-28 10:02:22 +08:00
parent 446c843f8f
commit 323ca1a193
12 changed files with 301 additions and 132 deletions

2
.gitignore vendored
View File

@ -1,4 +1,6 @@
.DS_Store
node_modules
dist
demo/public
yarn.lock
pnpm-lock.yaml

View File

@ -1,5 +1,7 @@
semi: true
tabWidth: 2
singleQuote: true
printWidth: 80
trailingComma: none
{
"semi": true,
"tabWidth": 2,
"singleQuote": true,
"printWidth": 120,
"trailingComma": "none"
}

147
README.md
View File

@ -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
<!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`
```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

14
demo/index.html Normal file
View File

@ -0,0 +1,14 @@
<!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.ts"></script>
</head>
<body>
<div id="cesiumContainer"></div>
</body>
</html>

16
demo/package.json Normal file
View File

@ -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:.."
}
}

7
demo/src/css/main.css Normal file
View File

@ -0,0 +1,7 @@
html, body, #cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}

11
demo/src/index.ts Normal file
View File

@ -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');

6
demo/vite.config.ts Normal file
View File

@ -0,0 +1,6 @@
import { defineConfig } from 'vite';
import cesium from 'vite-plugin-earth';
export default defineConfig({
plugins: [cesium()]
});

View File

@ -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 <xuwoool@qq.com>",
"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"
}
}

View File

@ -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({
const tags: HtmlTagDescriptor[] = [
{
tag: 'link',
attrs: {
rel: 'stylesheet',
href: normalizePath(
path.join(base, String(libPath), 'Cesium/Widgets/widgets.css')
)
},
injectTo: 'head'
});
href: normalizePath(path.join(CESIUM_BASE_URL, 'Widgets/widgets.css'))
}
}
];
if (isBuild && !rebuildCesium) {
tags.push({
tag: 'script',
attrs: {
src: normalizePath(
path.join(base, String(libPath), 'Cesium/Cesium.js')
)
},
injectTo: 'head'
src: normalizePath(path.join(CESIUM_BASE_URL, 'Cesium.js'))
}
});
}
return tags;
}
};
}
export default vitePluginEarth;

View File

@ -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
}
}

10
tsup.config.ts Normal file
View File

@ -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
});