vite-plugin-taro 0.3.1 → 0.4.0

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 (260) hide show
  1. package/README.en.md +44 -0
  2. package/README.md +22 -497
  3. package/client.d.ts +9 -0
  4. package/dist/node/plugins/client/client-taro.d.ts +4 -0
  5. package/dist/node/plugins/client/client-taro.js +19 -0
  6. package/dist/node/plugins/client/constant.d.ts +4 -0
  7. package/dist/node/plugins/client/constant.js +4 -0
  8. package/dist/node/plugins/conditional/conditional-directives.d.ts +4 -0
  9. package/dist/node/plugins/{conditional-directives.js → conditional/conditional-directives.js} +27 -11
  10. package/dist/node/plugins/css/plugins.d.ts +4 -0
  11. package/dist/node/plugins/css/plugins.js +84 -0
  12. package/dist/node/plugins/h5/constant.d.ts +2 -0
  13. package/dist/node/plugins/h5/constant.js +3 -0
  14. package/dist/node/plugins/h5/plugins.d.ts +4 -0
  15. package/dist/node/plugins/h5/plugins.js +161 -0
  16. package/dist/node/plugins/h5/resolver/module-resolver.d.ts +14 -0
  17. package/dist/node/plugins/h5/resolver/module-resolver.js +19 -0
  18. package/dist/node/plugins/h5/transform-app.d.ts +10 -0
  19. package/dist/node/plugins/h5/transform-app.js +48 -0
  20. package/dist/node/plugins/wx/dev/dev-host.d.ts +15 -0
  21. package/dist/node/plugins/wx/dev/dev-host.js +352 -0
  22. package/dist/node/plugins/wx/dev/hmr-files.d.ts +28 -0
  23. package/dist/node/plugins/wx/dev/hmr-files.js +34 -0
  24. package/dist/node/plugins/wx/dev/patch-publisher.d.ts +22 -0
  25. package/dist/node/plugins/wx/dev/patch-publisher.js +40 -0
  26. package/dist/node/plugins/wx/dev/plugin.d.ts +7 -0
  27. package/dist/node/plugins/wx/dev/plugin.js +73 -0
  28. package/dist/node/plugins/wx/dev/react-refresh.d.ts +20 -0
  29. package/dist/node/plugins/wx/dev/react-refresh.js +198 -0
  30. package/dist/node/plugins/wx/module.d.ts +45 -0
  31. package/dist/node/plugins/wx/module.js +66 -0
  32. package/dist/node/plugins/wx/native/compile-native-component-interface.d.ts +21 -0
  33. package/dist/node/plugins/wx/native/compile-native-component-interface.js +29 -0
  34. package/dist/node/plugins/wx/native/create-native-component-output.d.ts +15 -0
  35. package/dist/node/plugins/wx/native/create-native-component-output.js +39 -0
  36. package/dist/node/plugins/wx/native/native-component-assets.d.ts +26 -0
  37. package/dist/node/plugins/wx/native/native-component-assets.js +76 -0
  38. package/dist/node/plugins/wx/native/native-component-interface.d.ts +12 -0
  39. package/dist/node/plugins/wx/native/native-component-interface.js +201 -0
  40. package/dist/node/plugins/wx/output/files.d.ts +12 -0
  41. package/dist/node/plugins/wx/output/files.js +12 -0
  42. package/dist/node/plugins/wx/output/json.d.ts +14 -0
  43. package/dist/node/plugins/wx/output/json.js +52 -0
  44. package/dist/node/plugins/wx/output/relative-root.d.ts +2 -0
  45. package/dist/node/plugins/wx/output/relative-root.js +6 -0
  46. package/dist/node/plugins/wx/output/templates.d.ts +7 -0
  47. package/dist/node/plugins/wx/output/templates.js +100 -0
  48. package/dist/node/plugins/wx/placement/placer.d.ts +78 -0
  49. package/dist/node/plugins/wx/placement/placer.js +145 -0
  50. package/dist/node/plugins/wx/placement/plan.d.ts +46 -0
  51. package/dist/node/plugins/wx/placement/plan.js +210 -0
  52. package/dist/node/plugins/wx/plugins.d.ts +4 -0
  53. package/dist/node/plugins/wx/plugins.js +137 -0
  54. package/dist/node/plugins/wx/render/capsule-wrapper.d.ts +3 -0
  55. package/dist/node/plugins/wx/render/capsule-wrapper.js +64 -0
  56. package/dist/node/plugins/wx/render/capsule.d.ts +4 -0
  57. package/dist/node/plugins/wx/render/capsule.js +13 -0
  58. package/dist/node/plugins/wx/render/native.d.ts +9 -0
  59. package/dist/node/plugins/wx/render/native.js +45 -0
  60. package/dist/node/plugins/wx/render/transport.d.ts +17 -0
  61. package/dist/node/plugins/wx/render/transport.js +94 -0
  62. package/dist/node/plugins/wx/resolve/resolver.d.ts +7 -0
  63. package/dist/node/plugins/wx/resolve/resolver.js +86 -0
  64. package/dist/node/plugins/wx/resolve/specialize-bootstrap.d.ts +9 -0
  65. package/dist/node/plugins/wx/resolve/specialize-bootstrap.js +9 -0
  66. package/dist/node/plugins/wx/resolve/specialize-page-capsule.d.ts +9 -0
  67. package/dist/node/plugins/wx/resolve/specialize-page-capsule.js +11 -0
  68. package/dist/node/utils/constant.d.ts +1 -0
  69. package/dist/node/utils/constant.js +1 -0
  70. package/dist/node/utils/memoize.d.ts +122 -0
  71. package/dist/node/utils/memoize.js +86 -0
  72. package/dist/node/utils/modules.d.ts +20 -24
  73. package/dist/node/utils/modules.js +21 -34
  74. package/dist/node/utils/once.d.ts +10 -0
  75. package/dist/node/utils/once.js +20 -0
  76. package/dist/node/utils/packages.d.ts +1 -0
  77. package/dist/node/utils/packages.js +1 -1
  78. package/dist/node/utils/project-config.d.ts +3 -0
  79. package/dist/node/utils/project-config.js +8 -0
  80. package/dist/node/utils/serialized-task-queue.d.ts +9 -0
  81. package/dist/node/utils/serialized-task-queue.js +17 -0
  82. package/dist/node/utils/transform.d.ts +11 -0
  83. package/dist/node/utils/transform.js +58 -0
  84. package/dist/node/vite-plugin.d.ts +1 -1
  85. package/dist/node/vite-plugin.js +11 -27
  86. package/dist/options.d.ts +3 -4
  87. package/dist/runtime/{taro → client/taro}/api.d.ts +0 -1
  88. package/dist/runtime/client/taro/api.js +9 -0
  89. package/dist/runtime/client/taro/component.d.ts +1 -0
  90. package/dist/runtime/client/taro/component.js +1 -0
  91. package/dist/runtime/client/taro/define-native-component.d.ts +7 -0
  92. package/dist/runtime/client/taro/define-native-component.js +4 -0
  93. package/dist/runtime/h5/app.d.ts +2 -0
  94. package/dist/runtime/h5/app.js +15 -0
  95. package/dist/runtime/h5/taro-runtime.d.ts +1 -1
  96. package/dist/runtime/h5/taro-runtime.js +1 -4
  97. package/dist/runtime/wx/amphibious/bootstrap.d.ts +4 -0
  98. package/dist/runtime/wx/amphibious/bootstrap.js +16 -0
  99. package/dist/runtime/wx/amphibious/transport.d.ts +2 -0
  100. package/dist/runtime/wx/amphibious/transport.js +4 -0
  101. package/dist/runtime/wx/capsule/app.d.ts +2 -0
  102. package/dist/runtime/wx/capsule/app.js +7 -0
  103. package/dist/runtime/wx/capsule/component.d.ts +3 -0
  104. package/dist/runtime/wx/capsule/component.js +4 -0
  105. package/dist/runtime/wx/capsule/page.d.ts +3 -0
  106. package/dist/runtime/wx/capsule/page.js +68 -0
  107. package/dist/runtime/wx/capsule/taro-runtime.d.ts +6 -0
  108. package/dist/runtime/wx/capsule/taro-runtime.js +6 -0
  109. package/dist/runtime/wx/dev/dev-runtime.d.ts +1 -0
  110. package/dist/runtime/wx/dev/dev-runtime.js +246 -0
  111. package/dist/runtime/wx/native/app.d.ts +1 -0
  112. package/dist/runtime/wx/native/app.js +3 -0
  113. package/dist/runtime/wx/native/component.d.ts +1 -0
  114. package/dist/runtime/wx/native/component.js +3 -0
  115. package/dist/runtime/wx/native/page.d.ts +1 -0
  116. package/dist/runtime/wx/native/page.js +4 -0
  117. package/dist/runtime/wx/systemjs/system-core.d.ts +4 -0
  118. package/dist/runtime/wx/systemjs/system-core.js +331 -0
  119. package/package.json +21 -13
  120. package/src/node/plugins/client/client-taro.ts +23 -0
  121. package/src/node/plugins/client/constant.ts +5 -0
  122. package/src/node/plugins/{conditional-directives.ts → conditional/conditional-directives.ts} +33 -13
  123. package/src/node/plugins/css/plugins.ts +96 -0
  124. package/src/node/plugins/h5/constant.ts +4 -0
  125. package/src/node/plugins/h5/plugins.ts +197 -0
  126. package/src/node/plugins/h5/resolver/module-resolver.ts +32 -0
  127. package/src/node/plugins/h5/transform-app.ts +90 -0
  128. package/src/node/plugins/wx/dev/dev-host.ts +448 -0
  129. package/src/node/plugins/wx/dev/hmr-files.ts +55 -0
  130. package/src/node/plugins/wx/dev/patch-publisher.ts +49 -0
  131. package/src/node/plugins/wx/dev/plugin.ts +82 -0
  132. package/src/node/plugins/wx/dev/react-refresh.ts +227 -0
  133. package/src/node/plugins/wx/module.ts +97 -0
  134. package/src/node/plugins/wx/native/compile-native-component-interface.ts +47 -0
  135. package/src/node/plugins/wx/native/create-native-component-output.ts +57 -0
  136. package/src/node/plugins/wx/native/native-component-assets.ts +114 -0
  137. package/src/node/plugins/wx/native/native-component-interface.ts +265 -0
  138. package/src/node/plugins/wx/output/files.ts +27 -0
  139. package/src/node/plugins/wx/output/json.ts +79 -0
  140. package/src/node/plugins/wx/output/relative-root.ts +7 -0
  141. package/src/node/plugins/wx/output/templates.ts +141 -0
  142. package/src/node/plugins/wx/placement/placer.ts +172 -0
  143. package/src/node/plugins/wx/placement/plan.ts +306 -0
  144. package/src/node/plugins/wx/plugins.ts +165 -0
  145. package/src/node/plugins/wx/render/capsule-wrapper.ts +86 -0
  146. package/src/node/plugins/wx/render/capsule.ts +21 -0
  147. package/src/node/plugins/wx/render/native.ts +84 -0
  148. package/src/node/plugins/wx/render/transport.ts +157 -0
  149. package/src/node/plugins/wx/resolve/resolver.ts +125 -0
  150. package/src/node/plugins/wx/resolve/specialize-bootstrap.ts +27 -0
  151. package/src/node/plugins/wx/resolve/specialize-page-capsule.ts +29 -0
  152. package/src/node/utils/constant.ts +1 -0
  153. package/src/node/utils/memoize.ts +149 -0
  154. package/src/node/utils/modules.ts +36 -38
  155. package/src/node/utils/once.ts +21 -0
  156. package/src/node/utils/packages.ts +1 -1
  157. package/src/node/utils/project-config.ts +10 -0
  158. package/src/node/utils/serialized-task-queue.ts +20 -0
  159. package/src/node/utils/transform.ts +82 -0
  160. package/src/node/vite-plugin.ts +12 -33
  161. package/src/options.ts +3 -4
  162. package/src/runtime/client/taro/api.ts +11 -0
  163. package/src/runtime/client/taro/component.ts +1 -0
  164. package/src/runtime/client/taro/define-native-component.ts +15 -0
  165. package/src/runtime/h5/app.ts +25 -0
  166. package/src/runtime/h5/taro-runtime.ts +1 -4
  167. package/src/runtime/wx/amphibious/bootstrap.ts +22 -0
  168. package/src/runtime/wx/amphibious/transport.ts +10 -0
  169. package/src/runtime/wx/capsule/app.ts +9 -0
  170. package/src/runtime/wx/capsule/component.ts +6 -0
  171. package/src/runtime/wx/capsule/page.ts +96 -0
  172. package/src/runtime/wx/capsule/taro-runtime.ts +14 -0
  173. package/src/runtime/wx/dev/dev-runtime.ts +317 -0
  174. package/src/runtime/wx/native/app.ts +4 -0
  175. package/src/runtime/wx/native/component.ts +4 -0
  176. package/src/runtime/wx/native/page.ts +6 -0
  177. package/src/runtime/wx/systemjs/LICENSE +10 -0
  178. package/src/runtime/wx/systemjs/system-core.js +370 -0
  179. package/src/runtime/wx/systemjs/system.d.ts +55 -0
  180. package/src/runtime/wx/wechat.d.ts +52 -0
  181. package/README.zh.md +0 -521
  182. package/dist/node/build-context.d.ts +0 -25
  183. package/dist/node/build-context.js +0 -48
  184. package/dist/node/css/css-pipeline.d.ts +0 -21
  185. package/dist/node/css/css-pipeline.js +0 -129
  186. package/dist/node/plugins/conditional-directives.d.ts +0 -3
  187. package/dist/node/plugins/taro-runtime.d.ts +0 -5
  188. package/dist/node/plugins/taro-runtime.js +0 -18
  189. package/dist/node/targets/h5/plugin.d.ts +0 -6
  190. package/dist/node/targets/h5/plugin.js +0 -117
  191. package/dist/node/targets/h5/virtual-modules.d.ts +0 -5
  192. package/dist/node/targets/h5/virtual-modules.js +0 -60
  193. package/dist/node/targets/wx/companion-assets.d.ts +0 -19
  194. package/dist/node/targets/wx/companion-assets.js +0 -129
  195. package/dist/node/targets/wx/dev-server/development-session.d.ts +0 -31
  196. package/dist/node/targets/wx/dev-server/development-session.js +0 -202
  197. package/dist/node/targets/wx/dev-server/full-build-scheduler.d.ts +0 -14
  198. package/dist/node/targets/wx/dev-server/full-build-scheduler.js +0 -60
  199. package/dist/node/targets/wx/dev-server/js-utils.d.ts +0 -5
  200. package/dist/node/targets/wx/dev-server/js-utils.js +0 -28
  201. package/dist/node/targets/wx/dev-server/output.d.ts +0 -19
  202. package/dist/node/targets/wx/dev-server/output.js +0 -44
  203. package/dist/node/targets/wx/dev-server/rolldown-runtime-source.d.ts +0 -8
  204. package/dist/node/targets/wx/dev-server/rolldown-runtime-source.js +0 -95
  205. package/dist/node/targets/wx/dev-server/update-server-state.d.ts +0 -65
  206. package/dist/node/targets/wx/dev-server/update-server-state.js +0 -116
  207. package/dist/node/targets/wx/dev-server/update-transport.d.ts +0 -28
  208. package/dist/node/targets/wx/dev-server/update-transport.js +0 -212
  209. package/dist/node/targets/wx/dev-server/vite-bundled-dev-adapter.d.ts +0 -44
  210. package/dist/node/targets/wx/dev-server/vite-bundled-dev-adapter.js +0 -145
  211. package/dist/node/targets/wx/development-files.d.ts +0 -8
  212. package/dist/node/targets/wx/development-files.js +0 -8
  213. package/dist/node/targets/wx/plugin.d.ts +0 -6
  214. package/dist/node/targets/wx/plugin.js +0 -143
  215. package/dist/node/targets/wx/react-refresh.d.ts +0 -4
  216. package/dist/node/targets/wx/react-refresh.js +0 -38
  217. package/dist/node/targets/wx/virtual-modules.d.ts +0 -16
  218. package/dist/node/targets/wx/virtual-modules.js +0 -120
  219. package/dist/node/utils/async.d.ts +0 -8
  220. package/dist/node/utils/async.js +0 -16
  221. package/dist/node/utils/filesystem.d.ts +0 -13
  222. package/dist/node/utils/filesystem.js +0 -43
  223. package/dist/runtime/taro/api.js +0 -11
  224. package/dist/runtime/taro/components.d.ts +0 -2
  225. package/dist/runtime/taro/components.js +0 -2
  226. package/dist/runtime/wx/page-update.d.ts +0 -6
  227. package/dist/runtime/wx/page-update.js +0 -157
  228. package/dist/runtime/wx/taro-runtime.d.ts +0 -5
  229. package/dist/runtime/wx/taro-runtime.js +0 -6
  230. package/dist/runtime/wx/update-client-state.d.ts +0 -68
  231. package/dist/runtime/wx/update-client-state.js +0 -84
  232. package/dist/runtime/wx/update-client.d.ts +0 -1
  233. package/dist/runtime/wx/update-client.js +0 -170
  234. package/src/node/build-context.ts +0 -63
  235. package/src/node/css/css-pipeline.ts +0 -147
  236. package/src/node/plugins/taro-runtime.ts +0 -22
  237. package/src/node/targets/h5/plugin.ts +0 -135
  238. package/src/node/targets/h5/virtual-modules.ts +0 -71
  239. package/src/node/targets/wx/companion-assets.ts +0 -170
  240. package/src/node/targets/wx/dev-server/development-session.ts +0 -253
  241. package/src/node/targets/wx/dev-server/full-build-scheduler.ts +0 -62
  242. package/src/node/targets/wx/dev-server/js-utils.ts +0 -33
  243. package/src/node/targets/wx/dev-server/output.ts +0 -56
  244. package/src/node/targets/wx/dev-server/rolldown-runtime-source.ts +0 -95
  245. package/src/node/targets/wx/dev-server/update-server-state.ts +0 -183
  246. package/src/node/targets/wx/dev-server/update-transport.ts +0 -261
  247. package/src/node/targets/wx/dev-server/vite-bundled-dev-adapter.ts +0 -203
  248. package/src/node/targets/wx/development-files.ts +0 -11
  249. package/src/node/targets/wx/plugin.ts +0 -163
  250. package/src/node/targets/wx/react-refresh.ts +0 -51
  251. package/src/node/targets/wx/virtual-modules.ts +0 -152
  252. package/src/node/utils/async.ts +0 -19
  253. package/src/node/utils/filesystem.ts +0 -45
  254. package/src/runtime/taro/api.ts +0 -13
  255. package/src/runtime/taro/components.ts +0 -2
  256. package/src/runtime/wx/page-update.ts +0 -230
  257. package/src/runtime/wx/react-refresh.d.ts +0 -20
  258. package/src/runtime/wx/taro-runtime.ts +0 -7
  259. package/src/runtime/wx/update-client-state.ts +0 -138
  260. package/src/runtime/wx/update-client.ts +0 -222
package/README.en.md ADDED
@@ -0,0 +1,44 @@
1
+ # vite-plugin-taro
2
+
3
+ [![npm version](https://img.shields.io/npm/v/vite-plugin-taro.svg)](https://www.npmjs.com/package/vite-plugin-taro)
4
+ ![Vite compatibility](https://registry.vite.dev/api/badges?package=vite-plugin-taro&tool=vite)
5
+ [![license](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
6
+
7
+ [简体中文](README.md) | English
8
+
9
+ Build WeChat Mini Program and Web apps with Vite 8, React 19, Taro 4, and Tailwind CSS v4.
10
+
11
+ Documentation website: <https://vite-plugin-taro.netlify.app>
12
+
13
+ ### React Hot Reload in WeChat DevTools
14
+
15
+ <video src="https://github.com/user-attachments/assets/cd4e6d97-6bc7-40e0-9ba9-206c9fe369f1" controls autoplay muted loop playsinline width="100%"></video>
16
+
17
+ - **Vite 8 + React 19** Build one codebase for WeChat Mini Program and Web with the Vite ecosystem.
18
+ - **Hot reload** Preserve App data, the active page, React component state, and input state while editing.
19
+ - **Automatic subpackages** Use standard static and dynamic imports while vpt plans WeChat packages automatically.
20
+ - **Tailwind CSS v4 ready** Write utility classes directly; WeChat and Web styles adapt automatically.
21
+ - **Built on Taro, beyond Taro** Use Taro components and APIs without the old webpack pipeline.
22
+ - **Skyline ready** Use WeChat Skyline rendering globally or per page.
23
+
24
+ ## Create an app
25
+
26
+ ```sh
27
+ npm create vite-taro@latest my-app
28
+ ```
29
+
30
+ Continue with the [Quick Start guide](https://vite-plugin-taro.netlify.app/guides/quick-start/).
31
+
32
+ ## Documentation
33
+
34
+ - [Automatic subpackages](https://vite-plugin-taro.netlify.app/guides/automatic-subpackages/)
35
+ - [Native WeChat components](https://vite-plugin-taro.netlify.app/guides/native-components/)
36
+ - [Hot module replacement](https://vite-plugin-taro.netlify.app/guides/hot-module-replacement/)
37
+ - [Skyline mode](https://vite-plugin-taro.netlify.app/guides/skyline-mode/)
38
+ - [Migrate from Taro CLI](https://vite-plugin-taro.netlify.app/guides/migrate-from-taro/)
39
+ - [Configuration reference](https://vite-plugin-taro.netlify.app/references/configuration/)
40
+ - [Repository management](https://vite-plugin-taro.netlify.app/references/repository-management/)
41
+
42
+ ## License
43
+
44
+ MIT
package/README.md CHANGED
@@ -4,516 +4,41 @@
4
4
  ![Vite compatibility](https://registry.vite.dev/api/badges?package=vite-plugin-taro&tool=vite)
5
5
  [![license](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
6
6
 
7
- [简体中文](README.zh.md) | English
7
+ 简体中文 | [English](README.en.md)
8
8
 
9
- Build WeChat Mini Program and Web apps with the latest standards-based frontend stack: Vite 8, React 19, Taro 4, and Tailwind CSS v4.
9
+ 使用 Vite 8React 19Taro 4 Tailwind CSS v4 构建微信小程序与 Web 应用。
10
10
 
11
- `vite-plugin-taro` is for teams building Taro React apps with Vite: keep Taro's cross-platform components and APIs, leave Taro webpack behind, and fix/avoid common official Taro Vite pitfalls. One plugin builds WeChat Mini Program and Web.
11
+ 文档网站:<https://vite-plugin-taro.netlify.app>
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.md) for how to run it locally.
13
+ ### 已支持微信开发者工具的 React 热更新
14
14
 
15
- - **Vite 8 + React 19** Build one codebase for WeChat Mini Program and Web with the Vite ecosystem.
16
- - **Hot reload** Re-engineered on Vite with seamless WeChat Mini Program support, so page edits no longer lose state.
17
- - **Tailwind CSS v4 ready** Write utility classes directly; WeChat and Web styles adapt automatically.
18
- - **Built on Taro, beyond Taro** Use Taro components and APIs while leaving the old webpack pipeline behind.
19
- - **Skyline ready** Support WeChat Skyline rendering mode perfectly.
20
- - **Conditional compilation** Split code and styles with Taro-style `#ifdef` / `#ifndef` blocks.
21
- - **Workspace friendly** Supports standalone apps and monorepos, compatible with `npm`, `pnpm`, `Yarn`, and `Bun`.
22
- - **TypeScript friendly** Type support from config to app code.
15
+ <video src="https://github.com/user-attachments/assets/cd4e6d97-6bc7-40e0-9ba9-206c9fe369f1" controls autoplay muted loop playsinline width="100%"></video>
23
16
 
24
- ## Quick start
17
+ - **Vite 8 + React 19** 基于 Vite 生态,一份代码覆盖微信小程序与 Web。
18
+ - **热更新** 编辑代码时保留 App 数据、当前页面、React 组件状态与输入状态。
19
+ - **全自动分包** 使用标准静态与动态导入,由 vpt 自动规划微信小程序分包。
20
+ - **Tailwind CSS v4 开箱即用** 直接书写工具类,微信与 Web 样式自动适配。
21
+ - **基于 Taro,超越 Taro** 使用 Taro 组件和 API,摆脱旧式 webpack 链路。
22
+ - **Skyline 就绪** 支持全局或按页面启用微信 Skyline 渲染模式。
25
23
 
26
- Use `create-vite-taro` for new apps. It scaffolds a Vite 8 + React 19 + Tailwind CSS v4 + Taro 4 project.
27
-
28
- ### 1. Create and install
24
+ ## 创建应用
29
25
 
30
26
  ```sh
31
- # Create a new app from the default template
32
27
  npm create vite-taro@latest my-app
33
-
34
- # Or create with pnpm
35
- pnpm --config.minimum-release-age=0 create vite-taro@latest my-app
36
-
37
- # Enter the project and install dependencies
38
- cd my-app
39
- npm install
40
- ```
41
-
42
- ### 2. Configure WeChat Mini Program App ID
43
-
44
- The template creates `.env.local`. Set `VITE_PLUGIN_TARO_WECHAT_APP_ID` to your WeChat Mini Program App ID.
45
-
46
- ### 3. Run in development
47
-
48
- ```sh
49
- # WeChat Mini Program: start Vite with hot reload
50
- npm run dev:wx
51
-
52
- # Then open dist/wx in WeChat DevTools
53
-
54
- # H5: start the Vite dev server
55
- npm run dev:h5
56
-
57
- # Then open the standard Vite dev URL in your browser
58
- # http://localhost:5173
59
- ```
60
-
61
- You can keep `npm run dev:wx` and `npm run dev:h5` running at the same time in separate terminals.
62
-
63
- WX development provides full Vite-powered hot reload through Rolldown's incremental module graph and React Refresh. JavaScript edits preserve the active native page and React/input state; CSS, assets, public files, and configuration changes are rebuilt automatically.
64
-
65
- ### 4. Build, preview, and typecheck
66
-
67
- ```sh
68
- # Production WeChat Mini Program output
69
- npm run build:wx
70
-
71
- # Production H5 output
72
- npm run build:h5
73
-
74
- # Preview the built H5 app
75
- npm run preview:h5
76
-
77
- # Typecheck with tsc
78
- npm run typecheck
79
- ```
80
-
81
- ### 5. Use Taro virtual modules
82
-
83
- Use these imports in app code:
84
-
85
- ```tsx
86
- import Taro from 'virtual:taro/api'
87
- import { Text, View } from 'virtual:taro/components'
88
- ```
89
-
90
- | Import | Use |
91
- | --- | --- |
92
- | `virtual:taro/components` | Taro React components such as `View`, `Text`, `Button`, `Image`, and `ScrollView`. |
93
- | `virtual:taro/api` | Taro APIs and hooks such as `Taro.navigateTo`, `Taro.getWindowInfo`, and `Taro.useLaunch`. |
94
-
95
- Usage is the same as Taro itself; see the [Taro website](https://docs.taro.zone) for component and API details.
96
-
97
- You no longer need to install `@tarojs/*` packages; application code should not import from `@tarojs/*`.
98
-
99
- ## Manual setup for existing apps
100
-
101
- For existing apps or custom project layouts, follow the steps below to wire the plugin manually. First, install the plugin:
102
-
103
- ```sh
104
- npm install -D vite-plugin-taro
105
- ```
106
-
107
- Your app must also provide Vite 8, React 19, React DOM 19, TypeScript 7, and Node/React type packages. If your app does not already have them, install the missing packages:
108
-
109
- ```sh
110
- npm install react react-dom
111
- npm install -D vite typescript@rc @types/node @types/react @types/react-dom cross-env
112
- ```
113
-
114
- Remove all `@tarojs/*` packages from `dependencies` and `devDependencies`.
115
-
116
- The steps below create this source shape:
117
-
118
- ```text
119
- my-app/
120
- ├── index.html
121
- ├── package.json
122
- ├── tsconfig.json
123
- ├── vite.config.ts
124
- └── src/
125
- ├── app.css
126
- ├── app.ts
127
- └── pages/
128
- └── index/
129
- └── index.tsx
130
- ```
131
-
132
- You can also see a sample layout at [packages/loan-genius](https://github.com/sep2/vite-plugin-taro/tree/main/packages/loan-genius).
133
-
134
- ### 1. Add TypeScript declarations
135
-
136
- Add the plugin client types to `tsconfig.json` so TypeScript knows about the virtual modules:
137
-
138
- ```json
139
- {
140
- "compilerOptions": {
141
- "jsx": "react-jsx",
142
- "moduleResolution": "bundler",
143
- "types": ["vite/client", "vite-plugin-taro/client"]
144
- },
145
- "include": ["src"]
146
- }
147
- ```
148
-
149
- ### 2. Configure Vite
150
-
151
- Create `vite.config.ts` and choose the plugin target from an environment variable:
152
-
153
- ```ts
154
- import { defineConfig, loadEnv } from 'vite'
155
- import vitePluginTaro, { type VitePluginTaroTarget } from 'vite-plugin-taro'
156
-
157
- const targetEnvName = 'VITE_PLUGIN_TARO_TARGET'
158
-
159
- function getTarget(env: Record<string, string>): VitePluginTaroTarget {
160
- const target = env[targetEnvName]
161
- if (target === 'wx' || target === 'h5') return target
162
- throw new Error(`${targetEnvName} must be "wx" or "h5".`)
163
- }
164
-
165
- export default defineConfig(({ mode }) => {
166
- const env = loadEnv(mode, process.cwd(), 'VITE_PLUGIN_TARO_')
167
- const target = getTarget(env)
168
-
169
- return {
170
- build: {
171
- outDir: `dist/${target}`
172
- },
173
- plugins: [
174
- vitePluginTaro({
175
- target,
176
- app: 'src/app.ts',
177
- pages: [{ path: 'pages/index/index', config: { navigationBarTitleText: 'Home' } }],
178
- appJson: {
179
- window: { navigationBarTitleText: 'Demo' }
180
- },
181
- projectConfigJson: {
182
- appid: env.VITE_PLUGIN_TARO_WECHAT_APP_ID || 'touristappid',
183
- projectname: 'demo',
184
- compileType: 'miniprogram'
185
- },
186
- sitemapJson: {
187
- rules: [{ action: 'allow', page: '*' }]
188
- }
189
- })
190
- ]
191
- }
192
- })
193
- ```
194
-
195
- Important conventions:
196
-
197
- - `target` must be `wx` or `h5` for each Vite run.
198
- - `app` is the root React app component module. It should default-export the app component.
199
- - Every `pages[].path` maps to a file at `src/${path}.tsx`. For example, `pages/index/index` requires `src/pages/index/index.tsx`.
200
- - `appJson.pages` is generated from `pages`; any `pages` field you put in `appJson` is overwritten.
201
- - If your app uses Skyline, add the related `appJson` and `projectConfigJson` settings.
202
- - 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.
203
-
204
- ### 3. Create the app component
205
-
206
- `src/app.ts` is the shared application wrapper. It receives the current page as `children`.
207
-
208
- ```tsx
209
- import type { PropsWithChildren } from 'react'
210
- import './app.css'
211
-
212
- export default function App({ children }: PropsWithChildren) {
213
- return children
214
- }
215
- ```
216
-
217
- Import global styles from the app component. The next step creates `src/app.css`.
218
-
219
- ### 4. Create global styles
220
-
221
- `src/app.css` can use plain CSS, component CSS modules, and Tailwind CSS v4. The plugin injects Taro H5 component styles automatically; the default global stylesheet enables Tailwind CSS v4 for both targets:
222
-
223
- ```css
224
- @import "tailwindcss/theme.css";
225
- @import "tailwindcss/preflight.css";
226
- @import "tailwindcss/utilities.css";
227
-
228
- @source "./";
229
- ```
230
-
231
- Keep `@source "./";` so Tailwind scans your source tree.
232
-
233
- ### 5. Create a page component
234
-
235
- `src/pages/index/index.tsx` is the React component for `pages/index/index`.
236
-
237
- ```tsx
238
- import { Text, View } from 'virtual:taro/components'
239
-
240
- export default function IndexPage() {
241
- return (
242
- <View className="p-4">
243
- <Text>Hello Taro</Text>
244
- </View>
245
- )
246
- }
247
- ```
248
-
249
- ### 6. Add the H5 HTML shell
250
-
251
- 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.
252
-
253
- ```html
254
- <div id="app"></div>
255
- ```
256
-
257
- ### 7. Add scripts
258
-
259
- Use the same scripts generated by `create-vite-taro`:
260
-
261
- ```json
262
- {
263
- "scripts": {
264
- "dev:wx": "cross-env NODE_ENV=development VITE_PLUGIN_TARO_TARGET=wx vite",
265
- "dev:h5": "cross-env NODE_ENV=development VITE_PLUGIN_TARO_TARGET=h5 vite",
266
- "build:wx": "cross-env NODE_ENV=production VITE_PLUGIN_TARO_TARGET=wx vite build",
267
- "build:h5": "cross-env NODE_ENV=production VITE_PLUGIN_TARO_TARGET=h5 vite build",
268
- "preview:h5": "cross-env NODE_ENV=production VITE_PLUGIN_TARO_TARGET=h5 vite preview --outDir dist/h5",
269
- "typecheck": "tsc -b"
270
- }
271
- }
272
- ```
273
-
274
- ### 8. Run each target
275
-
276
- ```sh
277
- npm run dev:wx # Start WX development with hot reload
278
- npm run dev:h5 # Start the H5 dev server
279
- npm run build:wx # Build dist/wx
280
- npm run build:h5 # Build dist/h5
281
- npm run preview:h5 # Preview dist/h5
282
- npm run typecheck # Typecheck with tsc
283
- ```
284
-
285
- Open the generated `dist/wx` directory in WeChat DevTools.
286
-
287
- WX development completes an eager build of the App and every configured page before Vite reports ready. JavaScript and TypeScript component edits use React Refresh and preserve compatible React state, the current Taro page, and native input state. Module-local state resets on each code update. Changes to CSS, assets, or app configuration intentionally perform a complete rebuild and DevTools reload. The generated development project enables WeChat's `compileHotReLoad` setting automatically.
288
-
289
- | Target | Meaning | Output dir |
290
- | --- | --- | --- |
291
- | `wx` | WeChat Mini Program in both dev/prod mode. | `dist/wx` |
292
- | `h5` | H5 production output. | `dist/h5` |
293
-
294
- ## Options
295
-
296
- ```ts
297
- type VitePluginTaroTarget = 'wx' | 'h5'
298
-
299
- type VitePluginTaroPageOption = {
300
- path: string
301
- config: Record<string, unknown>
302
- }
303
-
304
- type VitePluginTaroOptions = {
305
- target: VitePluginTaroTarget
306
- app: string
307
- pages: VitePluginTaroPageOption[]
308
- appJson: Record<string, unknown>
309
- projectConfigJson: Record<string, unknown>
310
- sitemapJson: Record<string, unknown>
311
- }
312
- ```
313
-
314
- | Option | Description |
315
- | --- | --- |
316
- | `target` | Active target for this Vite invocation. Use `wx` for WeChat Mini Program and `h5` for Web. |
317
- | `app` | Source file that default-exports the root React app component, for example `src/app.ts` or `src/app.tsx`. |
318
- | `pages` | Ordered page list. The order becomes `app.json.pages` and the Web route order. |
319
- | `pages[].path` | Taro-style route and output path without extension, for example `pages/index/index`. The page component must exist at `src/${path}.tsx`. |
320
- | `pages[].config` | Page config merged into the generated WeChat page JSON and Web route config. |
321
- | `appJson` | Base app config shared by both targets. The plugin overwrites the `pages` field from `options.pages`. |
322
- | `projectConfigJson` | WeChat `project.config.json` content emitted for `wx` builds. It is required by the option type even when the current target is `h5`. |
323
- | `sitemapJson` | WeChat `sitemap.json` content emitted for `wx` builds. It is required by the option type even when the current target is `h5`. |
324
-
325
- ## Conditional compilation
326
-
327
- 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`.
328
-
329
- ```ts
330
- // #ifdef wx
331
- console.log('WeChat only')
332
- // #endif
333
-
334
- // #ifdef h5
335
- console.log('H5 only')
336
- // #endif
337
-
338
- // #ifndef h5
339
- console.log('Not H5')
340
- // #else
341
- console.log('H5 fallback')
342
- // #endif
343
- ```
344
-
345
- Supported directives are `#ifdef`, `#ifndef`, `#else`, and `#endif`. Conditions use the plugin target tokens `wx` and `h5`.
346
-
347
- ## Output by target
348
-
349
- ### WeChat Mini Program
350
-
351
- For `target: 'wx'`, the plugin configures Vite to emit WeChat-compatible CommonJS chunks and Mini Program companion files.
352
-
353
- Typical output:
354
-
355
- ```text
356
- dist/wx/
357
- ├── app.js
358
- ├── app.json
359
- ├── app.wxss
360
- ├── base.wxml
361
- ├── comp.js
362
- ├── comp.json
363
- ├── comp.wxml
364
- ├── project.config.json
365
- ├── sitemap.json
366
- ├── utils.wxs
367
- └── pages/**
368
- ```
369
-
370
- Open `dist/wx` with WeChat DevTools; do not open the source project directory.
371
-
372
- ### H5 / Web
373
-
374
- For `target: 'h5'`, the plugin injects a generated module into `index.html`, imports Taro H5 component styles before the app, 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`.
375
-
376
- ## Migrating from Taro
377
-
378
- You can keep most React page components, business logic, assets, and styles, but the build entry moves from Taro CLI config to Vite config.
379
-
380
- Migration checklist:
381
-
382
- 1. Install `vite-plugin-taro` and create `vite.config.ts` with `vitePluginTaro(...)`.
383
- 2. Move app config and page config into `vite.config.ts`. The plugin does not read Taro files such as `config/index.ts`, `app.config.ts`, or page `config.ts`.
384
- 3. Register every page in `pages`. Each page path must match `src/${path}.tsx`.
385
- 4. Replace Taro scripts with Vite scripts that set `VITE_PLUGIN_TARO_TARGET=wx` or `VITE_PLUGIN_TARO_TARGET=h5`.
386
- 5. For H5, add a normal Vite `index.html` with `<div id="app"></div>` and no separate `src/main.tsx` entry.
387
- 6. Move global styles to `src/app.css`, keep `import './app.css'` in the app entry, and add the Taro/Tailwind imports shown below.
388
- 7. Remove all `@tarojs/*` packages from `dependencies` and `devDependencies`.
389
- 8. Replace application imports from `@tarojs/*` with the plugin virtual modules.
390
-
391
- Before:
392
-
393
- ```tsx
394
- import Taro from '@tarojs/taro'
395
- import { Text, View } from '@tarojs/components'
396
28
  ```
397
29
 
398
- After:
30
+ 接下来阅读[快速开始](https://vite-plugin-taro.netlify.app/guides/quick-start/)。
399
31
 
400
- ```tsx
401
- import Taro from 'virtual:taro/api'
402
- import { Text, View } from 'virtual:taro/components'
403
- ```
404
-
405
- Style migration:
406
-
407
- ```css
408
- @import "tailwindcss/theme.css";
409
- @import "tailwindcss/preflight.css";
410
- @import "tailwindcss/utilities.css";
411
-
412
- @source "./";
413
- ```
414
-
415
- Remove all `@tarojs/*` packages and do not import them directly in application code. Let the plugin own Taro runtime resolution.
416
-
417
- ## Sample app
418
-
419
- 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.
420
-
421
- ```sh
422
- git clone https://github.com/sep2/vite-plugin-taro.git
423
-
424
- # Install dependencies
425
- pnpm install
426
-
427
- # Run once, it generates the patched Taro packages
428
- pnpm prepare:taro
429
-
430
- # Build the plugin for sample app to use
431
- pnpm build:plugin
432
-
433
- # Run the sample app in WeChat
434
- pnpm dev:loan-genius:wx
435
-
436
- # Build the sample app to WeChat output
437
- pnpm build:loan-genius:wx
438
-
439
- # Run the sample app in H5 dev mode
440
- pnpm dev:loan-genius:h5
441
-
442
- # Build the sample app to H5 output and preview it
443
- pnpm build:loan-genius:h5
444
- pnpm preview:loan-genius:h5
445
- ```
446
-
447
- Open `packages/loan-genius/dist/wx` with WeChat DevTools to test the Mini Program output.
448
-
449
- ## Develop this repository
450
-
451
- ```sh
452
- pnpm install
453
- pnpm prepare:taro
454
- pnpm build:plugin
455
- pnpm typecheck
456
- ```
457
-
458
- Common scripts:
459
-
460
- | Script | Description |
461
- | --- | --- |
462
- | `pnpm prepare:taro` | Regenerate the patched React 19 Taro packages from upstream npm tarballs and local patch files. |
463
- | `pnpm build:plugin` | Build `packages/vite-plugin-taro` into `dist`. |
464
- | `pnpm typecheck` | Typecheck the plugin and sample app with `tsc`. |
465
- | `pnpm lint` | Run Biome checks. |
466
- | `pnpm format` | Apply Biome formatting. |
467
- | `pnpm dev:loan-genius:wx` | Start the WeChat Mini Program sample with hot reload. Build the plugin first. |
468
- | `pnpm dev:loan-genius:h5` | Start the H5 sample app in Vite dev mode. Build the plugin first. |
469
- | `pnpm build:loan-genius:wx` | Build the WeChat Mini Program sample to `packages/loan-genius/dist/wx`. |
470
- | `pnpm build:loan-genius:h5` | Build the H5 sample app to `packages/loan-genius/dist/h5`. |
471
- | `pnpm preview:loan-genius:h5` | Preview the built H5 sample. |
472
- | `pnpm changelog` | Regenerate `CHANGELOG.md` from git release tags. |
473
- | `pnpm publish:dry` | Dry-run package validation and publishing. |
474
- | `pnpm release <version\|bump>` | Validate, bump versions, update the changelog, create the release commit and tag, and push to trigger CI publishing. |
475
- | `pnpm publish:all` | Publish the public packages in dependency order; mainly used by the tag-based Trusted Publishing workflow. |
476
-
477
- ## Limitations
478
-
479
- - Only React apps are supported today.
480
- - Only `wx` and `h5` targets are generated today.
481
- - Application code must not import `@tarojs/*` packages directly.
482
-
483
- ## Troubleshooting
484
-
485
- | Problem | Check |
486
- | --- | --- |
487
- | `VITE_PLUGIN_TARO_TARGET must be "wx" or "h5"` | Set the target environment variable in your script or `.env` file. |
488
- | `pnpm install` says dependency build scripts were ignored | Run `pnpm approve-builds` and approve the requested dependency build scripts. |
489
- | A page cannot be resolved | Confirm that `pages[].path` has a matching `src/${path}.tsx` file. |
490
- | WeChat DevTools cannot open the app | Open the generated `dist/wx` folder and check `projectConfigJson.appid`. |
491
- | 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. |
492
- | Taro APIs are missing or behave differently | Remove direct `@tarojs/*` imports from application code and import Taro from `virtual:taro/api`. |
493
- | Components render without expected styles on H5 | Ensure the app entry imports `./app.css` and the generated H5 entry is injected into `index.html`. |
494
- | Tailwind classes do not appear | Ensure `src/app.css` imports Tailwind's CSS files, keeps `@source "./";`, and class names are statically discoverable. Restart the dev server after moving files. |
495
-
496
- ## Release workflow
497
-
498
- 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`.
499
-
500
- Create a release:
501
-
502
- ```sh
503
- pnpm release patch
504
- ```
505
-
506
- `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:
507
-
508
- ```sh
509
- pnpm release 0.2.0
510
- pnpm release prerelease --preid beta
511
- pnpm release patch --dry-run
512
- pnpm release patch --no-push
513
- ```
32
+ ## 文档
514
33
 
515
- 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`.
34
+ - [全自动分包](https://vite-plugin-taro.netlify.app/guides/automatic-subpackages/)
35
+ - [微信原生组件](https://vite-plugin-taro.netlify.app/guides/native-components/)
36
+ - [开发者工具热更新](https://vite-plugin-taro.netlify.app/guides/hot-module-replacement/)
37
+ - [Skyline 模式](https://vite-plugin-taro.netlify.app/guides/skyline-mode/)
38
+ - [从 Taro CLI 迁移](https://vite-plugin-taro.netlify.app/guides/migrate-from-taro/)
39
+ - [配置参考](https://vite-plugin-taro.netlify.app/references/configuration/)
40
+ - [仓库维护](https://vite-plugin-taro.netlify.app/references/repository-management/)
516
41
 
517
- ## License
42
+ ## 许可证
518
43
 
519
44
  MIT
package/client.d.ts CHANGED
@@ -7,3 +7,12 @@ declare module 'virtual:taro/api' {
7
7
  declare module 'virtual:taro/components' {
8
8
  export * from '@tarojs/components'
9
9
  }
10
+
11
+ declare module 'virtual:taro/native' {
12
+ type NativeModule = typeof import('./src/runtime/client/taro/define-native-component.ts')
13
+
14
+ export type NativeComponentEvent<Detail> =
15
+ import('./src/runtime/client/taro/define-native-component.ts').NativeComponentEvent<Detail>
16
+
17
+ export const defineNativeComponent: NativeModule['defineNativeComponent']
18
+ }
@@ -0,0 +1,4 @@
1
+ import type { Plugin } from 'vite';
2
+ export declare const clientTaroApiId = "virtual:taro/api";
3
+ /** Creates the target-neutral Taro facade plugin. */
4
+ export declare function createClientTaroPlugin(): Plugin;
@@ -0,0 +1,19 @@
1
+ import { resolvePackageFile } from '../../utils/packages.js';
2
+ import { clientTaroNativeId } from './constant.js';
3
+ export const clientTaroApiId = 'virtual:taro/api';
4
+ const clientTaroComponentId = 'virtual:taro/components';
5
+ const clientTaroModules = new Map([
6
+ [clientTaroApiId, resolvePackageFile('dist/runtime/client/taro/api.js')],
7
+ [clientTaroComponentId, resolvePackageFile('dist/runtime/client/taro/component.js')],
8
+ [clientTaroNativeId, resolvePackageFile('dist/runtime/client/taro/define-native-component.js')]
9
+ ]);
10
+ /** Creates the target-neutral Taro facade plugin. */
11
+ export function createClientTaroPlugin() {
12
+ return {
13
+ name: 'vpt:client-taro',
14
+ enforce: 'pre',
15
+ resolveId(id) {
16
+ return clientTaroModules.get(id);
17
+ }
18
+ };
19
+ }
@@ -0,0 +1,4 @@
1
+ /** Maps runtime App imports to the configured application component. */
2
+ export declare const appComponentId = "\0vpt:app-component";
3
+ /** Exposes compile-time native component JSX interfaces to application modules. */
4
+ export declare const clientTaroNativeId = "virtual:taro/native";
@@ -0,0 +1,4 @@
1
+ /** Maps runtime App imports to the configured application component. */
2
+ export const appComponentId = '\0vpt:app-component';
3
+ /** Exposes compile-time native component JSX interfaces to application modules. */
4
+ export const clientTaroNativeId = 'virtual:taro/native';
@@ -0,0 +1,4 @@
1
+ import type { Plugin } from 'vite';
2
+ import type { VitePluginTaroTarget } from '../../../options.ts';
3
+ /** Creates source-level target conditional handling shared by H5 and WX. */
4
+ export declare function createConditionalDirectivePlugin(target: VitePluginTaroTarget): Plugin;