2.0 初始化
This commit is contained in:
parent
446c843f8f
commit
323ca1a193
|
|
@ -1,4 +1,6 @@
|
||||||
|
.DS_Store
|
||||||
node_modules
|
node_modules
|
||||||
dist
|
dist
|
||||||
demo/public
|
demo/public
|
||||||
yarn.lock
|
yarn.lock
|
||||||
|
pnpm-lock.yaml
|
||||||
|
|
|
||||||
12
.prettierrc
12
.prettierrc
|
|
@ -1,5 +1,7 @@
|
||||||
semi: true
|
{
|
||||||
tabWidth: 2
|
"semi": true,
|
||||||
singleQuote: true
|
"tabWidth": 2,
|
||||||
printWidth: 80
|
"singleQuote": true,
|
||||||
trailingComma: none
|
"printWidth": 120,
|
||||||
|
"trailingComma": "none"
|
||||||
|
}
|
||||||
147
README.md
147
README.md
|
|
@ -1,14 +1,22 @@
|
||||||
# ⚡ vite-plugin-earth
|
# ⚡ vite-plugin-cesium
|
||||||
|
|
||||||
Easily set up a [`cesium`] & [`mars3d-cesium`] project in [`Vite`].
|
[](https://www.npmjs.com/package/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
|
[`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
|
## Install
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npm i vite-plugin-earth -D
|
npm i cesium vite-plugin-cesium vite -D
|
||||||
|
# yarn add cesium vite-plugin-cesium vite -D
|
||||||
```
|
```
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
@ -17,53 +25,28 @@ add this plugin to `vite.config.js`
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import { defineConfig } from 'vite';
|
import { defineConfig } from 'vite';
|
||||||
import earth from 'vite-plugin-earth';
|
import cesium from 'vite-plugin-cesium';
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
plugins: [earth()]
|
plugins: [cesium()]
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
|
add dev command to `package.json`
|
||||||
|
|
||||||
|
```json
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build"
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
run:
|
||||||
|
|
||||||
|
`yarn dev`
|
||||||
|
|
||||||
## Options
|
## Options
|
||||||
|
|
||||||
### **pkgName**
|
**rebuildCesium**
|
||||||
|
|
||||||
- **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**
|
|
||||||
|
|
||||||
- **Type :** `boolean`
|
- **Type :** `boolean`
|
||||||
- **Default :** `false`
|
- **Default :** `false`
|
||||||
|
|
@ -72,12 +55,82 @@ 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 earth from 'vite-plugin-earth';
|
import cesium from 'vite-plugin-cesium';
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
plugins: [
|
plugins: [
|
||||||
earth({
|
cesium({
|
||||||
rebuildCesium: true
|
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
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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:.."
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
html, body, #cesiumContainer {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
@ -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');
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
import { defineConfig } from 'vite';
|
||||||
|
import cesium from 'vite-plugin-earth';
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [cesium()]
|
||||||
|
});
|
||||||
34
package.json
34
package.json
|
|
@ -1,28 +1,39 @@
|
||||||
{
|
{
|
||||||
"name": "vite-plugin-earth",
|
"name": "vite-plugin-earth",
|
||||||
"version": "1.2.3",
|
"version": "2.0.0",
|
||||||
"description": "cesium & mars3d library plugin for Vite",
|
"description": "cesium & mars3d library plugin for Vite",
|
||||||
"main": "dist/index.js",
|
"main": "./dist/index.js",
|
||||||
"types": "dist/index.d.ts",
|
"module": "./dist/index.mjs",
|
||||||
|
"types": "./dist/index.d.ts",
|
||||||
"files": [
|
"files": [
|
||||||
"dist"
|
"dist"
|
||||||
],
|
],
|
||||||
|
"exports": {
|
||||||
|
".": {
|
||||||
|
"types": "./dist/index.d.ts",
|
||||||
|
"import": "./dist/index.mjs",
|
||||||
|
"require": "./dist/index.js"
|
||||||
|
}
|
||||||
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"build": "tsc",
|
"dev": "tsup --watch",
|
||||||
"dev": "tsc -w"
|
"build": "tsup",
|
||||||
|
"prepare": "npm run build"
|
||||||
},
|
},
|
||||||
"keywords": [
|
"keywords": [
|
||||||
|
"vite",
|
||||||
|
"vite-plugin",
|
||||||
"cesium",
|
"cesium",
|
||||||
"mars3d"
|
"mars3d"
|
||||||
],
|
],
|
||||||
"author": "xuxb",
|
"author": "xuxb <xuwoool@qq.com>",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
"url": "git+http://git.hfxtsk.cn"
|
"url": "git+https://github.com/hfxtsk/vite-plugin-earth"
|
||||||
},
|
},
|
||||||
"bugs": {
|
"bugs": {
|
||||||
"url": "http://git.hfxtsk.cn"
|
"url": "https://github.com/hfxtsk/vite-plugin-earth/issues"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"fs-extra": "^9.1.0",
|
"fs-extra": "^9.1.0",
|
||||||
|
|
@ -35,11 +46,14 @@
|
||||||
"@types/node": "^14.14.31",
|
"@types/node": "^14.14.31",
|
||||||
"@types/serve-static": "^1.13.9",
|
"@types/serve-static": "^1.13.9",
|
||||||
"prettier": "^2.2.1",
|
"prettier": "^2.2.1",
|
||||||
|
"tsup": "^6.2.1",
|
||||||
"typescript": "^4.2.2",
|
"typescript": "^4.2.2",
|
||||||
"vite": "^2.8.0"
|
"vite": "^3.0.4"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
|
"cesium": "^1.95.0",
|
||||||
"mars3d-cesium": "^1.90.0",
|
"mars3d-cesium": "^1.90.0",
|
||||||
"mars3d": "^3.2.0"
|
"mars3d": "^3.2.0",
|
||||||
|
"vite": ">=2.7.1"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
160
src/index.ts
160
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 fs from 'fs-extra';
|
||||||
|
import path from 'path';
|
||||||
|
import externalGlobals from 'rollup-plugin-external-globals';
|
||||||
import serveStatic from 'serve-static';
|
import serveStatic from 'serve-static';
|
||||||
import { HtmlTagDescriptor, normalizePath, Plugin } from 'vite';
|
import { HtmlTagDescriptor, normalizePath, Plugin, UserConfig } from 'vite';
|
||||||
|
|
||||||
interface PluginOptions {
|
interface VitePluginEarthOptions {
|
||||||
libPath: String;
|
/**
|
||||||
useUnminified: Boolean;
|
* rebuild cesium library, default: false
|
||||||
pkgName: 'mars3d-cesium' | 'cesium';
|
*/
|
||||||
|
rebuildCesium?: boolean;
|
||||||
|
devMinifyCesium?: boolean;
|
||||||
|
cesiumBuildRootPath?: string;
|
||||||
|
cesiumBuildPath?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
function vitePluginEarth(
|
export default function vitePluginEarth(options: VitePluginEarthOptions = {}): Plugin {
|
||||||
options: PluginOptions = {
|
const {
|
||||||
libPath: 'lib',
|
rebuildCesium = false,
|
||||||
useUnminified: false,
|
devMinifyCesium = false,
|
||||||
pkgName: 'cesium'
|
cesiumBuildRootPath = 'node_modules/cesium/Build',
|
||||||
}
|
cesiumBuildPath = 'node_modules/cesium/Build/Cesium/'
|
||||||
): Plugin {
|
} = options;
|
||||||
const cesiumBuildPath = `./node_modules/${options.pkgName}/Build`;
|
|
||||||
let base = '/';
|
let CESIUM_BASE_URL = 'cesium/';
|
||||||
let outDir = 'dist';
|
let outDir = 'dist';
|
||||||
let isBuild = false;
|
let base: string = '/';
|
||||||
let libPath = options.libPath || 'lib';
|
let isBuild: boolean = false;
|
||||||
let useUnminified = options.useUnminified || false;
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
name: 'vite-plugin-earth',
|
name: 'vite-plugin-earth',
|
||||||
config(config, { command }) {
|
|
||||||
|
config(c, { command }) {
|
||||||
isBuild = command === 'build';
|
isBuild = command === 'build';
|
||||||
base = config.base || '/';
|
if (c.base) {
|
||||||
outDir = config.build?.outDir || 'dist';
|
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 }) {
|
configureServer({ middlewares }) {
|
||||||
middlewares.use(
|
const cesiumPath = path.join(cesiumBuildRootPath, devMinifyCesium ? 'Cesium' : 'CesiumUnminified');
|
||||||
`/${libPath}/Cesium`,
|
middlewares.use(path.posix.join('/', CESIUM_BASE_URL), serveStatic(cesiumPath));
|
||||||
serveStatic(
|
|
||||||
normalizePath(
|
|
||||||
path.join(
|
|
||||||
cesiumBuildPath,
|
|
||||||
useUnminified ? 'CesiumUnminified' : 'Cesium'
|
|
||||||
)
|
|
||||||
)
|
|
||||||
)
|
|
||||||
);
|
|
||||||
},
|
},
|
||||||
closeBundle() {
|
|
||||||
|
async closeBundle() {
|
||||||
if (isBuild) {
|
if (isBuild) {
|
||||||
try {
|
try {
|
||||||
fs.copySync(
|
await fs.copy(path.join(cesiumBuildPath, 'Assets'), path.join(outDir, 'cesium/Assets'));
|
||||||
path.join(cesiumBuildPath, 'Cesium'),
|
await fs.copy(path.join(cesiumBuildPath, 'ThirdParty'), path.join(outDir, 'cesium/ThirdParty'));
|
||||||
path.join(outDir, String(libPath), 'Cesium')
|
await fs.copy(path.join(cesiumBuildPath, 'Workers'), path.join(outDir, 'cesium/Workers'));
|
||||||
);
|
await fs.copy(path.join(cesiumBuildPath, 'Widgets'), path.join(outDir, 'cesium/Widgets'));
|
||||||
} catch (e) {}
|
if (!rebuildCesium) {
|
||||||
|
await fs.copy(path.join(cesiumBuildPath, 'Cesium.js'), path.join(outDir, 'cesium/Cesium.js'));
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error('copy failed', err);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
transformIndexHtml() {
|
transformIndexHtml() {
|
||||||
let tags: HtmlTagDescriptor[] = [];
|
const tags: HtmlTagDescriptor[] = [
|
||||||
|
{
|
||||||
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(base, String(libPath), 'Cesium/Widgets/widgets.css')
|
}
|
||||||
)
|
];
|
||||||
},
|
if (isBuild && !rebuildCesium) {
|
||||||
injectTo: 'head'
|
tags.push({
|
||||||
});
|
tag: 'script',
|
||||||
tags.push({
|
attrs: {
|
||||||
tag: 'script',
|
src: normalizePath(path.join(CESIUM_BASE_URL, 'Cesium.js'))
|
||||||
attrs: {
|
}
|
||||||
src: normalizePath(
|
});
|
||||||
path.join(base, String(libPath), 'Cesium/Cesium.js')
|
}
|
||||||
)
|
|
||||||
},
|
|
||||||
injectTo: 'head'
|
|
||||||
});
|
|
||||||
|
|
||||||
return tags;
|
return tags;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
export default vitePluginEarth;
|
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,17 @@
|
||||||
{
|
{
|
||||||
"extends": "@tsconfig/node12/tsconfig.json",
|
|
||||||
"include": [
|
"include": [
|
||||||
"src"
|
"src"
|
||||||
],
|
],
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"outDir": "dist",
|
"outDir": "dist",
|
||||||
"declaration": true,
|
"declaration": true,
|
||||||
|
"target": "ES2017",
|
||||||
|
"module": "commonjs",
|
||||||
"removeComments": false,
|
"removeComments": false,
|
||||||
},
|
"strict": true,
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"forceConsistentCasingInFileNames": true
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -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
|
||||||
|
});
|
||||||
Loading…
Reference in New Issue