@fchc8/vite-plugin-multi-page 1.7.0 → 1.7.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.
Files changed (3) hide show
  1. package/README-EN.md +95 -60
  2. package/README.md +1 -1
  3. 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 building multi-page applications with smart file routing and multi-strategy builds.
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 build strategies for different pages
10
+ - 🔧 **Multi-strategy builds**: Support configuring different builds for different pages
11
11
  - 📝 **TypeScript configuration**: Support TypeScript configuration files
12
- - 🚀 **CLI tool**: Provide a command-line batch build tool
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
- ## Installation
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. Create a configuration file
24
+ ### 1. Configure Vite
25
25
 
26
- Create a `multipage.config.ts` or `multipage.config.js`:
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
- export default context => {
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 rule
80
+ // Page entry matching rules
35
81
  entry: 'src/pages/**/*.{ts,js}',
36
82
 
37
- // HTML template
83
+ // HTML Template
38
84
  template: 'index.html',
39
85
 
40
- // Template placeholder
86
+ // Template Placeholder
41
87
  placeholder: '{{ENTRY_FILE}}',
42
88
 
43
- // Excluded files
89
+ // Excluded Files
44
90
  exclude: ['src/shared/**/*.ts'],
45
91
 
46
- // Debug mode
92
+ // Debug Mode
47
93
  debug: !isProduction || isCLI,
48
94
 
49
- // Build strategy
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 configuration function
122
+ // Page Configuration Function
77
123
  pageConfigs: context => {
78
- // Determine the application strategy based on the file path
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 strategy
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 page files
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 (mobile strategy)
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 discovery rules
164
+ ## Page Discovery Rules
130
165
 
131
166
  The plugin discovers page entries according to the following rules:
132
167
 
133
- 1. **First-level files** (priority 1): `src/pages/home.js` → `/home.html`
134
- 2. **Directory main files** (priority 2): `src/pages/mobile/main.ts` → `/mobile.html`
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 priority rule**: If both `src/pages/about.js` and `src/pages/about/main.ts` exist, `src/pages/about/main.ts` will be used.
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 strategies
173
+ ## Build Strategy
139
174
 
140
- ### Strategy configuration
175
+ ### Strategy Configuration
141
176
 
142
- 策略配置支持所有 Vite 配置选项:
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 strategy assignment
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 variables
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 support
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 reference
268
+ ## API Reference
234
269
 
235
- ### Configuration options
270
+ ### Configuration Options
236
271
 
237
- | Option | Type | Default | Description |
238
- | ------------- | -------------------------- | -------------------------- | ---------------------------- |
239
- | `entry` | `string` | `'src/pages/**/*.{ts,js}'` | Page entry matching rule |
240
- | `template` | `string` | `'index.html'` | HTML template file |
241
- | `placeholder` | `string` | `'{{ENTRY_FILE}}'` | Template placeholder |
242
- | `exclude` | `string[]` | `[]` | Excluded file patterns |
243
- | `debug` | `boolean` | `false` | Enable debug log |
244
- | `strategies` | `Record<string, Strategy>` | `{}` | Build strategy configuration |
245
- | `pageConfigs` | `Function \| Object` | `{}` | Page |
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 functions
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 project
299
+ ## Example Project
265
300
 
266
- See [example](./example) directory for a complete example project.
301
+ See [example](./example) directory for the complete example project.
267
302
 
268
303
  ## License
269
304
 
package/README.md CHANGED
@@ -40,7 +40,7 @@ export default defineConfig({
40
40
 
41
41
  **选项 A:无配置文件(使用默认配置)**
42
42
 
43
- - 自动扫描 `src/pages/**/*.{ts,js}` 下的页面文件
43
+ - 自动扫描 `src/pages/**/*.{ts,js}` 下的页面文件,目录下含有文件名main的文件作为页面入口
44
44
  - 使用 `index.html` 作为模板
45
45
  - 创建默认构建策略
46
46
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fchc8/vite-plugin-multi-page",
3
- "version": "1.7.0",
3
+ "version": "1.7.1",
4
4
  "description": "A powerful Vite plugin for building multi-page applications with smart file routing and multi-strategy builds",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",