vite-plugin-taro 0.1.3 → 0.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/README.en.md +25 -17
  2. package/README.md +25 -17
  3. package/package.json +3 -3
package/README.en.md CHANGED
@@ -7,22 +7,22 @@
7
7
 
8
8
  Build WeChat Mini Apps with the latest standards-based frontend stack: Vite 8, React 19, and Tailwind CSS v4.
9
9
 
10
- `vite-plugin-taro` is for applications that want Taro's cross-platform React components and APIs, but prefer Vite instead of Taro webpack. The plugin generates app/page entries, target runtime aliases, WeChat companion files, H5 router bootstrap, Tailwind processing, and conditional compilation for you.
10
+ `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.
11
11
 
12
12
  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.en.md) how to run it locally.
13
13
 
14
- - **One codebase, two targets** Build WeChat Mini Program and H5 outputs from shared React/Taro pages.
15
14
  - **Native Vite builds** Use standard Vite 8 config instead of legacy webpack configuration, with support for all Vite plugins.
16
15
  - **Hot reload** Both WeChat Mini Program and H5 support dev-mode watch, with Vite 8 HMR/rebuilds for fast feedback.
17
16
  - **Battle-tested Taro foundation** Use the full set of Taro APIs and components instead of reinventing cross-platform primitives.
18
17
  - **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 `wx` / `h5` target.
20
- - **Type-friendly** Import Taro capabilities consistently through `virtual:taro/api` and `virtual:taro/components`, with TypeScript type support.
18
+ - **Conditional compilation** Use Taro-style `#ifdef` / `#ifndef` / `#if` blocks to split code and styles by WeChat / web target.
19
+ - **Workspace friendly** Supports standalone apps and monorepos, with npm, pnpm, Yarn, Bun, and other package managers.
20
+ - **Type-friendly** The project supports TypeScript all the way.
21
21
  - **WeChat Skyline** Support WeChat Mini Program output with Skyline rendering mode.
22
22
 
23
23
  ## Quick start
24
24
 
25
- Use `create-vite-taro` for new apps. It generates a Vite 8 + React 19 + Taro project with WeChat Mini Program and H5 scripts already wired.
25
+ Use `create-vite-taro` for new apps. It scaffolds a Vite 8 + React 19 + Tailwind CSS v4 + Taro 4 project.
26
26
 
27
27
  ### 1. Create and install
28
28
 
@@ -35,9 +35,9 @@ cd my-app
35
35
  npm install
36
36
  ```
37
37
 
38
- ### 2. Configure WeChat App ID
38
+ ### 2. Configure WeChat Mini Program App ID
39
39
 
40
- The template creates `.env.local`. Set `VITE_PLUGIN_TARO_WECHAT_APP_ID` to your WeChat App ID.
40
+ The template creates `.env.local`. Set `VITE_PLUGIN_TARO_WECHAT_APP_ID` to your WeChat Mini Program App ID.
41
41
 
42
42
  ### 3. Run in development
43
43
 
@@ -74,7 +74,24 @@ npm run preview:h5
74
74
  npm run typecheck
75
75
  ```
76
76
 
77
- For existing apps or custom project layouts, follow the manual setup below.
77
+ ### 5. Use Taro virtual modules
78
+
79
+ Use these imports in app code:
80
+
81
+ ```tsx
82
+ import Taro from 'virtual:taro/api'
83
+ import { Text, View } from 'virtual:taro/components'
84
+ ```
85
+
86
+ | Import | Use |
87
+ | --- | --- |
88
+ | `virtual:taro/components` | Taro React components such as `View`, `Text`, `Button`, `Image`, and `ScrollView`. |
89
+ | `virtual:taro/api` | Taro APIs and hooks such as `Taro.navigateTo`, `Taro.getWindowInfo`, and `Taro.useLaunch`. |
90
+
91
+ Usage is the same as Taro itself; see the [Taro website](https://docs.taro.zone) for component and API details.
92
+
93
+ You no longer need to install `@tarojs/*` packages; application code should not import from `@tarojs/*`.
94
+
78
95
 
79
96
  ## Manual setup for existing apps
80
97
 
@@ -238,15 +255,6 @@ export default function IndexPage() {
238
255
  }
239
256
  ```
240
257
 
241
- Use these imports in app code:
242
-
243
- | Import | Use |
244
- | --- | --- |
245
- | `virtual:taro/components` | Taro React components such as `View`, `Text`, `Button`, `Image`, and `ScrollView`. |
246
- | `virtual:taro/api` | Taro APIs and hooks such as `Taro.navigateTo`, `Taro.getWindowInfo`, and `Taro.useLaunch`. |
247
-
248
- Do not import `@tarojs/*` packages directly in application code. Direct `@tarojs/*` usage is forbidden and unsupported by this plugin because it can bypass target-specific runtime aliases and H5 API transforms. Use `virtual:taro/api` and `virtual:taro/components` only.
249
-
250
258
  ### 5. Add the H5 HTML shell
251
259
 
252
260
  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.
package/README.md CHANGED
@@ -7,22 +7,22 @@
7
7
 
8
8
  使用最新标准化前端技术栈 Vite 8、React 19 和 Tailwind CSS v4 构建微信小程序。
9
9
 
10
- `vite-plugin-taro` 适用于希望使用 Taro 跨平台 React 组件和 API，但更偏好 Vite 而非 Taro webpack 的应用。插件会为你生成应用/页面入口、目标运行时别名、微信端配套文件、H5 路由启动代码、Tailwind 处理，以及条件编译。
10
+ `vite-plugin-taro` 适用于希望使用 Taro 跨平台 React 组件和 API，但更偏好 Vite 而非 Taro webpack 的应用。你只需要这个插件，就能构建完整的微信小程序。
11
11
 
12
12
  在线演示：<https://sep2.github.io/vite-plugin-taro>。如何在本地运行，请参见[示例应用](https://github.com/sep2/vite-plugin-taro/tree/main/packages/loan-genius/README.md)。
13
13
 
14
- - **一套代码，双端输出** 同一套 React/Taro 页面构建微信小程序与 H5。
15
14
  - **原生 Vite 构建** 使用标准 Vite 8 配置，无需维护老旧的 webpack 配置，并支持所有 Vite 插件。
16
15
  - **热更新** 微信小程序与 H5 都支持开发模式 watch，基于 Vite 8 热更新/快速重建即时预览。
17
16
  - **依托成熟 Taro 能力** 复用久经实战检验的 Taro API 和组件，完整使用 Taro 跨端能力。
18
17
  - **Tailwind 就绪** 内置 Tailwind CSS v4 支持，微信小程序与 H5 样式开箱即用。
19
- - **条件编译** 支持 Taro 风格 `#ifdef` / `#ifndef` / `#if`，可按 `wx` / `h5` 裁剪代码和样式。
20
- - **类型友好** 通过 `virtual:taro/api` 和 `virtual:taro/components` 统一导入 Taro 能力，并提供 TypeScript 类型支持。
18
+ - **条件编译** 支持 Taro 风格 `#ifdef` / `#ifndef` / `#if`，可按微信 / Web 裁剪代码和样式。
19
+ - **工作区友好** 支持普通项目与 monorepo，兼容 npm、pnpm、Yarn、Bun 等包管理器。
20
+ - **类型友好** 项目全链路支持 TypeScript。
21
21
  - **微信 Skyline** 支持微信小程序 Skyline 渲染模式输出。
22
22
 
23
23
  ## 快速开始
24
24
 
25
- 新应用推荐使用 `create-vite-taro`。它会生成已接好微信小程序与 H5 脚本的 Vite 8 + React 19 + Taro 项目。
25
+ 新应用推荐使用 `create-vite-taro`。它会生成 Vite 8 + React 19 + Tailwind CSS v4 + Taro 4 项目。
26
26
 
27
27
  ### 1. 创建并安装
28
28
 
@@ -35,9 +35,9 @@ cd my-app
35
35
  npm install
36
36
  ```
37
37
 
38
- ### 2. 配置微信 App ID
38
+ ### 2. 配置微信小程序 App Id
39
39
 
40
- 模板会创建 `.env.local`。请将 `VITE_PLUGIN_TARO_WECHAT_APP_ID` 设置为你的微信 App ID。
40
+ 模板会创建 `.env.local`。请将 `VITE_PLUGIN_TARO_WECHAT_APP_ID` 设置为你的微信小程序 App Id。
41
41
 
42
42
  ### 3. 开发模式运行
43
43
 
@@ -74,7 +74,24 @@ npm run preview:h5
74
74
  npm run typecheck
75
75
  ```
76
76
 
77
- 已有应用或自定义项目结构，请继续阅读下面的手动接入步骤。
77
+ ### 5. 使用 Taro 虚拟模块
78
+
79
+ 应用代码请使用这些导入：
80
+
81
+ ```tsx
82
+ import Taro from 'virtual:taro/api'
83
+ import { Text, View } from 'virtual:taro/components'
84
+ ```
85
+
86
+ | 导入 | 用途 |
87
+ | --- | --- |
88
+ | `virtual:taro/components` | Taro React 组件，例如 `View`、`Text`、`Button`、`Image` 和 `ScrollView`。 |
89
+ | `virtual:taro/api` | Taro API 和 hooks，例如 `Taro.navigateTo`、`Taro.getWindowInfo` 和 `Taro.useLaunch`。 |
90
+
91
+ 用法与 Taro 本身一致；组件和 API 的具体用法请参考 [Taro 官网](https://docs.taro.zone)。
92
+
93
+ 你不再需要安装 `@tarojs/*` 包；应用代码也不要从 `@tarojs/*` 导入。
94
+
78
95
 
79
96
  ## 手动接入已有应用
80
97
 
@@ -238,15 +255,6 @@ export default function IndexPage() {
238
255
  }
239
256
  ```
240
257
 
241
- 应用代码请使用这些导入：
242
-
243
- | 导入 | 用途 |
244
- | --- | --- |
245
- | `virtual:taro/components` | Taro React 组件，例如 `View`、`Text`、`Button`、`Image` 和 `ScrollView`。 |
246
- | `virtual:taro/api` | Taro API 和 hooks，例如 `Taro.navigateTo`、`Taro.getWindowInfo` 和 `Taro.useLaunch`。 |
247
-
248
- 不要在应用代码中直接导入 `@tarojs/*` 包。此插件禁止且不支持直接使用 `@tarojs/*`，因为这可能绕过目标特定的运行时别名和 H5 API 转换。请只使用 `virtual:taro/api` 和 `virtual:taro/components`。
249
-
250
258
  ### 5. 添加 H5 HTML 外壳
251
259
 
252
260
  对于 H5，请保留一个普通的 Vite `index.html`，并包含 `#app` 挂载节点。插件会自动注入生成的 Taro H5 入口，因此你不需要普通 Vite 的 `src/main.tsx` 脚本。
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vite-plugin-taro",
3
- "version": "0.1.3",
3
+ "version": "0.1.5",
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",
@@ -64,8 +64,8 @@
64
64
  "babel-plugin-transform-taroapi": "^4.2.0",
65
65
  "tailwindcss": "^4.3.1",
66
66
  "weapp-tailwindcss": "^5.0.13",
67
- "@tarojs/plugin-framework-react": "npm:vite-plugin-taro-plugin-framework-react@0.1.3",
68
- "@tarojs/react": "npm:vite-plugin-taro-react@0.1.3"
67
+ "@tarojs/plugin-framework-react": "npm:vite-plugin-taro-plugin-framework-react@0.1.5",
68
+ "@tarojs/react": "npm:vite-plugin-taro-react@0.1.5"
69
69
  },
70
70
  "peerDependencies": {
71
71
  "react": "^19.0.0",