@quiteer/vite 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +160 -0
- package/cli.ts +62 -0
- package/dist/bin/context-Db5EuGKU-B3vpL0eS.mjs +24 -0
- package/dist/bin/dist-BmyFpZwL.mjs +7 -0
- package/dist/bin/dist-BniM_x9D.mjs +5256 -0
- package/dist/bin/dist-Bvgk2hb8.mjs +187 -0
- package/dist/bin/dist-CjNY_432.mjs +473 -0
- package/dist/bin/dist-DQNZhGEj.mjs +10562 -0
- package/dist/bin/esm-CQYKr9An.mjs +1557 -0
- package/dist/bin/experimental-index-DiVJ_oZg.mjs +71 -0
- package/dist/bin/qvite.mjs +244 -0
- package/dist/bin/resolver-DymnxKPB-UI_9xIg2.mjs +16 -0
- package/dist/bin/src-BwxUhqZU-Dr1MNcyS.mjs +5046 -0
- package/dist/bin/tsc-TmK__neM.mjs +406 -0
- package/dist/index.d.mts +118 -0
- package/dist/index.mjs +5965 -0
- package/index.ts +106 -0
- package/package.json +60 -0
- package/src/build.ts +43 -0
- package/src/defaults.ts +36 -0
- package/src/getConfig.ts +52 -0
- package/src/plugins.ts +14 -0
- package/src/store.ts +13 -0
- package/src/transform.ts +50 -0
- package/src/typings.ts +48 -0
- package/src/watch.ts +60 -0
- package/tsconfig.json +24 -0
- package/tsdown.config.ts +20 -0
package/README.md
ADDED
|
@@ -0,0 +1,160 @@
|
|
|
1
|
+
# @quiteer/vite
|
|
2
|
+
|
|
3
|
+
> `@quiteer/vite` 是在 Vite 基础上增强的前端构建与开发 CLI,内置插件编排、环境变量注入与 HTML 虚拟插入等能力,并支持与 `tsdown` 联动进行前后端/工具产物的构建统一。
|
|
4
|
+
> 文档地址:[qvite 文档](https://quiteerjs.github.io/web/ci/qvite.html)
|
|
5
|
+
|
|
6
|
+
## 特性
|
|
7
|
+
|
|
8
|
+
- 插件即开即用:通过配置对象启用/配置 `@quiteer/vite-plugins` 的常用插件
|
|
9
|
+
- 环境变量统一:按 `mode` 自动合并并注入到应用,默认支持前缀 `QVITE_` 与 `VITE_`
|
|
10
|
+
- HTML 虚拟插入:无需改动模板即可插入脚本、样式与自定义标签
|
|
11
|
+
- Vite/tsdown 联动:开发与构建阶段统一调用,减少脚手架切换成本
|
|
12
|
+
- 强类型提示:提供 `defineConfig`、`ConfigEnv<T>` 等类型工具,完善的 IDE 体验
|
|
13
|
+
|
|
14
|
+
## 安装
|
|
15
|
+
|
|
16
|
+
```bash
|
|
17
|
+
pnpm add -D @quiteer/vite
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
## 快速开始
|
|
21
|
+
|
|
22
|
+
1. 创建 `qvite.config.ts`
|
|
23
|
+
|
|
24
|
+
```ts
|
|
25
|
+
import type { ConfigEnv } from '@quiteer/vite'
|
|
26
|
+
import { defineConfig } from '@quiteer/vite'
|
|
27
|
+
|
|
28
|
+
export default defineConfig((envConfig) => {
|
|
29
|
+
const { env } = envConfig as ConfigEnv<ImportMetaEnv>
|
|
30
|
+
|
|
31
|
+
return {
|
|
32
|
+
html: {
|
|
33
|
+
config: {
|
|
34
|
+
title: '示例标题'
|
|
35
|
+
}
|
|
36
|
+
},
|
|
37
|
+
vite: {
|
|
38
|
+
server: { port: 8090 }
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
})
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
2. 配置 `env.config.ts`(可选)
|
|
45
|
+
|
|
46
|
+
```ts
|
|
47
|
+
import type { EnvConfig } from '@quiteer/vite-plugins'
|
|
48
|
+
|
|
49
|
+
type MyConfig = EnvConfig<'baseURL'>
|
|
50
|
+
|
|
51
|
+
export default {
|
|
52
|
+
default: { desc: '通用变量' },
|
|
53
|
+
development: { desc: '开发', baseURL: 'http://localhost:3000' },
|
|
54
|
+
production: { desc: '生产', baseURL: 'https://api.example.com' }
|
|
55
|
+
} satisfies MyConfig
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
3. 增强类型提示(Node 配置文件项目)
|
|
59
|
+
|
|
60
|
+
- 在 `tsconfig.node.json` 中添加:
|
|
61
|
+
|
|
62
|
+
```json
|
|
63
|
+
{
|
|
64
|
+
"compilerOptions": {
|
|
65
|
+
"types": ["node", "vite/client"]
|
|
66
|
+
},
|
|
67
|
+
"include": ["qvite.config.ts", "env.d.ts"]
|
|
68
|
+
}
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
- 在 `env.d.ts` 中声明:
|
|
72
|
+
|
|
73
|
+
```ts
|
|
74
|
+
interface ImportMetaEnv {
|
|
75
|
+
readonly VITE_BASEURL: string
|
|
76
|
+
readonly VITE_DESC: string
|
|
77
|
+
}
|
|
78
|
+
interface ImportMeta { readonly env: ImportMetaEnv }
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
## 命令
|
|
82
|
+
|
|
83
|
+
- 开发:
|
|
84
|
+
|
|
85
|
+
```bash
|
|
86
|
+
qvite dev -m development -p 8090 --minify
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
- 构建:
|
|
90
|
+
|
|
91
|
+
```bash
|
|
92
|
+
qvite build -m production --minify
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
## 配置说明
|
|
96
|
+
|
|
97
|
+
`QviteConfig`(见 `src/typings.ts`)包含以下字段:
|
|
98
|
+
|
|
99
|
+
- `vite`:Vite 原生配置对象(会与内部默认合并)
|
|
100
|
+
- `tsdown`:`tsdown` 的 `UserConfig | UserConfig[]`
|
|
101
|
+
- `plugins`:插件开关与参数(布尔或参数数组)
|
|
102
|
+
- `html`:虚拟 HTML 插入配置
|
|
103
|
+
- `env`:环境变量注入插件的选项
|
|
104
|
+
|
|
105
|
+
默认项参考 `src/defaults.ts`。
|
|
106
|
+
|
|
107
|
+
## 类型工具
|
|
108
|
+
|
|
109
|
+
- `defineConfig`:用于 `qvite.config.ts` 的类型辅助(`packages/qvite/index.ts:34-44`)
|
|
110
|
+
- `defineViteConfig`:Vite 配置的类型辅助包装(`packages/qvite/index.ts:71-75`)
|
|
111
|
+
- `defineTsdownConfig`:tsdown 配置的类型辅助包装(`packages/qvite/index.ts:102-106`)
|
|
112
|
+
- `ConfigEnv<T>`:回调入参类型,包含 `command`、`mode`、`env: T`、`root`(`packages/qvite/src/typings.ts:30-35`)
|
|
113
|
+
|
|
114
|
+
## 插件系统
|
|
115
|
+
|
|
116
|
+
内置映射见 `packages/qvite/src/plugins.ts`,支持:
|
|
117
|
+
|
|
118
|
+
- `Vue`、`VueJsx`、`VueDevTools`
|
|
119
|
+
- `UnoCSS`
|
|
120
|
+
- `Progress`
|
|
121
|
+
- `RemoveConsole`
|
|
122
|
+
- `MockRouter`
|
|
123
|
+
- `FileChangeLogger`
|
|
124
|
+
|
|
125
|
+
配置方式示例:
|
|
126
|
+
|
|
127
|
+
```ts
|
|
128
|
+
export default defineConfig({
|
|
129
|
+
plugins: {
|
|
130
|
+
Vue: [{ customElement: true }],
|
|
131
|
+
UnoCSS: false,
|
|
132
|
+
Progress: [{}]
|
|
133
|
+
}
|
|
134
|
+
})
|
|
135
|
+
```
|
|
136
|
+
|
|
137
|
+
## 环境变量
|
|
138
|
+
|
|
139
|
+
- 前缀:默认 `QVITE_` 与 `VITE_`(`packages/qvite/src/store.ts:13`)
|
|
140
|
+
- 合并:`default` 与 `mode` 环境通过 `vite.loadEnv` 合并(`packages/qvite/src/getConfig.ts:34-38`)
|
|
141
|
+
- 注入:由 `envConfigPlugin` 负责注入到客户端(`packages/qvite/src/transform.ts:33-34`)
|
|
142
|
+
|
|
143
|
+
## HTML 虚拟插入
|
|
144
|
+
|
|
145
|
+
通过 `virtualHtmlPlugin` 在不改动模板的情况下插入:`title`、`script`、`style`、自定义 `tags`(参考示例 `playground/qvite-test/qvite.config.ts`)。
|
|
146
|
+
|
|
147
|
+
## 工作流
|
|
148
|
+
|
|
149
|
+
- 开发:`watch()` 启动 Vite Dev Server,自动选取可用端口并打印地址(`packages/qvite/src/watch.ts:31-50`)
|
|
150
|
+
- 构建:`build()` 先执行 `tsdown`,再调用 Vite `build`(`packages/qvite/src/build.ts:30-43`)
|
|
151
|
+
|
|
152
|
+
## 使用场景与优势
|
|
153
|
+
|
|
154
|
+
- Monorepo 下统一脚手架与类型提示
|
|
155
|
+
- 多环境变量的集中管理与自动注入
|
|
156
|
+
- 简化 HTML 注入、减少改模板的侵入性
|
|
157
|
+
- Vite 与 tsdown 联动,前后端/工具一体化构建
|
|
158
|
+
|
|
159
|
+
|
|
160
|
+
|
package/cli.ts
ADDED
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
#!/usr/bin/env node
|
|
2
|
+
import { cac } from 'cac'
|
|
3
|
+
import { version } from './package.json'
|
|
4
|
+
|
|
5
|
+
import { build } from './src/build'
|
|
6
|
+
import { getConfig } from './src/getConfig'
|
|
7
|
+
import { store } from './src/store'
|
|
8
|
+
import { watch } from './src/watch'
|
|
9
|
+
|
|
10
|
+
interface Options {
|
|
11
|
+
minify: boolean
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
interface DevOptions extends Options {
|
|
15
|
+
mode: string
|
|
16
|
+
port: number
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
interface BuildOptions extends Options {
|
|
20
|
+
mode: string
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
const cli = cac('qvite')
|
|
24
|
+
|
|
25
|
+
cli.option('--minify', '使代码进行压缩 ', { default: false })
|
|
26
|
+
|
|
27
|
+
cli
|
|
28
|
+
.command('[config-file]', 'qvite dev ,启动开发环境热更新') // default command
|
|
29
|
+
.alias('dev')
|
|
30
|
+
.option('-m , --mode <mode>', '[development | production | test | staging | ...] 环境模式 ', { default: 'development' })
|
|
31
|
+
.option('-p , --port <port>', '[number] 渲染进程的端口号 ,如果占用会切换非占用的端口 ', { default: 8090 })
|
|
32
|
+
.action(async (configFile: string = 'qvite.config.ts', options: DevOptions) => {
|
|
33
|
+
const { mode, port, minify } = options
|
|
34
|
+
|
|
35
|
+
store.set('command', 'serve')
|
|
36
|
+
store.set('config', configFile)
|
|
37
|
+
store.set('mode', mode)
|
|
38
|
+
store.set('port', port)
|
|
39
|
+
store.set('minify', !!minify)
|
|
40
|
+
|
|
41
|
+
const config = await getConfig(configFile)
|
|
42
|
+
watch(config)
|
|
43
|
+
})
|
|
44
|
+
|
|
45
|
+
cli
|
|
46
|
+
.command('build [root]', '开始构建服务 , 若不指定平台则默认当前操作系统的架构类型')
|
|
47
|
+
.option('-m , --mode <mode>', '[development | production | test | staging | ...] 环境模式 ', { default: 'production' })
|
|
48
|
+
.action(async (configFile: string = 'qvite.config.ts', options: BuildOptions) => {
|
|
49
|
+
const { mode, minify } = options
|
|
50
|
+
|
|
51
|
+
store.set('command', 'build')
|
|
52
|
+
store.set('config', configFile)
|
|
53
|
+
store.set('mode', mode)
|
|
54
|
+
store.set('minify', minify)
|
|
55
|
+
|
|
56
|
+
const config = await getConfig(configFile)
|
|
57
|
+
build(config)
|
|
58
|
+
})
|
|
59
|
+
|
|
60
|
+
cli.help()
|
|
61
|
+
cli.version(version)
|
|
62
|
+
cli.parse()
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
//#region ../../node_modules/.pnpm/rolldown-plugin-dts@0.17.4_rolldown@1.0.0-beta.47_typescript@5.9.3_vue-tsc@3.1.3_typescript@5.9.3_/node_modules/rolldown-plugin-dts/dist/context-Db5EuGKU.mjs
|
|
2
|
+
const Debug = globalThis.process.getBuiltinModule("module").createRequire(import.meta.url)("debug");
|
|
3
|
+
const path = globalThis.process.getBuiltinModule("node:path");
|
|
4
|
+
const debug = Debug("rolldown-plugin-dts:tsc-context");
|
|
5
|
+
function createContext() {
|
|
6
|
+
return {
|
|
7
|
+
programs: [],
|
|
8
|
+
files: /* @__PURE__ */ new Map(),
|
|
9
|
+
projects: /* @__PURE__ */ new Map()
|
|
10
|
+
};
|
|
11
|
+
}
|
|
12
|
+
function invalidateContextFile(context, file) {
|
|
13
|
+
file = path.resolve(file).replaceAll("\\", "/");
|
|
14
|
+
debug(`invalidating context file: ${file}`);
|
|
15
|
+
context.files.delete(file);
|
|
16
|
+
context.programs = context.programs.filter((program) => {
|
|
17
|
+
return !program.getSourceFiles().some((sourceFile) => sourceFile.fileName === file);
|
|
18
|
+
});
|
|
19
|
+
context.projects.clear();
|
|
20
|
+
}
|
|
21
|
+
const globalContext = createContext();
|
|
22
|
+
|
|
23
|
+
//#endregion
|
|
24
|
+
export { globalContext as n, invalidateContextFile as r, createContext as t };
|