From d626a14c7f6341cf0e25fb76c754360a3f1e0f8d Mon Sep 17 00:00:00 2001 From: Shigma <1700011071@pku.edu.cn> Date: Tue, 30 Mar 2021 23:45:50 +0800 Subject: [PATCH] feat(status): optimize build flow --- packages/plugin-status/build/index.ts | 89 +++++++++---------- packages/plugin-status/client/index.dev.html | 13 --- packages/plugin-status/client/index.html | 3 - packages/plugin-status/client/main.ts | 2 +- .../client/views/layout/index.vue | 1 + packages/plugin-status/server/data.ts | 1 + packages/plugin-status/server/index.ts | 2 +- packages/plugin-status/server/server.ts | 29 +++--- packages/plugin-teach/src/index.ts | 4 +- 9 files changed, 61 insertions(+), 83 deletions(-) delete mode 100644 packages/plugin-status/client/index.dev.html diff --git a/packages/plugin-status/build/index.ts b/packages/plugin-status/build/index.ts index 0caa4f29c4..e28cd69338 100644 --- a/packages/plugin-status/build/index.ts +++ b/packages/plugin-status/build/index.ts @@ -1,12 +1,12 @@ /* eslint-disable quote-props */ -import { build } from 'vite' +import * as vite from 'vite' import { resolve } from 'path' import { copyFile } from 'fs-extra' import createPluginVue from '@vitejs/plugin-vue' const root = resolve(__dirname, '../client') -const pkgRoot = resolve(__dirname, '..') +const dist = resolve(__dirname, '../dist') const pluginVue = createPluginVue() function findModulePath(id: string) { @@ -15,79 +15,76 @@ function findModulePath(id: string) { return path.slice(0, path.indexOf(keyword)) + keyword.slice(0, -1) } -;(async () => { - // build for index.html - await build({ +function build(root: string, config: vite.UserConfig) { + const { rollupOptions } = config.build || {} + return vite.build({ + ...config, root, - base: './', build: { outDir: '../dist', minify: 'esbuild', emptyOutDir: true, + ...config.build, rollupOptions: { - external: ['./~/vue', './~/client'], + ...rollupOptions, + external: [root + '/vue.js', root + '/vue-router.js', root + '/client.js'], + output: rollupOptions?.input ? { + format: 'module', + entryFileNames: '[name].js', + ...rollupOptions.output, + } : undefined, + }, + }, + resolve: { + alias: { + 'vue': root + '/vue.js', + 'vue-router': root + '/vue-router.js', + '~/client': root + '/client.js', + ...config.resolve?.alias, }, }, + }) +} + +;(async () => { + // build for index.html + await build(root, { + base: './', plugins: [pluginVue], resolve: { alias: { - 'vue': './~/vue', - '~/client': './~/client', '~/variables': root + '/index.scss', }, }, }) - // build for client.js - await build({ - root, + await copyFile(findModulePath('vue') + '/dist/vue.runtime.esm-browser.prod.js', dist + '/vue.js') + + // build for client.js, vue-router.js + await build(resolve(__dirname, '../../..'), { build: { - outDir: '../dist/~', - minify: 'esbuild', - lib: { - formats: ['es'], - entry: 'index.ts', - name: 'KoishiClient', - }, + outDir: dist, + emptyOutDir: false, rollupOptions: { - external: ['./~/vue', './~/client'], - output: { - entryFileNames: 'client.js', + input: { + 'client': root + '/index.ts', + 'vue-router': findModulePath('vue-router') + '/dist/vue-router.esm-browser.js', }, - }, - }, - resolve: { - alias: { - 'vue': './~/vue', - '~/client': './~/client', + treeshake: false, + preserveEntrySignatures: 'strict', }, }, }) - await copyFile(findModulePath('vue') + '/dist/vue.runtime.esm-browser.prod.js', pkgRoot + '/dist/~/vue.js') - // build for koishi-plugin-teach - build({ + const teach = resolve(__dirname, '../../plugin-teach/client') + build(teach, { build: { - minify: 'esbuild', - emptyOutDir: true, assetsDir: '', - outDir: resolve(__dirname, '../../plugin-teach/dist'), rollupOptions: { - input: resolve(__dirname, '../../plugin-teach/client'), - external: ['./~/client', './~/vue'], - output: { - format: 'es', - entryFileNames: '[name].js', - }, + input: teach + '/index.ts', }, }, plugins: [pluginVue], - resolve: { - alias: { - 'vue': './~/vue', - 'koishi-plugin-status/client': './~/client', - }, - }, }) })() diff --git a/packages/plugin-status/client/index.dev.html b/packages/plugin-status/client/index.dev.html deleted file mode 100644 index fcd54cb7b0..0000000000 --- a/packages/plugin-status/client/index.dev.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - Koishi 控制台 - - -
- - - diff --git a/packages/plugin-status/client/index.html b/packages/plugin-status/client/index.html index 01d29a7dd0..fcd54cb7b0 100644 --- a/packages/plugin-status/client/index.html +++ b/packages/plugin-status/client/index.html @@ -5,9 +5,6 @@ Koishi 控制台 - - -
diff --git a/packages/plugin-status/client/main.ts b/packages/plugin-status/client/main.ts index 6d1a715385..4c75fb22d4 100644 --- a/packages/plugin-status/client/main.ts +++ b/packages/plugin-status/client/main.ts @@ -7,7 +7,7 @@ import Button from './components/button.vue' import Input from './components/input.vue' import Numeric from './components/numeric.vue' import App from './views/layout/index.vue' -import { start, user, receive, router } from '.' +import { start, user, receive, router } from '~/client' import '@fortawesome/fontawesome-free/css/fontawesome.css' import '@fortawesome/fontawesome-free/css/brands.css' diff --git a/packages/plugin-status/client/views/layout/index.vue b/packages/plugin-status/client/views/layout/index.vue index 7e8100bff4..9c93b38e35 100644 --- a/packages/plugin-status/client/views/layout/index.vue +++ b/packages/plugin-status/client/views/layout/index.vue @@ -5,6 +5,7 @@
+

正在加载数据……

diff --git a/packages/plugin-status/server/data.ts b/packages/plugin-status/server/data.ts index f2f406fa65..3840d64c10 100644 --- a/packages/plugin-status/server/data.ts +++ b/packages/plugin-status/server/data.ts @@ -156,6 +156,7 @@ export class Meta implements DataSource { } extend(callback: Meta.Extension) { + this.timestamp = 0 this.callbacks.push(callback) } } diff --git a/packages/plugin-status/server/index.ts b/packages/plugin-status/server/index.ts index 67bc549062..037d4af611 100644 --- a/packages/plugin-status/server/index.ts +++ b/packages/plugin-status/server/index.ts @@ -104,7 +104,7 @@ export function apply(ctx: Context, config: Config = {}) { session.user.lastCall = new Date() }) - ctx.router?.get(apiPath, async (koa) => { + ctx.router.get(apiPath, async (koa) => { koa.set('Access-Control-Allow-Origin', '*') koa.body = await getStatus() }) diff --git a/packages/plugin-status/server/server.ts b/packages/plugin-status/server/server.ts index d75096a2ce..1a2f84b7bd 100644 --- a/packages/plugin-status/server/server.ts +++ b/packages/plugin-status/server/server.ts @@ -54,30 +54,27 @@ export class WebServer { const { uiPath } = this.config const [vite] = await Promise.all([this.createVite(), this.createAdapter()]) - this.ctx.router.get(uiPath + '/plugin/:name', async (ctx) => { - const filename = this.entries[ctx.params.name] - if (!filename) return ctx.status = 404 - ctx.type = extname(filename) - return ctx.body = createReadStream(filename) - }) - this.ctx.router.get(uiPath + '(/.+)*', async (ctx) => { // add trailing slash and redirect if (ctx.path === uiPath && !uiPath.endsWith('/')) { return ctx.redirect(ctx.path + '/') } - const filename = resolve(this.root, ctx.path.slice(uiPath.length).replace(/^\/+/, '')) + const name = ctx.path.slice(uiPath.length).replace(/^\/+/, '') + const sendFile = (filename: string) => { + ctx.type = extname(filename) + return ctx.body = createReadStream(filename) + } + if (this.entries[name]) return sendFile(this.entries[name]) + const filename = resolve(this.root, name) if (!filename.startsWith(this.root) && !filename.includes('node_modules')) { return ctx.status = 403 } const stats = await fs.stat(filename).catch(noop) - if (stats?.isFile()) { - ctx.type = extname(filename) - return ctx.body = createReadStream(filename) - } - let template = await fs.readFile(resolve(this.root, `index.${this.config.devMode ? 'dev.' : ''}html`), 'utf8') + if (stats?.isFile()) return sendFile(filename) + console.log(ctx.path, stats) + let template = await fs.readFile(resolve(this.root, 'index.html'), 'utf8') if (vite) template = await vite.transformIndexHtml(uiPath, template) - ctx.set('content-type', 'text/html') + ctx.type = 'html' ctx.body = this.transformHtml(template) }) } @@ -87,9 +84,7 @@ export class WebServer { return `window.KOISHI_${snakeCase(key).toUpperCase()} = ${JSON.stringify(value)};` }).join('\n') + '' const bodyInjection = Object.entries(this.entries).map(([name, filename]) => { - const src = this.config.devMode - ? '/vite/@fs' + filename - : this.config.uiPath + '/~/' + name + const src = this.config.devMode ? '/vite/@fs' + filename : `./${name}` return `` }).join('\n') return template diff --git a/packages/plugin-teach/src/index.ts b/packages/plugin-teach/src/index.ts index 2c56b8828f..7e9acab8cc 100644 --- a/packages/plugin-teach/src/index.ts +++ b/packages/plugin-teach/src/index.ts @@ -238,10 +238,10 @@ export function apply(ctx: Context, config: Config = {}) { }) const filename = resolve(__dirname, webui.config.devMode ? '../client' : '../dist/index.js') - webui.entries.teach = filename + webui.entries['teach.js'] = filename ctx.before('disconnect', () => { - delete webui.entries.teach + delete webui.entries['teach.js'] }) } }