feat(demo): 增加 Taro 原生平台构建

demo/taro-platforms.md

@@ -0,0 +1,28 @@
+# Taro demo 多端脚本说明
+
+本目录下所有 `taro-*` demo 默认继续以微信小程序和 H5 作为主要验证入口，同时补充 RN、Android、iOS 与 Harmony Hybrid 脚本，便于检查 `weapp-tailwindcss` 在 Taro 多端链路中的样式产物。
+
+## 平台脚本
+
+- `pnpm build:rn`：执行 `taro build --type rn`，生成 React Native 侧 bundle。
+- `pnpm build:android`：执行 `taro build --type rn --platform android`，用于 Android 壳工程消费。
+- `pnpm build:ios`：执行 `taro build --type rn --platform ios`，用于 iOS 壳工程消费。
+- `pnpm build:harmony`：执行 `pnpm run build:harmony-hybrid`，作为鸿蒙 Hybrid 构建的直观别名。
+- `pnpm build:harmony-hybrid`：执行 `taro build --type harmony-hybrid`，生成鸿蒙 Harmony Hybrid 的 H5 侧资源。
+- 对应的 `dev:*` 脚本会在上述构建命令后追加 `--watch`。
+
+Android 和 iOS 不是独立的 Taro 编译端，它们按 Taro 官方 RN 流程通过 `--type rn --platform android|ios` 区分 bundle。原生 APK、IPA 或鸿蒙应用包仍需在对应壳工程中使用 Android Studio、Xcode 或 DevEco Studio 完成。
+
+## demo 边界
+
+React demo 已补齐 Taro RN runner 与 RN runtime 依赖，可作为 RN、Android、iOS bundle 的主要验证入口。Vue demo 的小程序与 H5 入口继续保留 Vue 3 实现；RN 入口额外提供 `.rn.tsx` React 平台文件，因为当前 Taro RN Babel 预设只接受 React/Preact。
+
+Harmony Hybrid 是 WebView 容器方案，样式目标按 H5/Web 产物处理；RN 原生 bundle 不运行 `weapp-tailwindcss` 的样式生成入口。
+
+Taro 4.x 还提供 Harmony-CPP 原生方案，官方命令为 `taro build --type harmony_cpp`，并要求在 `config/index.ts` 中配置 `harmony.projectPath` 指向 DevEco Studio 创建的鸿蒙工程。当前 demo 只包含 Taro JS 工程，不包含鸿蒙壳工程，因此没有把 `harmony_cpp` 做成默认脚本；需要验证纯血鸿蒙时，应先补齐对应壳工程目录再接入 `@tarojs/plugin-platform-harmony-cpp`。
+
+参考文档：
+
+- https://docs.taro.zone/docs/react-native
+- https://docs.taro.zone/docs/harmony/c-api
+- https://docs.taro.zone/docs/harmony-hybrid/

demo/taro-vite-react-tailwindcss-v3/config/index.ts

@@ -4,13 +4,18 @@ import devConfig from './dev'
 import prodConfig from './prod'
 import type { Plugin } from 'vite'
 import { WeappTailwindcss } from 'weapp-tailwindcss/vite'
+
+const taroEnv = process.env.TARO_ENV
+const isWebLikeTarget = taroEnv === 'h5' || taroEnv === 'harmony' || taroEnv === 'harmony-hybrid'
+const isNativeTarget = taroEnv === 'rn' || taroEnv === 'jdrn'
+
 const generator = {
-  target: process.env.TARO_ENV === 'h5' ? 'web' : 'weapp',
+  target: isWebLikeTarget ? 'web' : 'weapp',
   styleOptions: {
     px2rpx: true,
   },
 }
-console.log(process.env.TARO_ENV)
+console.log(taroEnv)
 // https://taro-docs.jd.com/docs/next/config#defineconfig-辅助函数
 export default defineConfig<'vite'>(async (merge, { command, mode }) => {
   const baseConfig: UserConfigExport<'vite'> = {
@@ -25,9 +30,7 @@ export default defineConfig<'vite'>(async (merge, { command, mode }) => {
     },
     sourceRoot: 'src',
     outputRoot: 'dist',
-    plugins: [
-
-    ],
+    plugins: ['@tarojs/plugin-platform-harmony-hybrid'],
     defineConstants: {
     },
     copy: {
@@ -45,8 +48,7 @@ export default defineConfig<'vite'>(async (merge, { command, mode }) => {
           name: 'taro-cjs-stability',
           enforce: 'post',
           config() {
-            // Taro mini runner defaults this to true; disabling it avoids ESM
-            // modules in node_modules being forced through CommonJS transforms.
+            // Taro mini runner 默认启用该选项，关闭后可避免 node_modules 中的 ESM 模块被强制转为 CommonJS。
             return {
               build: {
                 commonjsOptions: {
@@ -60,8 +62,8 @@ export default defineConfig<'vite'>(async (merge, { command, mode }) => {
           cssSourceTrace: true,
           rem2rpx: true,
           generator,
-          // H5 也需要处理 Tailwind 入口；其他非样式目标保持禁用。
-          disabled: process.env.TARO_ENV === 'harmony' || process.env.TARO_ENV === 'rn',
+          // H5 与 Harmony Hybrid 都走 Web 样式产物；RN 原生 bundle 不处理样式入口。
+          disabled: isNativeTarget,
           injectAdditionalCssVarScope: true,
         })
       ] as Plugin[]

demo/taro-vite-react-tailwindcss-v3/index.js

@@ -0,0 +1 @@
+import '@tarojs/rn-supporter/entry-file.js'

demo/taro-vite-react-tailwindcss-v3/metro.config.js

@@ -0,0 +1,26 @@
+const path = require('node:path')
+const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config')
+const { getMetroConfig } = require('@tarojs/rn-supporter')
+
+const projectRoot = __dirname
+const workspaceRoot = path.resolve(__dirname, '../..')
+
+/**
+ * Metro 配置
+ * https://facebook.github.io/metro/docs/configuration
+ *
+ * @type {import('metro-config').MetroConfig}
+ */
+const config = {
+  projectRoot,
+  watchFolders: [workspaceRoot],
+  resolver: {
+    extraNodeModules: new Proxy({}, {
+      get: (_target, name) => path.join(projectRoot, 'node_modules', name),
+    }),
+  },
+}
+
+module.exports = (async function () {
+  return mergeConfig(getDefaultConfig(projectRoot), await getMetroConfig(), config)
+})()

demo/taro-vite-react-tailwindcss-v3/package.json

@@ -31,19 +31,25 @@
     "build:tt": "taro build --type tt",
     "build:h5": "node ../../scripts/taro-build-runner.mjs build --type h5",
     "build:rn": "taro build --type rn",
+    "build:android": "taro build --type rn --platform android",
+    "build:ios": "taro build --type rn --platform ios",
     "build:qq": "taro build --type qq",
     "build:jd": "taro build --type jd",
     "build:harmony-hybrid": "taro build --type harmony-hybrid",
+    "build:harmony": "pnpm run build:harmony-hybrid",
     "dev:weapp": "cross-env WEAPP_TW_HMR_TIMING=1 pnpm run build:weapp -- --watch",
     "dev:e2e-watch": "node ../../scripts/taro-e2e-watch.mjs",
     "dev:swan": "cross-env WEAPP_TW_HMR_TIMING=1 pnpm run build:swan -- --watch",
     "dev:alipay": "cross-env WEAPP_TW_HMR_TIMING=1 pnpm run build:alipay -- --watch",
     "dev:tt": "cross-env WEAPP_TW_HMR_TIMING=1 pnpm run build:tt -- --watch",
     "dev:h5": "cross-env WEAPP_TW_HMR_TIMING=1 pnpm run build:h5 -- --watch",
     "dev:rn": "cross-env WEAPP_TW_HMR_TIMING=1 pnpm run build:rn -- --watch",
+    "dev:android": "cross-env WEAPP_TW_HMR_TIMING=1 pnpm run build:android -- --watch",
+    "dev:ios": "cross-env WEAPP_TW_HMR_TIMING=1 pnpm run build:ios -- --watch",
     "dev:qq": "cross-env WEAPP_TW_HMR_TIMING=1 pnpm run build:qq -- --watch",
     "dev:jd": "cross-env WEAPP_TW_HMR_TIMING=1 pnpm run build:jd -- --watch",
     "dev:harmony-hybrid": "cross-env WEAPP_TW_HMR_TIMING=1 pnpm run build:harmony-hybrid -- --watch",
+    "dev:harmony": "pnpm run dev:harmony-hybrid",
     "open": "weapp open -p",
     "predev": "node ../../scripts/ensure-weapp-tailwindcss-built.mjs",
     "prebuild": "node ../../scripts/ensure-weapp-tailwindcss-built.mjs",
@@ -54,26 +60,35 @@
     "prebuild:tt": "node ../../scripts/ensure-weapp-tailwindcss-built.mjs",
     "prebuild:h5": "node ../../scripts/ensure-weapp-tailwindcss-built.mjs",
     "prebuild:rn": "node ../../scripts/ensure-weapp-tailwindcss-built.mjs",
+    "prebuild:android": "node ../../scripts/ensure-weapp-tailwindcss-built.mjs",
+    "prebuild:ios": "node ../../scripts/ensure-weapp-tailwindcss-built.mjs",
     "prebuild:qq": "node ../../scripts/ensure-weapp-tailwindcss-built.mjs",
     "prebuild:jd": "node ../../scripts/ensure-weapp-tailwindcss-built.mjs",
     "prebuild:harmony-hybrid": "node ../../scripts/ensure-weapp-tailwindcss-built.mjs",
+    "prebuild:harmony": "node ../../scripts/ensure-weapp-tailwindcss-built.mjs",
     "predev:weapp": "node ../../scripts/ensure-weapp-tailwindcss-built.mjs",
     "predev:swan": "node ../../scripts/ensure-weapp-tailwindcss-built.mjs",
     "predev:alipay": "node ../../scripts/ensure-weapp-tailwindcss-built.mjs",
     "predev:tt": "node ../../scripts/ensure-weapp-tailwindcss-built.mjs",
     "predev:h5": "node ../../scripts/ensure-weapp-tailwindcss-built.mjs",
     "predev:rn": "node ../../scripts/ensure-weapp-tailwindcss-built.mjs",
+    "predev:android": "node ../../scripts/ensure-weapp-tailwindcss-built.mjs",
+    "predev:ios": "node ../../scripts/ensure-weapp-tailwindcss-built.mjs",
     "predev:qq": "node ../../scripts/ensure-weapp-tailwindcss-built.mjs",
     "predev:jd": "node ../../scripts/ensure-weapp-tailwindcss-built.mjs",
-    "predev:harmony-hybrid": "node ../../scripts/ensure-weapp-tailwindcss-built.mjs"
+    "predev:harmony-hybrid": "node ../../scripts/ensure-weapp-tailwindcss-built.mjs",
+    "predev:harmony": "node ../../scripts/ensure-weapp-tailwindcss-built.mjs"
   },
   "browserslist": [
     "defaults",
     "maintained node versions"
   ],
   "dependencies": {
     "@babel/runtime": "catalog:babelRuntime7284",
+    "@react-native-community/slider": "catalog:reactNativeSlider442",
+    "@react-native-picker/picker": "catalog:reactNativePicker261",
     "@tarojs/components": "catalog:taro4",
+    "@tarojs/components-rn": "catalog:taro4rn",
     "@tarojs/helper": "catalog:taro4",
     "@tarojs/plugin-framework-react": "catalog:taro4",
     "@tarojs/plugin-platform-alipay": "catalog:taro4",
@@ -85,11 +100,23 @@
     "@tarojs/plugin-platform-tt": "catalog:taro4",
     "@tarojs/plugin-platform-weapp": "catalog:taro4",
     "@tarojs/react": "catalog:taro4",
+    "@tarojs/router": "catalog:taro4",
     "@tarojs/runtime": "catalog:taro4",
+    "@tarojs/runtime-rn": "catalog:taro4rn",
     "@tarojs/shared": "catalog:taro4",
     "@tarojs/taro": "catalog:taro4",
+    "@tarojs/taro-rn": "catalog:taro4rn",
+    "expo": "catalog:expo50",
     "react": "catalog:react18",
-    "react-dom": "catalog:react18"
+    "react-dom": "catalog:react18",
+    "react-native": "catalog:reactNative073",
+    "react-native-device-info": "catalog:reactNativeDeviceInfo14",
+    "react-native-gesture-handler": "catalog:reactNativeGestureHandler214",
+    "react-native-pager-view": "catalog:reactNativePagerView623",
+    "react-native-root-siblings": "catalog:reactNativeRootSiblings5",
+    "react-native-screens": "catalog:reactNativeScreens329",
+    "react-native-svg": "catalog:reactNativeSvg141",
+    "react-native-webview": "catalog:reactNativeWebview136"
   },
   "devDependencies": {
     "@babel/core": "catalog:babelCore7285",
@@ -102,7 +129,10 @@
     "@babel/preset-react": "catalog:babelPresetReact7285",
     "@babel/preset-typescript": "^7.29.7",
     "@babel/runtime-corejs3": "^7.29.7",
+    "@react-native/metro-config": "catalog:reactNativeMetroConfig073",
     "@tarojs/cli": "catalog:taro4",
+    "@tarojs/rn-runner": "catalog:taro4rn",
+    "@tarojs/rn-supporter": "catalog:taro4rn",
     "@tarojs/vite-runner": "catalog:taro4",
     "@types/react": "catalog:react18",
     "@vitejs/plugin-react": "catalog:vitePluginReact4",
@@ -117,6 +147,7 @@
     "eslint-config-taro": "catalog:taro4",
     "eslint-plugin-react": "catalog:eslintPluginReact",
     "eslint-plugin-react-hooks": "catalog:eslintPluginReactHooks",
+    "metro-react-native-babel-preset": "catalog:metroReactNativeBabelPreset077",
     "postcss": "catalog:postcss85",
     "postcss-rem-to-responsive-pixel": "catalog:postcssRem",
     "postcss-rpx-transform": "catalog:postcssRpx",

demo/taro-vite-react-tailwindcss-v3/src/app.rn.tsx

@@ -0,0 +1,7 @@
+import type { PropsWithChildren } from 'react'
+
+function App({ children }: PropsWithChildren<any>) {
+  return children
+}
+
+export default App

demo/taro-vite-react-tailwindcss-v3/src/pages/index/index.rn.tsx

@@ -0,0 +1,9 @@
+import { View, Text } from '@tarojs/components'
+
+export default function Index() {
+  return (
+    <View>
+      <Text>RN demo</Text>
+    </View>
+  )
+}

demo/taro-vite-react-tailwindcss-v3/src/pages/index/index.tsx

@@ -1,5 +1,7 @@
 import { View, Text } from '@tarojs/components'
-import './index.scss'
+if (process.env.TARO_ENV !== 'rn') {
+  require('./index.scss')
+}
 
 export default function Index() {
   return (

demo/taro-vite-react-tailwindcss-v3/src/sub-independent/pages/index.rn.tsx

@@ -0,0 +1,5 @@
+import { View } from '@tarojs/components'
+
+export default function SubPackagePage() {
+  return <View>独立分包</View>
+}

demo/taro-vite-react-tailwindcss-v3/src/sub-independent/pages/index.tsx

@@ -1,5 +1,7 @@
 import { View } from '@tarojs/components'
-import './index.scss'
+if (process.env.TARO_ENV !== 'rn') {
+  require('./index.scss')
+}
 
 export default function SubPackagePage() {
   return <View className="bg-independent-subpackage-marker before:content-['independent_subpackage_taro-vite-react-tailwindcss-v3']">独立分包</View>

demo/taro-vite-react-tailwindcss-v3/src/sub-normal/pages/index.rn.tsx

@@ -0,0 +1,5 @@
+import { View } from '@tarojs/components'
+
+export default function SubPackagePage() {
+  return <View>普通分包</View>
+}

demo/taro-vite-react-tailwindcss-v3/src/sub-normal/pages/index.tsx

@@ -1,5 +1,7 @@
 import { View } from '@tarojs/components'
-import './index.scss'
+if (process.env.TARO_ENV !== 'rn') {
+  require('./index.scss')
+}
 
 export default function SubPackagePage() {
   return <View className="bg-normal-subpackage-marker before:content-['normal_subpackage_taro-vite-react-tailwindcss-v3']">普通分包</View>

demo/taro-vite-react-tailwindcss-v4/config/index.ts

@@ -5,11 +5,16 @@ import prodConfig from './prod'
 import { WeappTailwindcss } from 'weapp-tailwindcss/vite'
 
 const generator = {
+  target: process.env.TARO_ENV === 'h5' || process.env.TARO_ENV === 'harmony' || process.env.TARO_ENV === 'harmony-hybrid'
+    ? 'web'
+    : 'weapp',
   styleOptions: {
     px2rpx: true,
   },
 }
 
+const isNativeTarget = process.env.TARO_ENV === 'rn' || process.env.TARO_ENV === 'jdrn'
+
 const isWatchBuild = process.argv.includes('--watch') || process.argv.includes('-w')
 
 // https://taro-docs.jd.com/docs/next/config#defineconfig-辅助函数
@@ -28,10 +33,9 @@ export default defineConfig<'vite'>(async (merge, { command, mode }) => {
       375: 2,
       828: 1.81 / 2
     },
-    // plugins: ['@tarojs/plugin-html'],
+    plugins: ['@tarojs/plugin-platform-harmony-hybrid'],
     sourceRoot: 'src',
     outputRoot: 'dist',
-    // plugins: ['@tarojs/plugin-html'],
     defineConstants: {
     },
     copy: {
@@ -48,8 +52,7 @@ export default defineConfig<'vite'>(async (merge, { command, mode }) => {
           name: 'taro-cjs-stability',
           enforce: 'post',
           config() {
-            // Taro mini runner defaults this to true; disabling it avoids ESM
-            // modules in node_modules being forced through CommonJS transforms.
+            // Taro mini runner 默认启用该选项，关闭后可避免 node_modules 中的 ESM 模块被强制转为 CommonJS。
             return {
               build: {
                 commonjsOptions: {
@@ -64,6 +67,7 @@ export default defineConfig<'vite'>(async (merge, { command, mode }) => {
           cssSourceTrace: true,
           rem2rpx: true,
           generator,
+          disabled: isNativeTarget,
           // injectAdditionalCssVarScope: true,
         })
       ]

demo/taro-vite-react-tailwindcss-v4/index.js

@@ -0,0 +1 @@
+import '@tarojs/rn-supporter/entry-file.js'

demo/taro-vite-react-tailwindcss-v4/metro.config.js

@@ -0,0 +1,26 @@
+const path = require('node:path')
+const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config')
+const { getMetroConfig } = require('@tarojs/rn-supporter')
+
+const projectRoot = __dirname
+const workspaceRoot = path.resolve(__dirname, '../..')
+
+/**
+ * Metro 配置
+ * https://facebook.github.io/metro/docs/configuration
+ *
+ * @type {import('metro-config').MetroConfig}
+ */
+const config = {
+  projectRoot,
+  watchFolders: [workspaceRoot],
+  resolver: {
+    extraNodeModules: new Proxy({}, {
+      get: (_target, name) => path.join(projectRoot, 'node_modules', name),
+    }),
+  },
+}
+
+module.exports = (async function () {
+  return mergeConfig(getDefaultConfig(projectRoot), await getMetroConfig(), config)
+})()