import { readFileSync } from 'node:fs' import { fileURLToPath } from 'node:url' import vue from '@vitejs/plugin-vue' import { defineConfig } from 'vite' import dts from 'vite-plugin-dts' // 命名空间单一事实源在 @g3soft/tokens 的 SCSS 里(SCSS 无法读 JS,故 JS 向 SCSS 取)。 // 这里烘焙成 JS 常量 __G3_NAMESPACE__:运行时 useNamespace() 的默认值 + dev 一致性校验都用它。 // 消费方若用自定义 $namespace 重编译,需在自身构建里同步 define 同名常量(见 README)。 const configScssPath = fileURLToPath( new URL('../tokens/src/scss/_config.scss', import.meta.url), ) const configScss = readFileSync(configScssPath, 'utf-8') function readScssDefault(name: string, fallback: string): string { const match = configScss.match( new RegExp(`\\$${name}\\s*:\\s*['"]([^'"]+)['"]\\s*!default`), ) return match ? match[1] : fallback } const NAMESPACE = readScssDefault('namespace', 'g3') const STATE_PREFIX = readScssDefault('state-prefix', 'is') /** * 组件库构建:产出 ESM + 类型声明。 * * 关键点: * - vue 必须外置(external),否则包里会打进一份 Vue,消费方出现双实例 * - preserveModules 保留源码结构,消费方能按需 tree-shaking * - vite-plugin-dts 生成 dist/index.d.ts,配合 package.json 的 exports.types * - define.__G3_NAMESPACE__ 把编译期命名空间烘焙进 JS,供运行时 useNamespace 使用 */ export default defineConfig({ plugins: [ vue(), dts({ // 只产出声明文件,JS 交给 vite 本体 include: ['src'], // 选项名是 outDirs(复数)。旧写法 outDir 会被**静默忽略** —— vue-tsc 就是从这条报错里抓出来的。 outDirs: 'dist', // 刻意不打包成单个 d.ts:那需要 bundleTypes(旧名 rollupTypes,v5 已不存在) // 外加 @microsoft/api-extractor(peerDependency,当前未安装)。 // 现产物 = 逐文件 d.ts + dist/index.d.ts(barrel),与 package.json 的 exports.types 对得上。 }), ], define: { __G3_NAMESPACE__: JSON.stringify(NAMESPACE), __G3_STATE_PREFIX__: JSON.stringify(STATE_PREFIX), }, // 组件 SCSS 由 Vite 自带的 modern compiler API 编译 —— v6 起它是唯一实现, // `css.preprocessorOptions.scss.api` 选项已被移除,再写只会是一条不生效的多余配置 // (vue-tsc 会直接报 TS2769)。库自身只用默认 $namespace,不加 additionalData。 build: { lib: { entry: fileURLToPath(new URL('./src/index.ts', import.meta.url)), formats: ['es'], fileName: () => 'index.js', }, rollupOptions: { // 图标库同理外置:由消费方(或本包的 dependencies)解析,避免重复打包 external: ['vue', '@lucide/vue'], output: { preserveModules: true, preserveModulesRoot: 'src', entryFileNames: '[name].js', assetFileNames: 'style.css', }, }, }, })