Files
superwork/vscode/webview-ui/vite.config.ts
T
cruldra 6dac457ed1 ✨ feat(vscode): 代码阅读预览把注释、说明、问 AI 回答里的 mermaid 代码块画成图
- markdown.ts:mermaid 代码块出占位(源码转义后记在 data-source,里面先放原样的代码块);带增删的说明、逐字生成中的回答仍是普通代码块
- useMermaidDiagrams:页面上有占位才按需加载 mermaid(strict、跟 VS Code 字体),按源码 + 配色缓存 SVG,一次只画一张,换主题重画;画不出来留代码块、下面一行原因
- 打包:Vite 的按需加载辅助函数单独成块,加构建检查禁止别的块 import 入口(入口带 ?v= 加载,被 import 会整页再跑一遍、第二次拿 VS Code API 报错)
- 主题明暗判断抽到 lib/vscodeTheme,看板的改动面板共用
2026-10-13 18:51:05 +11:00

61 lines
2.6 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
import type { Plugin } from 'vite'
import path from 'node:path'
import tailwindcss from '@tailwindcss/vite'
import react from '@vitejs/plugin-react'
import { defineConfig } from 'vite'
/**
* 打包出的块里有 import 入口的就报错,免得到了 VS Code 里页面整个跑两遍。
*
* 入口由加载方加上 `?v=` 加载(见 [webview 页面](vscode/src/webview/html.ts#webviewHtml)),别的块按不带 `?v=` 的地址
* import 入口,浏览器当它是另一个模块,再加载、再跑一遍。
*/
function noEntryImports(): Plugin {
return {
name: 'no-entry-imports',
enforce: 'post',
generateBundle(_options, bundle) {
const chunks = Object.values(bundle).filter(file => file.type === 'chunk')
const entries = new Set(chunks.filter(chunk => chunk.isEntry).map(chunk => chunk.fileName))
for (const chunk of chunks) {
const imported = [...chunk.imports, ...chunk.dynamicImports].filter(file => entries.has(file))
if (imported.length > 0)
this.error(`${chunk.fileName} import 了入口 ${imported.join('、')}:入口带 ?v= 加载,这样会再跑一遍。把它们共用的模块用 manualChunks 拆进带哈希的块`)
}
},
}
}
export default defineConfig({
plugins: [react(), tailwindcss(), noEntryImports()],
base: './',
build: {
outDir: '../dist/webview-ui',
emptyOutDir: true,
// webview 的 CSP 只放行带 nonce 的 <script>,Vite 注入的 modulepreload <link> 会被拦下报错;
// 本地资源预加载也没有收益。入口脚本 import 的共享块会继承 nonce,照常加载。
modulePreload: false,
rollupOptions: {
// 两个 webview 页面:看板(index.html)和代码阅读预览(code-reader.html)
input: {
'index': path.resolve(__dirname, 'index.html'),
'code-reader': path.resolve(__dirname, 'code-reader.html'),
},
output: {
entryFileNames: 'assets/[name].js',
// 入口由加载方按 mtime 加 ?v= 防缓存,入口 import 的共享块(React 等)没有这一步,只能靠文件名带内容哈希
chunkFileNames: 'assets/[name]-[hash].js',
assetFileNames: 'assets/[name].[ext]',
// Vite 包在 import() 外面的辅助函数默认打进入口;按需加载的块(mermaid)里也有 import(),要用它就得 import 入口,
// 所以单独放一块
manualChunks: id => id.includes('vite/preload-helper') ? 'preload-helper' : undefined,
},
},
},
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
},
},
})