2.0 初始化
This commit is contained in:
parent
446c843f8f
commit
323ca1a193
|
|
@ -1,4 +1,6 @@
|
|||
.DS_Store
|
||||
node_modules
|
||||
dist
|
||||
demo/public
|
||||
yarn.lock
|
||||
yarn.lock
|
||||
pnpm-lock.yaml
|
||||
|
|
|
|||
12
.prettierrc
12
.prettierrc
|
|
@ -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
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
|
||||
[`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
|
||||
|
|
|
|||
|
|
@ -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()]
|
||||
});
|
||||
36
package.json
36
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 <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"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
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 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;
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
|
@ -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