@fchc8/vite-plugin-multi-page 1.7.0 → 1.7.2
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-EN.md +95 -60
- package/README.md +1 -1
- package/dist/cli.js +5 -893
- package/dist/index.js +22 -792
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +21 -749
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/README-EN.md
CHANGED
|
@@ -2,18 +2,18 @@
|
|
|
2
2
|
|
|
3
3
|
> 中文文档 | [中文文档](./README.md)
|
|
4
4
|
|
|
5
|
-
A powerful Vite plugin for
|
|
5
|
+
A powerful Vite plugin for multi-page application development, providing multi-strategy builds, TypeScript configuration support, and command-line tools.
|
|
6
6
|
|
|
7
7
|
## Features
|
|
8
8
|
|
|
9
9
|
- 🎯 **Multi-page support**: Automatically discover page entry files
|
|
10
|
-
- 🔧 **Multi-strategy builds**: Support configuring different
|
|
10
|
+
- 🔧 **Multi-strategy builds**: Support configuring different builds for different pages
|
|
11
11
|
- 📝 **TypeScript configuration**: Support TypeScript configuration files
|
|
12
|
-
- 🚀 **CLI tool**: Provide
|
|
12
|
+
- 🚀 **CLI tool**: Provide command-line batch build tools
|
|
13
13
|
- 🔄 **Hot reload**: Development server supports page hot reload
|
|
14
14
|
- 📦 **Smart merge**: Automatically merge multi-strategy build results
|
|
15
15
|
|
|
16
|
-
##
|
|
16
|
+
## Install
|
|
17
17
|
|
|
18
18
|
```bash
|
|
19
19
|
npm install @fchc8/vite-plugin-multi-page --save-dev
|
|
@@ -21,32 +21,78 @@ npm install @fchc8/vite-plugin-multi-page --save-dev
|
|
|
21
21
|
|
|
22
22
|
## Quick Start
|
|
23
23
|
|
|
24
|
-
### 1.
|
|
24
|
+
### 1. Configure Vite
|
|
25
25
|
|
|
26
|
-
|
|
26
|
+
Add the plugin in `vite.config.ts`:
|
|
27
|
+
|
|
28
|
+
```typescript
|
|
29
|
+
import { defineConfig } from 'vite';
|
|
30
|
+
import { viteMultiPage } from '@fchc8/vite-plugin-multi-page';
|
|
31
|
+
|
|
32
|
+
export default defineConfig({
|
|
33
|
+
plugins: [viteMultiPage()],
|
|
34
|
+
});
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
### 2. Create Configuration File (Optional)
|
|
38
|
+
|
|
39
|
+
The plugin provides reasonable default configurations, you can choose:
|
|
40
|
+
|
|
41
|
+
**Option A: No Configuration File (Use Default Configuration)**
|
|
42
|
+
|
|
43
|
+
- Automatically scan for page files under `src/pages/**/*.{ts,js}`, and the file with the name main as the page entry
|
|
44
|
+
- Use `index.html` as the template
|
|
45
|
+
- Create default build strategy
|
|
46
|
+
|
|
47
|
+
**Option B: Simplest Configuration**
|
|
48
|
+
|
|
49
|
+
Create `multipage.config.ts`:
|
|
50
|
+
|
|
51
|
+
```typescript
|
|
52
|
+
import { defineConfig } from '@fchc8/vite-plugin-multi-page';
|
|
53
|
+
|
|
54
|
+
// Use all default values
|
|
55
|
+
export default defineConfig(() => ({}));
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
**Option C: Complete Configuration**
|
|
59
|
+
|
|
60
|
+
Create `multipage.config.ts` or `multipage.config.js`:
|
|
27
61
|
|
|
28
62
|
```typescript
|
|
29
|
-
|
|
63
|
+
import { defineConfig } from 'vite-plugin-multi-page';
|
|
64
|
+
|
|
65
|
+
// Method 1: Object Configuration (Recommended)
|
|
66
|
+
export default defineConfig({
|
|
67
|
+
entry: 'src/pages/**/*.{ts,js}',
|
|
68
|
+
template: 'index.html',
|
|
69
|
+
strategies: {
|
|
70
|
+
// Strategy Configuration...
|
|
71
|
+
},
|
|
72
|
+
});
|
|
73
|
+
|
|
74
|
+
// Method 2: Function Configuration (Dynamic Configuration)
|
|
75
|
+
export default defineConfig(context => {
|
|
30
76
|
const { mode, command, isCLI } = context;
|
|
31
77
|
const isProduction = mode === 'production';
|
|
32
78
|
|
|
33
79
|
return {
|
|
34
|
-
// Page entry matching
|
|
80
|
+
// Page entry matching rules
|
|
35
81
|
entry: 'src/pages/**/*.{ts,js}',
|
|
36
82
|
|
|
37
|
-
// HTML
|
|
83
|
+
// HTML Template
|
|
38
84
|
template: 'index.html',
|
|
39
85
|
|
|
40
|
-
// Template
|
|
86
|
+
// Template Placeholder
|
|
41
87
|
placeholder: '{{ENTRY_FILE}}',
|
|
42
88
|
|
|
43
|
-
// Excluded
|
|
89
|
+
// Excluded Files
|
|
44
90
|
exclude: ['src/shared/**/*.ts'],
|
|
45
91
|
|
|
46
|
-
// Debug
|
|
92
|
+
// Debug Mode
|
|
47
93
|
debug: !isProduction || isCLI,
|
|
48
94
|
|
|
49
|
-
// Build
|
|
95
|
+
// Build Strategy
|
|
50
96
|
strategies: {
|
|
51
97
|
default: {
|
|
52
98
|
define: {
|
|
@@ -73,9 +119,9 @@ export default context => {
|
|
|
73
119
|
},
|
|
74
120
|
},
|
|
75
121
|
|
|
76
|
-
// Page
|
|
122
|
+
// Page Configuration Function
|
|
77
123
|
pageConfigs: context => {
|
|
78
|
-
// Determine the
|
|
124
|
+
// Determine the strategy based on the file path
|
|
79
125
|
if (context.relativePath.includes('/mobile/')) {
|
|
80
126
|
return {
|
|
81
127
|
strategy: 'mobile',
|
|
@@ -86,7 +132,7 @@ export default context => {
|
|
|
86
132
|
};
|
|
87
133
|
}
|
|
88
134
|
|
|
89
|
-
// Default
|
|
135
|
+
// Default Strategy
|
|
90
136
|
return {
|
|
91
137
|
strategy: 'default',
|
|
92
138
|
define: {
|
|
@@ -96,50 +142,39 @@ export default context => {
|
|
|
96
142
|
};
|
|
97
143
|
},
|
|
98
144
|
};
|
|
99
|
-
};
|
|
100
|
-
```
|
|
101
|
-
|
|
102
|
-
### 2. Configure Vite
|
|
103
|
-
|
|
104
|
-
Add the plugin in `vite.config.ts`:
|
|
105
|
-
|
|
106
|
-
```typescript
|
|
107
|
-
import { defineConfig } from 'vite';
|
|
108
|
-
import { viteMultiPage } from '@fchc8/vite-plugin-multi-page';
|
|
109
|
-
|
|
110
|
-
export default defineConfig({
|
|
111
|
-
plugins: [viteMultiPage()],
|
|
112
145
|
});
|
|
113
146
|
```
|
|
114
147
|
|
|
115
|
-
### 3. Create
|
|
148
|
+
### 3. Create Page Files
|
|
116
149
|
|
|
117
150
|
Create page files according to the convention:
|
|
118
151
|
|
|
152
|
+
**Note**: Even if you use the empty configuration `defineConfig({})`, the plugin will automatically use the default strategy to process all pages, ensuring maximum compatibility.
|
|
153
|
+
|
|
119
154
|
```
|
|
120
155
|
src/pages/
|
|
121
156
|
├── home.js # → /home.html
|
|
122
|
-
├── about.js # → /about.html
|
|
157
|
+
├── about.js # → /about.html (Default Strategy)
|
|
123
158
|
├── mobile/
|
|
124
|
-
│ └── main.ts # → /mobile.html (
|
|
159
|
+
│ └── main.ts # → /mobile.html (Mobile Strategy)
|
|
125
160
|
└── admin/
|
|
126
|
-
└── main.ts # → /admin.html
|
|
161
|
+
└── main.ts # → /admin.html (Admin Strategy)
|
|
127
162
|
```
|
|
128
163
|
|
|
129
|
-
## Page
|
|
164
|
+
## Page Discovery Rules
|
|
130
165
|
|
|
131
166
|
The plugin discovers page entries according to the following rules:
|
|
132
167
|
|
|
133
|
-
1. **First-level
|
|
134
|
-
2. **Directory main files** (
|
|
168
|
+
1. **First-level Files** (Priority 1): `src/pages/home.js` → `/home.html`
|
|
169
|
+
2. **Directory main files** (Priority 2): `src/pages/mobile/main.ts` → `/mobile.html`
|
|
135
170
|
|
|
136
|
-
**Directory
|
|
171
|
+
**Directory Priority Principle**: If both `src/pages/about.js` and `src/pages/about/main.ts` exist, `src/pages/about/main.ts` will be used.
|
|
137
172
|
|
|
138
|
-
## Build
|
|
173
|
+
## Build Strategy
|
|
139
174
|
|
|
140
|
-
### Strategy
|
|
175
|
+
### Strategy Configuration
|
|
141
176
|
|
|
142
|
-
|
|
177
|
+
Strategy configuration supports all Vite configuration options:
|
|
143
178
|
|
|
144
179
|
```typescript
|
|
145
180
|
strategies: {
|
|
@@ -161,7 +196,7 @@ strategies: {
|
|
|
161
196
|
}
|
|
162
197
|
```
|
|
163
198
|
|
|
164
|
-
### Page
|
|
199
|
+
### Page Strategy Assignment
|
|
165
200
|
|
|
166
201
|
Assign strategies to pages through the `pageConfigs` function:
|
|
167
202
|
|
|
@@ -181,9 +216,9 @@ pageConfigs: context => {
|
|
|
181
216
|
};
|
|
182
217
|
```
|
|
183
218
|
|
|
184
|
-
##
|
|
219
|
+
## Command Line Tool
|
|
185
220
|
|
|
186
|
-
###
|
|
221
|
+
### Batch Build
|
|
187
222
|
|
|
188
223
|
```bash
|
|
189
224
|
# Build all strategies
|
|
@@ -196,7 +231,7 @@ npx vite-mp --host --port 3000
|
|
|
196
231
|
npx vite-mp --debug
|
|
197
232
|
```
|
|
198
233
|
|
|
199
|
-
###
|
|
234
|
+
### Development Server
|
|
200
235
|
|
|
201
236
|
```bash
|
|
202
237
|
# Start development server (all pages)
|
|
@@ -206,13 +241,13 @@ npm run dev
|
|
|
206
241
|
npm run dev -- --strategy mobile
|
|
207
242
|
```
|
|
208
243
|
|
|
209
|
-
## Environment
|
|
244
|
+
## Environment Variables
|
|
210
245
|
|
|
211
246
|
- `VITE_BUILD_STRATEGY`: Specify a single strategy build
|
|
212
247
|
- `IS_MOBILE`: Mobile identifier (configured in define)
|
|
213
248
|
- `API_BASE`: API base address (configured in define)
|
|
214
249
|
|
|
215
|
-
## TypeScript
|
|
250
|
+
## TypeScript Support
|
|
216
251
|
|
|
217
252
|
The plugin fully supports TypeScript configuration files:
|
|
218
253
|
|
|
@@ -230,21 +265,21 @@ const config: ConfigFunction = context => {
|
|
|
230
265
|
export default config;
|
|
231
266
|
```
|
|
232
267
|
|
|
233
|
-
## API
|
|
268
|
+
## API Reference
|
|
234
269
|
|
|
235
|
-
### Configuration
|
|
270
|
+
### Configuration Options
|
|
236
271
|
|
|
237
|
-
| Option | Type | Default
|
|
238
|
-
| ------------- | -------------------------- | -------------------------- |
|
|
239
|
-
| `entry` | `string` | `'src/pages/**/*.{ts,js}'` | Page entry matching
|
|
240
|
-
| `template` | `string` | `'index.html'` | HTML
|
|
241
|
-
| `placeholder` | `string` | `'{{ENTRY_FILE}}'` |
|
|
242
|
-
| `exclude` | `string[]` | `[]` |
|
|
243
|
-
| `debug` | `boolean` | `false` |
|
|
244
|
-
| `strategies` | `Record<string, Strategy>` | `{}` |
|
|
245
|
-
| `pageConfigs` | `Function \| Object` | `{}` |
|
|
272
|
+
| Option | Type | Default Value | Description |
|
|
273
|
+
| ------------- | -------------------------- | -------------------------- | ------------------------- |
|
|
274
|
+
| `entry` | `string` | `'src/pages/**/*.{ts,js}'` | Page entry matching rules |
|
|
275
|
+
| `template` | `string` | `'index.html'` | HTML Template File |
|
|
276
|
+
| `placeholder` | `string` | `'{{ENTRY_FILE}}'` | 模板占位符 |
|
|
277
|
+
| `exclude` | `string[]` | `[]` | 排除的文件模式 |
|
|
278
|
+
| `debug` | `boolean` | `false` | 启用调试日志 |
|
|
279
|
+
| `strategies` | `Record<string, Strategy>` | `{}` | 构建策略配置 |
|
|
280
|
+
| `pageConfigs` | `Function \| Object` | `{}` | 页面配置 |
|
|
246
281
|
|
|
247
|
-
### Utility
|
|
282
|
+
### Utility Functions
|
|
248
283
|
|
|
249
284
|
```typescript
|
|
250
285
|
import { defineConfig, defineConfigTransform } from '@fchc8/vite-plugin-multi-page';
|
|
@@ -261,9 +296,9 @@ const transform = defineConfigTransform((config, context) => {
|
|
|
261
296
|
});
|
|
262
297
|
```
|
|
263
298
|
|
|
264
|
-
## Example
|
|
299
|
+
## Example Project
|
|
265
300
|
|
|
266
|
-
See [example](./example) directory for
|
|
301
|
+
See [example](./example) directory for the complete example project.
|
|
267
302
|
|
|
268
303
|
## License
|
|
269
304
|
|