vite-plugin-taro 0.1.6 → 0.1.8
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 +15 -7
- package/README.md +166 -158
- package/README.zh.md +543 -0
- package/package.json +5 -4
package/README.en.md
CHANGED
|
@@ -4,13 +4,13 @@
|
|
|
4
4
|

|
|
5
5
|
[](LICENSE)
|
|
6
6
|
|
|
7
|
-
[简体中文](README.md) | English
|
|
7
|
+
[简体中文](README.zh.md) | English
|
|
8
8
|
|
|
9
9
|
Build WeChat Mini Apps with the latest standards-based frontend stack: Vite 8, React 19, and Tailwind CSS v4.
|
|
10
10
|
|
|
11
11
|
`vite-plugin-taro` is for applications that want Taro's cross-platform React components and APIs, but prefer Vite instead of Taro webpack. You only need this plugin to build a complete WeChat Mini Program.
|
|
12
12
|
|
|
13
|
-
Live demo: <https://sep2.github.io/vite-plugin-taro>. See [Sample app](https://github.com/sep2/vite-plugin-taro/tree/main/packages/loan-genius/README.
|
|
13
|
+
Live demo: <https://sep2.github.io/vite-plugin-taro>. See [Sample app](https://github.com/sep2/vite-plugin-taro/tree/main/packages/loan-genius/README.md) how to run it locally.
|
|
14
14
|
|
|
15
15
|
- **Native Vite builds** Use standard Vite 8 config instead of legacy webpack configuration, with support for all Vite plugins.
|
|
16
16
|
- **Hot reload** Both WeChat Mini Program and H5 support dev-mode watch, with Vite 8 HMR/rebuilds for fast feedback.
|
|
@@ -496,7 +496,8 @@ Common scripts:
|
|
|
496
496
|
| `pnpm build:sample:h5` | Build the H5 sample app to `packages/loan-genius/dist/h5`. |
|
|
497
497
|
| `pnpm preview:sample:h5` | Preview the built H5 sample. |
|
|
498
498
|
| `pnpm publish:dry` | Dry-run package validation and publishing. |
|
|
499
|
-
| `pnpm
|
|
499
|
+
| `pnpm release <version\|bump>` | Validate, bump versions, create the release commit and tag, and push to trigger CI publishing. |
|
|
500
|
+
| `pnpm publish:all` | Publish the public packages in dependency order; mainly used by the tag-based Trusted Publishing workflow. |
|
|
500
501
|
|
|
501
502
|
## Limitations
|
|
502
503
|
|
|
@@ -518,18 +519,25 @@ Common scripts:
|
|
|
518
519
|
|
|
519
520
|
## Release workflow
|
|
520
521
|
|
|
521
|
-
|
|
522
|
+
This repository publishes automatically with npm Trusted Publishing and GitHub Actions. Normal pushes to `main` do not publish; only tags matching `v*.*.*` trigger `.github/workflows/publish.yml`.
|
|
523
|
+
|
|
524
|
+
Create a release:
|
|
522
525
|
|
|
523
526
|
```sh
|
|
524
|
-
pnpm
|
|
527
|
+
pnpm release patch
|
|
525
528
|
```
|
|
526
529
|
|
|
527
|
-
|
|
530
|
+
`pnpm release` requires a clean `main` working tree, runs `pnpm version:bump`, validates with `pnpm publish:dry -- --no-git-check`, creates the `chore: release vX.Y.Z` commit and `vX.Y.Z` tag, then pushes the branch and tag to trigger CI. You can also release an exact version or prerelease:
|
|
528
531
|
|
|
529
532
|
```sh
|
|
530
|
-
pnpm
|
|
533
|
+
pnpm release 0.2.0
|
|
534
|
+
pnpm release prerelease --preid beta
|
|
535
|
+
pnpm release patch --dry-run
|
|
536
|
+
pnpm release patch --no-push
|
|
531
537
|
```
|
|
532
538
|
|
|
539
|
+
CI runs `pnpm publish:all -- --no-git-check`, packs packages in dependency order, and publishes public packages through npm OIDC. Do not configure `NPM_TOKEN` for the publish workflow; each npm package's Trusted Publisher should point to `publish.yml`.
|
|
540
|
+
|
|
533
541
|
## License
|
|
534
542
|
|
|
535
543
|
MIT
|
package/README.md
CHANGED
|
@@ -4,114 +4,114 @@
|
|
|
4
4
|

|
|
5
5
|
[](LICENSE)
|
|
6
6
|
|
|
7
|
-
简体中文
|
|
7
|
+
[简体中文](README.zh.md) | English
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
Build WeChat Mini Apps with the latest standards-based frontend stack: Vite 8, React 19, and Tailwind CSS v4.
|
|
10
10
|
|
|
11
|
-
`vite-plugin-taro`
|
|
11
|
+
`vite-plugin-taro` is for applications that want Taro's cross-platform React components and APIs, but prefer Vite instead of Taro webpack. You only need this plugin to build a complete WeChat Mini Program.
|
|
12
12
|
|
|
13
|
-
|
|
13
|
+
Live demo: <https://sep2.github.io/vite-plugin-taro>. See [Sample app](https://github.com/sep2/vite-plugin-taro/tree/main/packages/loan-genius/README.md) how to run it locally.
|
|
14
14
|
|
|
15
|
-
-
|
|
16
|
-
-
|
|
17
|
-
-
|
|
18
|
-
- **Tailwind
|
|
19
|
-
-
|
|
20
|
-
-
|
|
21
|
-
-
|
|
22
|
-
-
|
|
15
|
+
- **Native Vite builds** Use standard Vite 8 config instead of legacy webpack configuration, with support for all Vite plugins.
|
|
16
|
+
- **Hot reload** Both WeChat Mini Program and H5 support dev-mode watch, with Vite 8 HMR/rebuilds for fast feedback.
|
|
17
|
+
- **Battle-tested Taro foundation** Use the full set of Taro APIs and components instead of reinventing cross-platform primitives.
|
|
18
|
+
- **Tailwind ready** Built-in Tailwind CSS v4 support for both WeChat Mini Program and H5 styles.
|
|
19
|
+
- **Conditional compilation** Use Taro-style `#ifdef` / `#ifndef` / `#if` blocks to split code and styles by WeChat / web target.
|
|
20
|
+
- **Workspace friendly** Supports standalone apps and monorepos, with npm, pnpm, Yarn, Bun, and other package managers.
|
|
21
|
+
- **Type-friendly** The project supports TypeScript all the way.
|
|
22
|
+
- **WeChat Skyline** Support WeChat Mini Program output with Skyline rendering mode.
|
|
23
23
|
|
|
24
|
-
##
|
|
24
|
+
## Quick start
|
|
25
25
|
|
|
26
|
-
|
|
26
|
+
Use `create-vite-taro` for new apps. It scaffolds a Vite 8 + React 19 + Tailwind CSS v4 + Taro 4 project.
|
|
27
27
|
|
|
28
|
-
### 1.
|
|
28
|
+
### 1. Create and install
|
|
29
29
|
|
|
30
30
|
```sh
|
|
31
|
-
#
|
|
31
|
+
# Create a new app from the default template
|
|
32
32
|
npm create vite-taro@latest my-app
|
|
33
33
|
|
|
34
|
-
#
|
|
34
|
+
# Enter the project and install dependencies
|
|
35
35
|
cd my-app
|
|
36
36
|
npm install
|
|
37
37
|
```
|
|
38
38
|
|
|
39
|
-
### 2.
|
|
39
|
+
### 2. Configure WeChat Mini Program App ID
|
|
40
40
|
|
|
41
|
-
|
|
41
|
+
The template creates `.env.local`. Set `VITE_PLUGIN_TARO_WECHAT_APP_ID` to your WeChat Mini Program App ID.
|
|
42
42
|
|
|
43
|
-
### 3.
|
|
43
|
+
### 3. Run in development
|
|
44
44
|
|
|
45
45
|
```sh
|
|
46
|
-
#
|
|
46
|
+
# WeChat Mini Program: rebuild dist/wx in watch mode
|
|
47
47
|
npm run dev:wx
|
|
48
48
|
|
|
49
|
-
#
|
|
49
|
+
# Then open dist/wx in WeChat DevTools
|
|
50
50
|
|
|
51
|
-
# H5
|
|
51
|
+
# H5: start the Vite dev server
|
|
52
52
|
npm run dev:h5
|
|
53
53
|
|
|
54
|
-
#
|
|
54
|
+
# Then open the standard Vite dev URL in your browser
|
|
55
55
|
# http://localhost:5173
|
|
56
56
|
```
|
|
57
57
|
|
|
58
|
-
|
|
58
|
+
You can keep `npm run dev:wx` and `npm run dev:h5` running at the same time in separate terminals.
|
|
59
59
|
|
|
60
|
-
|
|
60
|
+
Note: Because of WeChat DevTools and Mini Program runtime limitations, hot reload/fast rebuilds for the WeChat target may not always apply cleanly. For day-to-day iteration, prefer the H5 Vite dev server for fast feedback, and periodically verify the Mini Program result in WeChat DevTools.
|
|
61
61
|
|
|
62
|
-
### 4.
|
|
62
|
+
### 4. Build, preview, and typecheck
|
|
63
63
|
|
|
64
64
|
```sh
|
|
65
|
-
#
|
|
65
|
+
# Production WeChat Mini Program output
|
|
66
66
|
npm run build:wx
|
|
67
67
|
|
|
68
|
-
#
|
|
68
|
+
# Production H5 output
|
|
69
69
|
npm run build:h5
|
|
70
70
|
|
|
71
|
-
#
|
|
71
|
+
# Preview the built H5 app
|
|
72
72
|
npm run preview:h5
|
|
73
73
|
|
|
74
|
-
#
|
|
74
|
+
# Typecheck with tsgo
|
|
75
75
|
npm run typecheck
|
|
76
76
|
```
|
|
77
77
|
|
|
78
|
-
### 5.
|
|
78
|
+
### 5. Use Taro virtual modules
|
|
79
79
|
|
|
80
|
-
|
|
80
|
+
Use these imports in app code:
|
|
81
81
|
|
|
82
82
|
```tsx
|
|
83
83
|
import Taro from 'virtual:taro/api'
|
|
84
84
|
import { Text, View } from 'virtual:taro/components'
|
|
85
85
|
```
|
|
86
86
|
|
|
87
|
-
|
|
|
87
|
+
| Import | Use |
|
|
88
88
|
| --- | --- |
|
|
89
|
-
| `virtual:taro/components` | Taro React
|
|
90
|
-
| `virtual:taro/api` | Taro
|
|
89
|
+
| `virtual:taro/components` | Taro React components such as `View`, `Text`, `Button`, `Image`, and `ScrollView`. |
|
|
90
|
+
| `virtual:taro/api` | Taro APIs and hooks such as `Taro.navigateTo`, `Taro.getWindowInfo`, and `Taro.useLaunch`. |
|
|
91
91
|
|
|
92
|
-
|
|
92
|
+
Usage is the same as Taro itself; see the [Taro website](https://docs.taro.zone) for component and API details.
|
|
93
93
|
|
|
94
|
-
|
|
94
|
+
You no longer need to install `@tarojs/*` packages; application code should not import from `@tarojs/*`.
|
|
95
95
|
|
|
96
96
|
|
|
97
|
-
##
|
|
97
|
+
## Manual setup for existing apps
|
|
98
98
|
|
|
99
|
-
|
|
99
|
+
For existing apps or custom project layouts, follow the steps below to wire the plugin manually. First, install the plugin:
|
|
100
100
|
|
|
101
101
|
```sh
|
|
102
102
|
npm install -D vite-plugin-taro
|
|
103
103
|
```
|
|
104
104
|
|
|
105
|
-
|
|
105
|
+
Your app must also provide Vite 8, React 19, React DOM 19, a TypeScript checker, and Node/React type packages. If your app does not already have them, install the missing packages:
|
|
106
106
|
|
|
107
107
|
```sh
|
|
108
108
|
npm install react react-dom
|
|
109
109
|
npm install -D vite @typescript/native-preview @types/node @types/react @types/react-dom
|
|
110
110
|
```
|
|
111
111
|
|
|
112
|
-
|
|
112
|
+
You should NOT have direct dependencies on `@tarojs/*` packages anymore. Remove them if you have.
|
|
113
113
|
|
|
114
|
-
|
|
114
|
+
The steps below create this source shape:
|
|
115
115
|
|
|
116
116
|
```text
|
|
117
117
|
my-app/
|
|
@@ -127,11 +127,11 @@ my-app/
|
|
|
127
127
|
└── index.tsx
|
|
128
128
|
```
|
|
129
129
|
|
|
130
|
-
|
|
130
|
+
You can also see a sample layout at [packages/loan-genius](https://github.com/sep2/vite-plugin-taro/tree/main/packages/loan-genius).
|
|
131
131
|
|
|
132
|
-
### 1.
|
|
132
|
+
### 1. Add TypeScript declarations
|
|
133
133
|
|
|
134
|
-
|
|
134
|
+
Add the plugin client types to `tsconfig.json` so TypeScript knows about the virtual modules:
|
|
135
135
|
|
|
136
136
|
```json
|
|
137
137
|
{
|
|
@@ -144,9 +144,9 @@ my-app/
|
|
|
144
144
|
}
|
|
145
145
|
```
|
|
146
146
|
|
|
147
|
-
### 2.
|
|
147
|
+
### 2. Configure Vite
|
|
148
148
|
|
|
149
|
-
|
|
149
|
+
Create `vite.config.ts` and choose the plugin target from an environment variable:
|
|
150
150
|
|
|
151
151
|
```ts
|
|
152
152
|
import { defineConfig, loadEnv } from 'vite'
|
|
@@ -200,17 +200,17 @@ export default defineConfig(({ mode }) => {
|
|
|
200
200
|
})
|
|
201
201
|
```
|
|
202
202
|
|
|
203
|
-
|
|
203
|
+
Important conventions:
|
|
204
204
|
|
|
205
|
-
-
|
|
206
|
-
- `app`
|
|
207
|
-
-
|
|
208
|
-
- `appJson.pages`
|
|
209
|
-
-
|
|
205
|
+
- `target` must be `wx` or `h5` for each Vite run.
|
|
206
|
+
- `app` is the root React app component module. It should default-export the app component.
|
|
207
|
+
- Every `pages[].path` maps to a file at `src/${path}.tsx`. For example, `pages/index/index` requires `src/pages/index/index.tsx`.
|
|
208
|
+
- `appJson.pages` is generated from `pages`; any `pages` field you put in `appJson` is overwritten.
|
|
209
|
+
- The plugin does not read Taro CLI config files such as `config/index.ts`, `app.config.ts`, or page `config.ts` files. Pass app and page config through the plugin options.
|
|
210
210
|
|
|
211
|
-
### 3.
|
|
211
|
+
### 3. Create the app component
|
|
212
212
|
|
|
213
|
-
`src/app.ts`
|
|
213
|
+
`src/app.ts` is the shared application wrapper. It receives the current page as `children`.
|
|
214
214
|
|
|
215
215
|
```tsx
|
|
216
216
|
import Taro from 'virtual:taro/api'
|
|
@@ -228,11 +228,11 @@ function App({ children }: PropsWithChildren) {
|
|
|
228
228
|
export default App
|
|
229
229
|
```
|
|
230
230
|
|
|
231
|
-
|
|
231
|
+
Import global styles from the app component. They are collected into `app.wxss` for WeChat builds and included in H5 output.
|
|
232
232
|
|
|
233
|
-
### 4.
|
|
233
|
+
### 4. Create a page component
|
|
234
234
|
|
|
235
|
-
`src/pages/index/index.tsx`
|
|
235
|
+
`src/pages/index/index.tsx` is the React component for `pages/index/index`.
|
|
236
236
|
|
|
237
237
|
```tsx
|
|
238
238
|
import Taro from 'virtual:taro/api'
|
|
@@ -256,9 +256,9 @@ export default function IndexPage() {
|
|
|
256
256
|
}
|
|
257
257
|
```
|
|
258
258
|
|
|
259
|
-
### 5.
|
|
259
|
+
### 5. Add the H5 HTML shell
|
|
260
260
|
|
|
261
|
-
|
|
261
|
+
For H5, keep a normal Vite `index.html` with an `#app` mount node. The plugin injects the generated Taro H5 entry automatically, so you do not need a normal Vite `src/main.tsx` script.
|
|
262
262
|
|
|
263
263
|
```html
|
|
264
264
|
<!doctype html>
|
|
@@ -274,9 +274,9 @@ export default function IndexPage() {
|
|
|
274
274
|
</html>
|
|
275
275
|
```
|
|
276
276
|
|
|
277
|
-
### 6.
|
|
277
|
+
### 6. Add scripts
|
|
278
278
|
|
|
279
|
-
|
|
279
|
+
Use the same scripts generated by `create-vite-taro`:
|
|
280
280
|
|
|
281
281
|
```json
|
|
282
282
|
{
|
|
@@ -291,27 +291,27 @@ export default function IndexPage() {
|
|
|
291
291
|
}
|
|
292
292
|
```
|
|
293
293
|
|
|
294
|
-
|
|
294
|
+
On Windows shells, use `cross-env`.
|
|
295
295
|
|
|
296
|
-
### 7.
|
|
296
|
+
### 7. Run each target
|
|
297
297
|
|
|
298
298
|
```sh
|
|
299
|
-
npm run dev:wx #
|
|
300
|
-
npm run dev:h5 #
|
|
301
|
-
npm run build:wx #
|
|
302
|
-
npm run build:h5 #
|
|
303
|
-
npm run preview:h5 #
|
|
304
|
-
npm run typecheck #
|
|
299
|
+
npm run dev:wx # Rebuild dist/wx in watch mode
|
|
300
|
+
npm run dev:h5 # Start the H5 dev server
|
|
301
|
+
npm run build:wx # Build dist/wx
|
|
302
|
+
npm run build:h5 # Build dist/h5
|
|
303
|
+
npm run preview:h5 # Preview dist/h5
|
|
304
|
+
npm run typecheck # Typecheck with tsgo
|
|
305
305
|
```
|
|
306
306
|
|
|
307
|
-
|
|
307
|
+
Open the generated `dist/wx` directory in WeChat DevTools.
|
|
308
308
|
|
|
309
|
-
|
|
|
309
|
+
| Target | Meaning | Output dir |
|
|
310
310
|
| --- | --- | --- |
|
|
311
|
-
| `wx` |
|
|
312
|
-
| `h5` | H5
|
|
311
|
+
| `wx` | WeChat Mini Program in both dev/prod mode. | `dist/wx` |
|
|
312
|
+
| `h5` | H5 production output. | `dist/h5` |
|
|
313
313
|
|
|
314
|
-
##
|
|
314
|
+
## Options
|
|
315
315
|
|
|
316
316
|
```ts
|
|
317
317
|
type VitePluginTaroTarget = 'wx' | 'h5'
|
|
@@ -331,22 +331,22 @@ type VitePluginTaroOptions = {
|
|
|
331
331
|
}
|
|
332
332
|
```
|
|
333
333
|
|
|
334
|
-
|
|
|
334
|
+
| Option | Description |
|
|
335
335
|
| --- | --- |
|
|
336
|
-
| `target` |
|
|
337
|
-
| `app` |
|
|
338
|
-
| `pages` |
|
|
339
|
-
| `pages[].path` |
|
|
340
|
-
| `pages[].config` |
|
|
341
|
-
| `appJson` |
|
|
342
|
-
| `projectConfigJson` |
|
|
343
|
-
| `sitemapJson` |
|
|
336
|
+
| `target` | Active target for this Vite invocation. Use `wx` for WeChat Mini Program and `h5` for Web. |
|
|
337
|
+
| `app` | Source file that default-exports the root React app component, for example `src/app.ts` or `src/app.tsx`. |
|
|
338
|
+
| `pages` | Ordered page list. The order becomes `app.json.pages` and the H5 route order. |
|
|
339
|
+
| `pages[].path` | Taro-style route and output path without extension, for example `pages/index/index`. The page component must exist at `src/${path}.tsx`. |
|
|
340
|
+
| `pages[].config` | Page config merged into the generated WeChat page JSON and H5 route config. |
|
|
341
|
+
| `appJson` | Base app config. The plugin overwrites the `pages` field from `options.pages`. |
|
|
342
|
+
| `projectConfigJson` | WeChat `project.config.json` content emitted for `wx` builds. It is required by the option type even when the current target is `h5`. |
|
|
343
|
+
| `sitemapJson` | WeChat `sitemap.json` content emitted for `wx` builds. It is required by the option type even when the current target is `h5`. |
|
|
344
344
|
|
|
345
|
-
##
|
|
345
|
+
## Styling
|
|
346
346
|
|
|
347
|
-
|
|
347
|
+
You can use plain CSS, CSS modules, or Tailwind CSS v4.
|
|
348
348
|
|
|
349
|
-
|
|
349
|
+
For Tailwind CSS v4, import Tailwind from a global CSS file such as `src/app.css`:
|
|
350
350
|
|
|
351
351
|
```css
|
|
352
352
|
@import "tailwindcss/theme.css";
|
|
@@ -356,11 +356,11 @@ type VitePluginTaroOptions = {
|
|
|
356
356
|
@source "./";
|
|
357
357
|
```
|
|
358
358
|
|
|
359
|
-
|
|
359
|
+
The plugin registers `weapp-tailwindcss` for `wx` builds and `@tailwindcss/vite` for `h5` builds. For `wx`, CSS emitted by Vite is collected into `app.wxss`, and page `.wxss` companion files are emitted for each page.
|
|
360
360
|
|
|
361
|
-
##
|
|
361
|
+
## Conditional compilation
|
|
362
362
|
|
|
363
|
-
|
|
363
|
+
The plugin strips inactive Taro-style conditional comment blocks before Vite parses source. This works in TypeScript, JavaScript, JSX/TSX, CSS, Sass, Less, and Stylus files outside `node_modules`.
|
|
364
364
|
|
|
365
365
|
```ts
|
|
366
366
|
// #ifdef wx
|
|
@@ -380,15 +380,15 @@ console.log('fallback')
|
|
|
380
380
|
// #endif
|
|
381
381
|
```
|
|
382
382
|
|
|
383
|
-
|
|
383
|
+
Supported directives are `#ifdef`, `#ifndef`, `#if`, `#elif`, `#else`, and `#endif`. Conditions use the plugin target tokens `wx` and `h5`; `#if` expressions support `!`, `&&`, and `||`.
|
|
384
384
|
|
|
385
|
-
##
|
|
385
|
+
## Output by target
|
|
386
386
|
|
|
387
|
-
###
|
|
387
|
+
### WeChat Mini Program
|
|
388
388
|
|
|
389
|
-
|
|
389
|
+
For `target: 'wx'`, the plugin configures Vite to emit WeChat-compatible CommonJS chunks and Mini Program companion files.
|
|
390
390
|
|
|
391
|
-
|
|
391
|
+
Typical output:
|
|
392
392
|
|
|
393
393
|
```text
|
|
394
394
|
dist/wx/
|
|
@@ -405,74 +405,74 @@ dist/wx/
|
|
|
405
405
|
└── pages/**
|
|
406
406
|
```
|
|
407
407
|
|
|
408
|
-
|
|
408
|
+
Open `dist/wx` with WeChat DevTools; do not open the source project directory.
|
|
409
409
|
|
|
410
410
|
### H5
|
|
411
411
|
|
|
412
|
-
|
|
412
|
+
For `target: 'h5'`, the plugin injects a generated module into `index.html`, imports Taro's H5 component styles, builds route records from `pages`, and mounts the app with Taro's hash-history router. Routes use the page paths from your config, for example `#/pages/index/index`.
|
|
413
413
|
|
|
414
|
-
##
|
|
414
|
+
## Migrating from Taro
|
|
415
415
|
|
|
416
|
-
|
|
416
|
+
You can keep most React page components, business logic, assets, and styles, but the build entry moves from Taro CLI config to Vite config.
|
|
417
417
|
|
|
418
|
-
|
|
418
|
+
Migration checklist:
|
|
419
419
|
|
|
420
|
-
1.
|
|
421
|
-
2.
|
|
422
|
-
3.
|
|
423
|
-
4.
|
|
424
|
-
5.
|
|
425
|
-
6.
|
|
420
|
+
1. Install `vite-plugin-taro` and create `vite.config.ts` with `vitePluginTaro(...)`.
|
|
421
|
+
2. Move app config and page config into the plugin options. The plugin does not read Taro CLI files such as `config/index.ts`, `app.config.ts`, or page `config.ts` files.
|
|
422
|
+
3. Register every page in `pages`. Each page path must match `src/${path}.tsx`.
|
|
423
|
+
4. Replace Taro scripts with Vite scripts that set `VITE_PLUGIN_TARO_TARGET=wx` or `VITE_PLUGIN_TARO_TARGET=h5`.
|
|
424
|
+
5. For H5, add a normal Vite `index.html` with `<div id="app"></div>` and no separate `src/main.tsx` entry.
|
|
425
|
+
6. Replace application imports from `@tarojs/*` with the plugin virtual modules.
|
|
426
426
|
|
|
427
|
-
|
|
427
|
+
Before:
|
|
428
428
|
|
|
429
429
|
```tsx
|
|
430
430
|
import Taro from '@tarojs/taro'
|
|
431
431
|
import { Text, View } from '@tarojs/components'
|
|
432
432
|
```
|
|
433
433
|
|
|
434
|
-
|
|
434
|
+
After:
|
|
435
435
|
|
|
436
436
|
```tsx
|
|
437
437
|
import Taro from 'virtual:taro/api'
|
|
438
438
|
import { Text, View } from 'virtual:taro/components'
|
|
439
439
|
```
|
|
440
440
|
|
|
441
|
-
|
|
441
|
+
Direct `@tarojs/*` imports in application code are forbidden. Let the plugin own Taro runtime resolution so WeChat and H5 builds receive the correct target-specific aliases.
|
|
442
442
|
|
|
443
|
-
##
|
|
443
|
+
## Sample app
|
|
444
444
|
|
|
445
|
-
|
|
445
|
+
The sample app lives in [`packages/loan-genius`](https://github.com/sep2/vite-plugin-taro/tree/main/packages/loan-genius). It demonstrates the page convention, target selection, WeChat output, H5 routing, and Tailwind styling.
|
|
446
446
|
|
|
447
447
|
```sh
|
|
448
448
|
git clone https://github.com/sep2/vite-plugin-taro.git
|
|
449
449
|
|
|
450
|
-
#
|
|
450
|
+
# Install dependencies
|
|
451
451
|
pnpm install
|
|
452
452
|
|
|
453
|
-
#
|
|
453
|
+
# Run once, it generates the patched Taro packages
|
|
454
454
|
pnpm prepare:taro
|
|
455
455
|
|
|
456
|
-
#
|
|
456
|
+
# Build the plugin for sample app to use
|
|
457
457
|
pnpm build:plugin
|
|
458
458
|
|
|
459
|
-
#
|
|
459
|
+
# Run the sample app in WeChat
|
|
460
460
|
pnpm dev:sample:wx
|
|
461
461
|
|
|
462
|
-
#
|
|
462
|
+
# Build the sample app to WeChat output
|
|
463
463
|
pnpm build:sample:wx
|
|
464
464
|
|
|
465
|
-
#
|
|
465
|
+
# Run the sample app in H5 dev mode
|
|
466
466
|
pnpm dev:sample:h5
|
|
467
467
|
|
|
468
|
-
#
|
|
468
|
+
# Build the sample app to H5 output and preview it
|
|
469
469
|
pnpm build:sample:h5
|
|
470
470
|
pnpm preview:sample:h5
|
|
471
471
|
```
|
|
472
472
|
|
|
473
|
-
|
|
473
|
+
Open `packages/loan-genius/dist/wx` with WeChat DevTools to test the Mini Program output.
|
|
474
474
|
|
|
475
|
-
##
|
|
475
|
+
## Develop this repository
|
|
476
476
|
|
|
477
477
|
```sh
|
|
478
478
|
pnpm install
|
|
@@ -481,55 +481,63 @@ pnpm build:plugin
|
|
|
481
481
|
pnpm typecheck
|
|
482
482
|
```
|
|
483
483
|
|
|
484
|
-
|
|
484
|
+
Common scripts:
|
|
485
485
|
|
|
486
|
-
|
|
|
486
|
+
| Script | Description |
|
|
487
487
|
| --- | --- |
|
|
488
|
-
| `pnpm prepare:taro` |
|
|
489
|
-
| `pnpm build:plugin` |
|
|
490
|
-
| `pnpm typecheck` |
|
|
491
|
-
| `pnpm lint` |
|
|
492
|
-
| `pnpm format` |
|
|
493
|
-
| `pnpm dev:sample:wx` |
|
|
494
|
-
| `pnpm dev:sample:h5` |
|
|
495
|
-
| `pnpm build:sample:wx` |
|
|
496
|
-
| `pnpm build:sample:h5` |
|
|
497
|
-
| `pnpm preview:sample:h5` |
|
|
498
|
-
| `pnpm publish:dry` |
|
|
499
|
-
| `pnpm
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
488
|
+
| `pnpm prepare:taro` | Regenerate the patched React 19 Taro packages from upstream npm tarballs and local patch files. |
|
|
489
|
+
| `pnpm build:plugin` | Build `packages/vite-plugin-taro` into `dist`. |
|
|
490
|
+
| `pnpm typecheck` | Typecheck the plugin and sample app with `tsgo`. |
|
|
491
|
+
| `pnpm lint` | Run Biome checks. |
|
|
492
|
+
| `pnpm format` | Apply Biome formatting. |
|
|
493
|
+
| `pnpm dev:sample:wx` | Build the sample WeChat Mini Program in watch mode. Build the plugin first. |
|
|
494
|
+
| `pnpm dev:sample:h5` | Start the sample H5 app in Vite dev mode. Build the plugin first. |
|
|
495
|
+
| `pnpm build:sample:wx` | Build the WeChat Mini Program sample to `packages/loan-genius/dist/wx`. |
|
|
496
|
+
| `pnpm build:sample:h5` | Build the H5 sample app to `packages/loan-genius/dist/h5`. |
|
|
497
|
+
| `pnpm preview:sample:h5` | Preview the built H5 sample. |
|
|
498
|
+
| `pnpm publish:dry` | Dry-run package validation and publishing. |
|
|
499
|
+
| `pnpm release <version\|bump>` | Validate, bump versions, create the release commit and tag, and push to trigger CI publishing. |
|
|
500
|
+
| `pnpm publish:all` | Publish the public packages in dependency order; mainly used by the tag-based Trusted Publishing workflow. |
|
|
501
|
+
|
|
502
|
+
## Limitations
|
|
503
|
+
|
|
504
|
+
- Only `wx` and `h5` targets are generated today.
|
|
505
|
+
- Application code must not import `@tarojs/*` packages directly.
|
|
506
|
+
|
|
507
|
+
## Troubleshooting
|
|
508
|
+
|
|
509
|
+
| Problem | Check |
|
|
509
510
|
| --- | --- |
|
|
510
|
-
| `VITE_PLUGIN_TARO_TARGET must be "wx" or "h5"` |
|
|
511
|
-
| `pnpm install`
|
|
512
|
-
|
|
|
513
|
-
|
|
|
514
|
-
| H5
|
|
515
|
-
| Taro
|
|
516
|
-
|
|
|
517
|
-
| Tailwind
|
|
511
|
+
| `VITE_PLUGIN_TARO_TARGET must be "wx" or "h5"` | Set the target environment variable in your script or `.env` file. |
|
|
512
|
+
| `pnpm install` says dependency build scripts were ignored | Run `pnpm approve-builds` and approve the requested dependency build scripts. |
|
|
513
|
+
| A page cannot be resolved | Confirm that `pages[].path` has a matching `src/${path}.tsx` file. |
|
|
514
|
+
| WeChat DevTools cannot open the app | Open the generated `dist/wx` folder and check `projectConfigJson.appid`. |
|
|
515
|
+
| H5 shows a blank page | Keep `<div id="app"></div>` in `index.html`, register the plugin, and avoid adding a separate default Vite `main.tsx` entry. |
|
|
516
|
+
| Taro APIs are missing or behave differently | Remove direct `@tarojs/*` imports from application code and import Taro from `virtual:taro/api`. |
|
|
517
|
+
| Components render without expected styles on H5 | Import components from `virtual:taro/components` and keep the plugin enabled for the `h5` target. |
|
|
518
|
+
| Tailwind classes do not appear | Ensure your global CSS imports Tailwind and includes an `@source` path that covers your source files. |
|
|
518
519
|
|
|
519
|
-
##
|
|
520
|
+
## Release workflow
|
|
520
521
|
|
|
521
|
-
|
|
522
|
+
This repository publishes automatically with npm Trusted Publishing and GitHub Actions. Normal pushes to `main` do not publish; only tags matching `v*.*.*` trigger `.github/workflows/publish.yml`.
|
|
523
|
+
|
|
524
|
+
Create a release:
|
|
522
525
|
|
|
523
526
|
```sh
|
|
524
|
-
pnpm
|
|
527
|
+
pnpm release patch
|
|
525
528
|
```
|
|
526
529
|
|
|
527
|
-
|
|
530
|
+
`pnpm release` requires a clean `main` working tree, runs `pnpm version:bump`, validates with `pnpm publish:dry -- --no-git-check`, creates the `chore: release vX.Y.Z` commit and `vX.Y.Z` tag, then pushes the branch and tag to trigger CI. You can also release an exact version or prerelease:
|
|
528
531
|
|
|
529
532
|
```sh
|
|
530
|
-
pnpm
|
|
533
|
+
pnpm release 0.2.0
|
|
534
|
+
pnpm release prerelease --preid beta
|
|
535
|
+
pnpm release patch --dry-run
|
|
536
|
+
pnpm release patch --no-push
|
|
531
537
|
```
|
|
532
538
|
|
|
533
|
-
|
|
539
|
+
CI runs `pnpm publish:all -- --no-git-check`, packs packages in dependency order, and publishes public packages through npm OIDC. Do not configure `NPM_TOKEN` for the publish workflow; each npm package's Trusted Publisher should point to `publish.yml`.
|
|
540
|
+
|
|
541
|
+
## License
|
|
534
542
|
|
|
535
543
|
MIT
|
package/README.zh.md
ADDED
|
@@ -0,0 +1,543 @@
|
|
|
1
|
+
# vite-plugin-taro
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/vite-plugin-taro)
|
|
4
|
+

|
|
5
|
+
[](LICENSE)
|
|
6
|
+
|
|
7
|
+
简体中文 | [English](README.md)
|
|
8
|
+
|
|
9
|
+
使用最新标准化前端技术栈 Vite 8、React 19 和 Tailwind CSS v4 构建微信小程序。
|
|
10
|
+
|
|
11
|
+
`vite-plugin-taro` 适用于希望使用 Taro 跨平台 React 组件和 API,但更偏好 Vite 而非 Taro webpack 的应用。你只需要这个插件,就能构建完整的微信小程序。
|
|
12
|
+
|
|
13
|
+
在线演示:<https://sep2.github.io/vite-plugin-taro>。如何在本地运行,请参见[示例应用](https://github.com/sep2/vite-plugin-taro/tree/main/packages/loan-genius/README.zh.md)。
|
|
14
|
+
|
|
15
|
+
- **原生 Vite 构建** 使用标准 Vite 8 配置,无需维护老旧的 webpack 配置,并支持所有 Vite 插件。
|
|
16
|
+
- **热更新** 微信小程序与 H5 都支持开发模式 watch,基于 Vite 8 热更新/快速重建即时预览。
|
|
17
|
+
- **依托成熟 Taro 能力** 复用久经实战检验的 Taro API 和组件,完整使用 Taro 跨端能力。
|
|
18
|
+
- **Tailwind 就绪** 内置 Tailwind CSS v4 支持,微信小程序与 H5 样式开箱即用。
|
|
19
|
+
- **条件编译** 支持 Taro 风格 `#ifdef` / `#ifndef` / `#if`,可按微信 / Web 裁剪代码和样式。
|
|
20
|
+
- **工作区友好** 支持普通项目与 monorepo,兼容 npm、pnpm、Yarn、Bun 等包管理器。
|
|
21
|
+
- **类型友好** 项目全链路支持 TypeScript。
|
|
22
|
+
- **微信 Skyline** 支持微信小程序 Skyline 渲染模式输出。
|
|
23
|
+
|
|
24
|
+
## 快速开始
|
|
25
|
+
|
|
26
|
+
新应用推荐使用 `create-vite-taro`。它会生成 Vite 8 + React 19 + Tailwind CSS v4 + Taro 4 项目。
|
|
27
|
+
|
|
28
|
+
### 1. 创建并安装
|
|
29
|
+
|
|
30
|
+
```sh
|
|
31
|
+
# 使用默认模板创建新应用
|
|
32
|
+
npm create vite-taro@latest my-app
|
|
33
|
+
|
|
34
|
+
# 进入项目并安装依赖
|
|
35
|
+
cd my-app
|
|
36
|
+
npm install
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
### 2. 配置微信小程序 App Id
|
|
40
|
+
|
|
41
|
+
模板会创建 `.env.local`。请将 `VITE_PLUGIN_TARO_WECHAT_APP_ID` 设置为你的微信小程序 App Id。
|
|
42
|
+
|
|
43
|
+
### 3. 开发模式运行
|
|
44
|
+
|
|
45
|
+
```sh
|
|
46
|
+
# 微信小程序:以 watch 模式重新构建 dist/wx
|
|
47
|
+
npm run dev:wx
|
|
48
|
+
|
|
49
|
+
# 然后在微信开发者工具中打开 dist/wx
|
|
50
|
+
|
|
51
|
+
# H5:启动 Vite 开发服务器
|
|
52
|
+
npm run dev:h5
|
|
53
|
+
|
|
54
|
+
# 然后在浏览器中打开标准 Vite 地址
|
|
55
|
+
# http://localhost:5173
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
你可以在两个终端中同时运行 `npm run dev:wx` 和 `npm run dev:h5`。
|
|
59
|
+
|
|
60
|
+
提示:受微信限制,开发者工具热重载有时不会完整生效。建议日常优先使用 H5 的 Vite 热更新快速调试,并定期在微信开发者工具中验证小程序端效果。
|
|
61
|
+
|
|
62
|
+
### 4. 构建、预览和类型检查
|
|
63
|
+
|
|
64
|
+
```sh
|
|
65
|
+
# 生产微信小程序产物
|
|
66
|
+
npm run build:wx
|
|
67
|
+
|
|
68
|
+
# 生产 H5 产物
|
|
69
|
+
npm run build:h5
|
|
70
|
+
|
|
71
|
+
# 预览构建后的 H5 应用
|
|
72
|
+
npm run preview:h5
|
|
73
|
+
|
|
74
|
+
# 使用 tsgo 进行类型检查
|
|
75
|
+
npm run typecheck
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
### 5. 使用 Taro 虚拟模块
|
|
79
|
+
|
|
80
|
+
应用代码请使用这些导入:
|
|
81
|
+
|
|
82
|
+
```tsx
|
|
83
|
+
import Taro from 'virtual:taro/api'
|
|
84
|
+
import { Text, View } from 'virtual:taro/components'
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
| 导入 | 用途 |
|
|
88
|
+
| --- | --- |
|
|
89
|
+
| `virtual:taro/components` | Taro React 组件,例如 `View`、`Text`、`Button`、`Image` 和 `ScrollView`。 |
|
|
90
|
+
| `virtual:taro/api` | Taro API 和 hooks,例如 `Taro.navigateTo`、`Taro.getWindowInfo` 和 `Taro.useLaunch`。 |
|
|
91
|
+
|
|
92
|
+
用法与 Taro 本身一致;组件和 API 的具体用法请参考 [Taro 官网](https://docs.taro.zone)。
|
|
93
|
+
|
|
94
|
+
你不再需要安装 `@tarojs/*` 包;应用代码也不要从 `@tarojs/*` 导入。
|
|
95
|
+
|
|
96
|
+
|
|
97
|
+
## 手动接入已有应用
|
|
98
|
+
|
|
99
|
+
已有应用或自定义项目结构,可以按下面的步骤手动接入插件。先安装插件:
|
|
100
|
+
|
|
101
|
+
```sh
|
|
102
|
+
npm install -D vite-plugin-taro
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
你的应用还必须提供 Vite 8、React 19、React DOM 19、TypeScript 检查器,以及 Node/React 类型包。如果应用尚未安装它们,请安装缺失的包:
|
|
106
|
+
|
|
107
|
+
```sh
|
|
108
|
+
npm install react react-dom
|
|
109
|
+
npm install -D vite @typescript/native-preview @types/node @types/react @types/react-dom
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
你不应再直接依赖任何 `@tarojs/*` 包。如果已经依赖,请将它们移除。
|
|
113
|
+
|
|
114
|
+
下面的步骤会创建如下源码结构:
|
|
115
|
+
|
|
116
|
+
```text
|
|
117
|
+
my-app/
|
|
118
|
+
├── index.html
|
|
119
|
+
├── package.json
|
|
120
|
+
├── tsconfig.json
|
|
121
|
+
├── vite.config.ts
|
|
122
|
+
└── src/
|
|
123
|
+
├── app.css
|
|
124
|
+
├── app.ts
|
|
125
|
+
└── pages/
|
|
126
|
+
└── index/
|
|
127
|
+
└── index.tsx
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
你也可以参考 [packages/loan-genius](https://github.com/sep2/vite-plugin-taro/tree/main/packages/loan-genius) 中的示例布局。
|
|
131
|
+
|
|
132
|
+
### 1. 添加 TypeScript 声明
|
|
133
|
+
|
|
134
|
+
将插件客户端类型添加到 `tsconfig.json`,让 TypeScript 识别虚拟模块:
|
|
135
|
+
|
|
136
|
+
```json
|
|
137
|
+
{
|
|
138
|
+
"compilerOptions": {
|
|
139
|
+
"jsx": "react-jsx",
|
|
140
|
+
"moduleResolution": "bundler",
|
|
141
|
+
"types": ["vite/client", "vite-plugin-taro/client"]
|
|
142
|
+
},
|
|
143
|
+
"include": ["src"]
|
|
144
|
+
}
|
|
145
|
+
```
|
|
146
|
+
|
|
147
|
+
### 2. 配置 Vite
|
|
148
|
+
|
|
149
|
+
创建 `vite.config.ts`,并从环境变量中选择插件目标:
|
|
150
|
+
|
|
151
|
+
```ts
|
|
152
|
+
import { defineConfig, loadEnv } from 'vite'
|
|
153
|
+
import vitePluginTaro, { type VitePluginTaroTarget } from 'vite-plugin-taro'
|
|
154
|
+
|
|
155
|
+
const targetEnvName = 'VITE_PLUGIN_TARO_TARGET'
|
|
156
|
+
|
|
157
|
+
function getTarget(env: Record<string, string>): VitePluginTaroTarget {
|
|
158
|
+
const target = env[targetEnvName]
|
|
159
|
+
if (target === 'wx' || target === 'h5') return target
|
|
160
|
+
throw new Error(`${targetEnvName} must be "wx" or "h5".`)
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
export default defineConfig(({ mode }) => {
|
|
164
|
+
const env = loadEnv(mode, process.cwd(), 'VITE_PLUGIN_TARO_')
|
|
165
|
+
const target = getTarget(env)
|
|
166
|
+
|
|
167
|
+
return {
|
|
168
|
+
build: {
|
|
169
|
+
outDir: `dist/${target}`
|
|
170
|
+
},
|
|
171
|
+
plugins: [
|
|
172
|
+
vitePluginTaro({
|
|
173
|
+
target,
|
|
174
|
+
app: 'src/app.ts',
|
|
175
|
+
pages: [
|
|
176
|
+
{
|
|
177
|
+
path: 'pages/index/index',
|
|
178
|
+
config: {
|
|
179
|
+
navigationBarTitleText: 'Home'
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
],
|
|
183
|
+
appJson: {
|
|
184
|
+
window: {
|
|
185
|
+
navigationBarTitleText: 'Demo',
|
|
186
|
+
navigationBarBackgroundColor: '#ffffff'
|
|
187
|
+
}
|
|
188
|
+
},
|
|
189
|
+
projectConfigJson: {
|
|
190
|
+
appid: env.VITE_PLUGIN_TARO_WECHAT_APP_ID || 'touristappid',
|
|
191
|
+
projectname: 'demo',
|
|
192
|
+
compileType: 'miniprogram'
|
|
193
|
+
},
|
|
194
|
+
sitemapJson: {
|
|
195
|
+
rules: [{ action: 'allow', page: '*' }]
|
|
196
|
+
}
|
|
197
|
+
})
|
|
198
|
+
]
|
|
199
|
+
}
|
|
200
|
+
})
|
|
201
|
+
```
|
|
202
|
+
|
|
203
|
+
重要约定:
|
|
204
|
+
|
|
205
|
+
- 每次 Vite 运行时,`target` 必须是 `wx` 或 `h5`。
|
|
206
|
+
- `app` 是 React 根应用组件模块,应默认导出应用组件。
|
|
207
|
+
- 每个 `pages[].path` 都会映射到 `src/${path}.tsx` 文件。例如,`pages/index/index` 需要 `src/pages/index/index.tsx`。
|
|
208
|
+
- `appJson.pages` 会根据 `pages` 自动生成;你在 `appJson` 中传入的任何 `pages` 字段都会被覆盖。
|
|
209
|
+
- 插件不会读取 Taro CLI 配置文件,例如 `config/index.ts`、`app.config.ts` 或页面 `config.ts` 文件。请通过插件选项传入应用和页面配置。
|
|
210
|
+
|
|
211
|
+
### 3. 创建应用组件
|
|
212
|
+
|
|
213
|
+
`src/app.ts` 是共享应用包装组件。它会通过 `children` 接收当前页面。
|
|
214
|
+
|
|
215
|
+
```tsx
|
|
216
|
+
import Taro from 'virtual:taro/api'
|
|
217
|
+
import type { PropsWithChildren } from 'react'
|
|
218
|
+
import './app.css'
|
|
219
|
+
|
|
220
|
+
function App({ children }: PropsWithChildren) {
|
|
221
|
+
Taro.useLaunch(() => {
|
|
222
|
+
console.log('App launched')
|
|
223
|
+
})
|
|
224
|
+
|
|
225
|
+
return children
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
export default App
|
|
229
|
+
```
|
|
230
|
+
|
|
231
|
+
请在应用组件中导入全局样式。微信构建会将它们收集到 `app.wxss`,H5 输出也会包含它们。
|
|
232
|
+
|
|
233
|
+
### 4. 创建页面组件
|
|
234
|
+
|
|
235
|
+
`src/pages/index/index.tsx` 是 `pages/index/index` 对应的 React 页面组件。
|
|
236
|
+
|
|
237
|
+
```tsx
|
|
238
|
+
import Taro from 'virtual:taro/api'
|
|
239
|
+
import { Button, Text, View } from 'virtual:taro/components'
|
|
240
|
+
|
|
241
|
+
export default function IndexPage() {
|
|
242
|
+
const windowInfo = Taro.getWindowInfo()
|
|
243
|
+
|
|
244
|
+
return (
|
|
245
|
+
<View className="p-4">
|
|
246
|
+
<Text>Viewport width: {windowInfo.windowWidth}</Text>
|
|
247
|
+
<Button
|
|
248
|
+
onClick={() => {
|
|
249
|
+
Taro.showToast({ title: 'Hello from Taro' })
|
|
250
|
+
}}
|
|
251
|
+
>
|
|
252
|
+
Show toast
|
|
253
|
+
</Button>
|
|
254
|
+
</View>
|
|
255
|
+
)
|
|
256
|
+
}
|
|
257
|
+
```
|
|
258
|
+
|
|
259
|
+
### 5. 添加 H5 HTML 外壳
|
|
260
|
+
|
|
261
|
+
对于 H5,请保留一个普通的 Vite `index.html`,并包含 `#app` 挂载节点。插件会自动注入生成的 Taro H5 入口,因此你不需要普通 Vite 的 `src/main.tsx` 脚本。
|
|
262
|
+
|
|
263
|
+
```html
|
|
264
|
+
<!doctype html>
|
|
265
|
+
<html lang="en">
|
|
266
|
+
<head>
|
|
267
|
+
<meta charset="UTF-8" />
|
|
268
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
269
|
+
<title>Taro Vite App</title>
|
|
270
|
+
</head>
|
|
271
|
+
<body>
|
|
272
|
+
<div id="app"></div>
|
|
273
|
+
</body>
|
|
274
|
+
</html>
|
|
275
|
+
```
|
|
276
|
+
|
|
277
|
+
### 6. 添加脚本
|
|
278
|
+
|
|
279
|
+
使用与 `create-vite-taro` 生成项目一致的脚本:
|
|
280
|
+
|
|
281
|
+
```json
|
|
282
|
+
{
|
|
283
|
+
"scripts": {
|
|
284
|
+
"dev:wx": "NODE_ENV=development VITE_PLUGIN_TARO_TARGET=wx vite build --watch",
|
|
285
|
+
"dev:h5": "NODE_ENV=development VITE_PLUGIN_TARO_TARGET=h5 vite",
|
|
286
|
+
"build:wx": "NODE_ENV=production VITE_PLUGIN_TARO_TARGET=wx vite build",
|
|
287
|
+
"build:h5": "NODE_ENV=production VITE_PLUGIN_TARO_TARGET=h5 vite build",
|
|
288
|
+
"preview:h5": "NODE_ENV=production VITE_PLUGIN_TARO_TARGET=h5 vite preview --outDir dist/h5",
|
|
289
|
+
"typecheck": "tsgo -b"
|
|
290
|
+
}
|
|
291
|
+
}
|
|
292
|
+
```
|
|
293
|
+
|
|
294
|
+
在 Windows shell 中,请使用 `cross-env`。
|
|
295
|
+
|
|
296
|
+
### 7. 运行每个目标
|
|
297
|
+
|
|
298
|
+
```sh
|
|
299
|
+
npm run dev:wx # 以 watch 模式重新构建 dist/wx
|
|
300
|
+
npm run dev:h5 # 启动 H5 开发服务器
|
|
301
|
+
npm run build:wx # 构建 dist/wx
|
|
302
|
+
npm run build:h5 # 构建 dist/h5
|
|
303
|
+
npm run preview:h5 # 预览 dist/h5
|
|
304
|
+
npm run typecheck # 使用 tsgo 进行类型检查
|
|
305
|
+
```
|
|
306
|
+
|
|
307
|
+
在微信开发者工具中打开生成的 `dist/wx` 目录。
|
|
308
|
+
|
|
309
|
+
| 目标 | 含义 | 输出目录 |
|
|
310
|
+
| --- | --- | --- |
|
|
311
|
+
| `wx` | 开发/生产模式下的微信小程序。 | `dist/wx` |
|
|
312
|
+
| `h5` | H5 生产输出。 | `dist/h5` |
|
|
313
|
+
|
|
314
|
+
## 选项
|
|
315
|
+
|
|
316
|
+
```ts
|
|
317
|
+
type VitePluginTaroTarget = 'wx' | 'h5'
|
|
318
|
+
|
|
319
|
+
type VitePluginTaroPageOption = {
|
|
320
|
+
path: string
|
|
321
|
+
config: Record<string, unknown>
|
|
322
|
+
}
|
|
323
|
+
|
|
324
|
+
type VitePluginTaroOptions = {
|
|
325
|
+
target: VitePluginTaroTarget
|
|
326
|
+
app: string
|
|
327
|
+
pages: VitePluginTaroPageOption[]
|
|
328
|
+
appJson: Record<string, unknown>
|
|
329
|
+
projectConfigJson: Record<string, unknown>
|
|
330
|
+
sitemapJson: Record<string, unknown>
|
|
331
|
+
}
|
|
332
|
+
```
|
|
333
|
+
|
|
334
|
+
| 选项 | 描述 |
|
|
335
|
+
| --- | --- |
|
|
336
|
+
| `target` | 本次 Vite 调用的活动目标。微信小程序使用 `wx`,Web 使用 `h5`。 |
|
|
337
|
+
| `app` | 默认导出根 React 应用组件的源码文件,例如 `src/app.ts` 或 `src/app.tsx`。 |
|
|
338
|
+
| `pages` | 有序页面列表。该顺序会成为 `app.json.pages` 和 H5 路由顺序。 |
|
|
339
|
+
| `pages[].path` | 不带扩展名的 Taro 风格路由和输出路径,例如 `pages/index/index`。页面组件必须存在于 `src/${path}.tsx`。 |
|
|
340
|
+
| `pages[].config` | 合并到生成的微信页面 JSON 和 H5 路由配置中的页面配置。 |
|
|
341
|
+
| `appJson` | 基础应用配置。插件会用 `options.pages` 覆盖其中的 `pages` 字段。 |
|
|
342
|
+
| `projectConfigJson` | `wx` 构建时输出的微信 `project.config.json` 内容。即使当前目标是 `h5`,选项类型也要求提供它。 |
|
|
343
|
+
| `sitemapJson` | `wx` 构建时输出的微信 `sitemap.json` 内容。即使当前目标是 `h5`,选项类型也要求提供它。 |
|
|
344
|
+
|
|
345
|
+
## 样式
|
|
346
|
+
|
|
347
|
+
你可以使用普通 CSS、CSS Modules 或 Tailwind CSS v4。
|
|
348
|
+
|
|
349
|
+
对于 Tailwind CSS v4,请从全局 CSS 文件(例如 `src/app.css`)导入 Tailwind:
|
|
350
|
+
|
|
351
|
+
```css
|
|
352
|
+
@import "tailwindcss/theme.css";
|
|
353
|
+
@import "tailwindcss/preflight.css";
|
|
354
|
+
@import "tailwindcss/utilities.css";
|
|
355
|
+
|
|
356
|
+
@source "./";
|
|
357
|
+
```
|
|
358
|
+
|
|
359
|
+
插件会为 `wx` 构建注册 `weapp-tailwindcss`,并为 `h5` 构建注册 `@tailwindcss/vite`。对于 `wx`,Vite 输出的 CSS 会被收集到 `app.wxss`,并为每个页面生成配套的 `.wxss` 文件。
|
|
360
|
+
|
|
361
|
+
## 条件编译
|
|
362
|
+
|
|
363
|
+
插件会在 Vite 解析源码前移除未激活的 Taro 风格条件注释块。它适用于 `node_modules` 之外的 TypeScript、JavaScript、JSX/TSX、CSS、Sass、Less 和 Stylus 文件。
|
|
364
|
+
|
|
365
|
+
```ts
|
|
366
|
+
// #ifdef wx
|
|
367
|
+
console.log('WeChat only')
|
|
368
|
+
// #endif
|
|
369
|
+
|
|
370
|
+
// #ifdef h5
|
|
371
|
+
console.log('H5 only')
|
|
372
|
+
// #endif
|
|
373
|
+
|
|
374
|
+
// #if wx && !h5
|
|
375
|
+
console.log('WeChat expression')
|
|
376
|
+
// #elif h5
|
|
377
|
+
console.log('H5 expression')
|
|
378
|
+
// #else
|
|
379
|
+
console.log('fallback')
|
|
380
|
+
// #endif
|
|
381
|
+
```
|
|
382
|
+
|
|
383
|
+
支持的指令包括 `#ifdef`、`#ifndef`、`#if`、`#elif`、`#else` 和 `#endif`。条件使用插件目标标记 `wx` 和 `h5`;`#if` 表达式支持 `!`、`&&` 和 `||`。
|
|
384
|
+
|
|
385
|
+
## 按目标输出
|
|
386
|
+
|
|
387
|
+
### 微信小程序
|
|
388
|
+
|
|
389
|
+
对于 `target: 'wx'`,插件会配置 Vite,输出微信兼容的 CommonJS chunk 和小程序配套文件。
|
|
390
|
+
|
|
391
|
+
典型输出:
|
|
392
|
+
|
|
393
|
+
```text
|
|
394
|
+
dist/wx/
|
|
395
|
+
├── app.js
|
|
396
|
+
├── app.json
|
|
397
|
+
├── app.wxss
|
|
398
|
+
├── base.wxml
|
|
399
|
+
├── comp.js
|
|
400
|
+
├── comp.json
|
|
401
|
+
├── comp.wxml
|
|
402
|
+
├── project.config.json
|
|
403
|
+
├── sitemap.json
|
|
404
|
+
├── utils.wxs
|
|
405
|
+
└── pages/**
|
|
406
|
+
```
|
|
407
|
+
|
|
408
|
+
请使用微信开发者工具打开 `dist/wx`;不要打开源码项目目录。
|
|
409
|
+
|
|
410
|
+
### H5
|
|
411
|
+
|
|
412
|
+
对于 `target: 'h5'`,插件会向 `index.html` 注入生成模块,导入 Taro 的 H5 组件样式,根据 `pages` 构建路由记录,并使用 Taro 的 hash-history 路由挂载应用。路由使用配置中的页面路径,例如 `#/pages/index/index`。
|
|
413
|
+
|
|
414
|
+
## 从 Taro 迁移
|
|
415
|
+
|
|
416
|
+
你可以保留大多数 React 页面组件、业务逻辑、资源和样式,但构建入口会从 Taro CLI 配置迁移到 Vite 配置。
|
|
417
|
+
|
|
418
|
+
迁移清单:
|
|
419
|
+
|
|
420
|
+
1. 安装 `vite-plugin-taro`,并创建包含 `vitePluginTaro(...)` 的 `vite.config.ts`。
|
|
421
|
+
2. 将应用配置和页面配置移到 `vite.config.ts` 中。插件不会读取 `config/index.ts`、`app.config.ts` 或页面 `config.ts` 等 Taro 文件。
|
|
422
|
+
3. 在 `pages` 中注册每个页面。每个页面路径都必须匹配 `src/${path}.tsx`。
|
|
423
|
+
4. 将 Taro 脚本替换为设置 `VITE_PLUGIN_TARO_TARGET=wx` 或 `VITE_PLUGIN_TARO_TARGET=h5` 的 Vite 脚本。
|
|
424
|
+
5. 对于 H5,添加普通 Vite `index.html`,其中包含 `<div id="app"></div>`,且不要添加单独的 `src/main.tsx` 入口。
|
|
425
|
+
6. 将应用代码中的 `@tarojs/*` 导入替换为插件虚拟模块。
|
|
426
|
+
|
|
427
|
+
迁移前:
|
|
428
|
+
|
|
429
|
+
```tsx
|
|
430
|
+
import Taro from '@tarojs/taro'
|
|
431
|
+
import { Text, View } from '@tarojs/components'
|
|
432
|
+
```
|
|
433
|
+
|
|
434
|
+
迁移后:
|
|
435
|
+
|
|
436
|
+
```tsx
|
|
437
|
+
import Taro from 'virtual:taro/api'
|
|
438
|
+
import { Text, View } from 'virtual:taro/components'
|
|
439
|
+
```
|
|
440
|
+
|
|
441
|
+
应用代码中禁止直接导入 `@tarojs/*`。请让插件负责 Taro 运行时解析,使微信和 H5 构建都获得正确的目标特定别名。
|
|
442
|
+
|
|
443
|
+
## 示例应用
|
|
444
|
+
|
|
445
|
+
示例应用位于 [`packages/loan-genius`](https://github.com/sep2/vite-plugin-taro/tree/main/packages/loan-genius)。它展示了页面约定、目标选择、微信输出、H5 路由和 Tailwind 样式。
|
|
446
|
+
|
|
447
|
+
```sh
|
|
448
|
+
git clone https://github.com/sep2/vite-plugin-taro.git
|
|
449
|
+
|
|
450
|
+
# 安装依赖
|
|
451
|
+
pnpm install
|
|
452
|
+
|
|
453
|
+
# 首次运行,生成打过补丁的 Taro 包
|
|
454
|
+
pnpm prepare:taro
|
|
455
|
+
|
|
456
|
+
# 构建插件,供示例应用使用
|
|
457
|
+
pnpm build:plugin
|
|
458
|
+
|
|
459
|
+
# 运行微信示例应用
|
|
460
|
+
pnpm dev:sample:wx
|
|
461
|
+
|
|
462
|
+
# 将示例应用构建为微信输出
|
|
463
|
+
pnpm build:sample:wx
|
|
464
|
+
|
|
465
|
+
# 以开发模式运行 H5 示例应用
|
|
466
|
+
pnpm dev:sample:h5
|
|
467
|
+
|
|
468
|
+
# 将示例应用构建为 H5 输出并预览
|
|
469
|
+
pnpm build:sample:h5
|
|
470
|
+
pnpm preview:sample:h5
|
|
471
|
+
```
|
|
472
|
+
|
|
473
|
+
使用微信开发者工具打开 `packages/loan-genius/dist/wx`,以测试小程序输出。
|
|
474
|
+
|
|
475
|
+
## 开发本仓库
|
|
476
|
+
|
|
477
|
+
```sh
|
|
478
|
+
pnpm install
|
|
479
|
+
pnpm prepare:taro
|
|
480
|
+
pnpm build:plugin
|
|
481
|
+
pnpm typecheck
|
|
482
|
+
```
|
|
483
|
+
|
|
484
|
+
常用脚本:
|
|
485
|
+
|
|
486
|
+
| 脚本 | 描述 |
|
|
487
|
+
| --- | --- |
|
|
488
|
+
| `pnpm prepare:taro` | 从上游 npm tarball 和本地 patch 文件重新生成打过补丁的 React 19 Taro 包。 |
|
|
489
|
+
| `pnpm build:plugin` | 将 `packages/vite-plugin-taro` 构建到 `dist`。 |
|
|
490
|
+
| `pnpm typecheck` | 使用 `tsgo` 对插件和示例应用进行类型检查。 |
|
|
491
|
+
| `pnpm lint` | 运行 Biome 检查。 |
|
|
492
|
+
| `pnpm format` | 应用 Biome 格式化。 |
|
|
493
|
+
| `pnpm dev:sample:wx` | 以 watch 模式构建微信小程序示例。请先构建插件。 |
|
|
494
|
+
| `pnpm dev:sample:h5` | 以 Vite 开发模式启动 H5 示例应用。请先构建插件。 |
|
|
495
|
+
| `pnpm build:sample:wx` | 将微信小程序示例构建到 `packages/loan-genius/dist/wx`。 |
|
|
496
|
+
| `pnpm build:sample:h5` | 将 H5 示例应用构建到 `packages/loan-genius/dist/h5`。 |
|
|
497
|
+
| `pnpm preview:sample:h5` | 预览构建后的 H5 示例。 |
|
|
498
|
+
| `pnpm publish:dry` | 干运行包校验和发布流程。 |
|
|
499
|
+
| `pnpm release <version\|bump>` | 验证发布、更新版本、创建 release commit 和 tag,并推送触发 CI 发布。 |
|
|
500
|
+
| `pnpm publish:all` | 按依赖顺序发布公开包;主要由基于 tag 的 Trusted Publishing 工作流调用。 |
|
|
501
|
+
|
|
502
|
+
## 限制
|
|
503
|
+
|
|
504
|
+
- 目前只生成 `wx` 和 `h5` 目标。
|
|
505
|
+
- 应用代码不能直接导入 `@tarojs/*` 包。
|
|
506
|
+
|
|
507
|
+
## 排查问题
|
|
508
|
+
|
|
509
|
+
| 问题 | 检查项 |
|
|
510
|
+
| --- | --- |
|
|
511
|
+
| `VITE_PLUGIN_TARO_TARGET must be "wx" or "h5"` | 在脚本或 `.env` 文件中设置目标环境变量。 |
|
|
512
|
+
| `pnpm install` 提示忽略了依赖构建脚本 | 运行 `pnpm approve-builds`,按提示批准需要构建的依赖。 |
|
|
513
|
+
| 页面无法解析 | 确认 `pages[].path` 有匹配的 `src/${path}.tsx` 文件。 |
|
|
514
|
+
| 微信开发者工具无法打开应用 | 打开生成的 `dist/wx` 文件夹,并检查 `projectConfigJson.appid`。 |
|
|
515
|
+
| H5 显示空白页 | 确保 `index.html` 中保留 `<div id="app"></div>`,已注册插件,并避免添加单独的默认 Vite `main.tsx` 入口。 |
|
|
516
|
+
| Taro API 缺失或行为不同 | 移除应用代码中直接导入的 `@tarojs/*`,并从 `virtual:taro/api` 导入 Taro。 |
|
|
517
|
+
| 组件在 H5 上渲染时缺少预期样式 | 从 `virtual:taro/components` 导入组件,并确保 `h5` 目标启用了插件。 |
|
|
518
|
+
| Tailwind 类没有生效 | 确保全局 CSS 导入 Tailwind,并包含覆盖源码文件的 `@source` 路径。 |
|
|
519
|
+
|
|
520
|
+
## 发布流程
|
|
521
|
+
|
|
522
|
+
本仓库使用 npm Trusted Publishing 和 GitHub Actions 自动发布。普通推送到 `main` 不会发布;只有推送匹配 `v*.*.*` 的 tag 才会触发 `.github/workflows/publish.yml`。
|
|
523
|
+
|
|
524
|
+
创建发布:
|
|
525
|
+
|
|
526
|
+
```sh
|
|
527
|
+
pnpm release patch
|
|
528
|
+
```
|
|
529
|
+
|
|
530
|
+
`pnpm release` 会要求干净的 `main` 工作区,运行 `pnpm version:bump`,执行 `pnpm publish:dry -- --no-git-check` 验证,创建 `chore: release vX.Y.Z` commit 和 `vX.Y.Z` tag,然后推送 branch 与 tag 触发 CI。也可以发布精确版本或预发布版本:
|
|
531
|
+
|
|
532
|
+
```sh
|
|
533
|
+
pnpm release 0.2.0
|
|
534
|
+
pnpm release prerelease --preid beta
|
|
535
|
+
pnpm release patch --dry-run
|
|
536
|
+
pnpm release patch --no-push
|
|
537
|
+
```
|
|
538
|
+
|
|
539
|
+
CI 会运行 `pnpm publish:all -- --no-git-check`,按依赖顺序打包并通过 npm OIDC 发布公开包。不要为发布工作流配置 `NPM_TOKEN`;每个 npm 包的 Trusted Publisher 应指向 `publish.yml`。
|
|
540
|
+
|
|
541
|
+
## 许可证
|
|
542
|
+
|
|
543
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "vite-plugin-taro",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.8",
|
|
4
4
|
"author": "sep2",
|
|
5
5
|
"description": "Vite 8 plugin for building one React/Taro codebase for WeChat Mini Program and H5 targets.",
|
|
6
6
|
"type": "module",
|
|
@@ -32,7 +32,8 @@
|
|
|
32
32
|
"client.d.ts",
|
|
33
33
|
"LICENSE",
|
|
34
34
|
"README.md",
|
|
35
|
-
"README.en.md"
|
|
35
|
+
"README.en.md",
|
|
36
|
+
"README.zh.md"
|
|
36
37
|
],
|
|
37
38
|
"keywords": [
|
|
38
39
|
"vite",
|
|
@@ -64,8 +65,8 @@
|
|
|
64
65
|
"babel-plugin-transform-taroapi": "^4.2.0",
|
|
65
66
|
"tailwindcss": "^4.3.1",
|
|
66
67
|
"weapp-tailwindcss": "^5.0.13",
|
|
67
|
-
"@tarojs/plugin-framework-react": "npm:vite-plugin-taro-plugin-framework-react@0.1.
|
|
68
|
-
"@tarojs/react": "npm:vite-plugin-taro-react@0.1.
|
|
68
|
+
"@tarojs/plugin-framework-react": "npm:vite-plugin-taro-plugin-framework-react@0.1.8",
|
|
69
|
+
"@tarojs/react": "npm:vite-plugin-taro-react@0.1.8"
|
|
69
70
|
},
|
|
70
71
|
"peerDependencies": {
|
|
71
72
|
"react": "^19.0.0",
|