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