docs(plugin-vite): addon vite-plugin example

examples/taro-hooks-plugin/project.config.json

@@ -50,4 +50,4 @@
     "tabIndent": "insertSpaces",
     "tabSize": 2
   }
-}
+}

examples/taro-plugin-react-vite/.eslintrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+  extends: ['taro/react'],
+  rules: {
+    'react/jsx-uses-react': 'off',
+    'react/react-in-jsx-scope': 'off',
+    'jsx-quotes': ['error', 'prefer-double'],
+  },
+};

examples/taro-plugin-react-vite/.gitignore

@@ -0,0 +1,8 @@
+dist/
+dist-weapp/
+deploy_versions/
+.temp/
+.rn_temp/
+node_modules/
+.DS_Store
+.swc

examples/taro-plugin-react-vite/babel.config.js

@@ -0,0 +1,14 @@
+// babel-preset-taro 更多选项和默认值：
+// https://github.com/NervJS/taro/blob/next/packages/babel-preset-taro/README.md
+module.exports = {
+  presets: [
+    [
+      'taro',
+      {
+        framework: 'react',
+        ts: true,
+        compiler: 'vite'
+      },
+    ],
+  ]
+};

examples/taro-plugin-react-vite/config/dev.ts

@@ -0,0 +1,9 @@
+export default {
+  env: {
+    NODE_ENV: '"development"',
+  },
+  defineConstants: {},
+  isWatch: true,
+  mini: {},
+  h5: {},
+};

examples/taro-plugin-react-vite/config/index.ts

@@ -0,0 +1,91 @@
+import { defineConfig, type UserConfigExport } from '@tarojs/cli';
+import { resolve } from 'node:path';
+
+import devConfig from './dev';
+import prodConfig from './prod';
+
+// https://taro-docs.jd.com/docs/next/config#defineconfig-辅助函数
+export default defineConfig(async (merge, { command, mode }) => {
+  const baseConfig: UserConfigExport<'vite'> = {
+    projectName: 'taro-plugin-vite',
+    date: '2024-07-24',
+    designWidth: 750,
+    deviceRatio: {
+      640: 2.34 / 2,
+      750: 1,
+      375: 2,
+      828: 1.81 / 2,
+    },
+    sourceRoot: 'src',
+    outputRoot: process.env.TARO_ENV === 'weapp' ? 'dist-weapp' : 'dist',
+    plugins: ['@taro-hooks/plugin-react'],
+    defineConstants: {
+      CF: process.env.CF_PAGES ? JSON.stringify(process.env.CF_PAGES) : "'0'",
+    },
+    alias: {
+      '@root': resolve(__dirname, '..', '..', '..'),
+      '@src': resolve(__dirname, '..', 'src'),
+    },
+    copy: {
+      patterns: [],
+      options: {},
+    },
+    framework: 'react',
+    compiler: 'vite',
+    mini: {
+      postcss: {
+        pxtransform: {
+          enable: true,
+          config: {},
+        },
+        cssModules: {
+          enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
+          config: {
+            namingPattern: 'module', // 转换模式，取值为 global/module
+            generateScopedName: '[name]__[local]___[hash:base64:5]',
+          },
+        },
+      },
+    },
+    h5: {
+      publicPath: '/',
+      staticDirectory: 'static',
+    },
+    output: {
+      filename: 'js/[name].[hash:8].js',
+      chunkFilename: 'js/[name].[chunkhash:8].js',
+    },
+    miniCssExtractPluginOption: {
+      ignoreOrder: true,
+      filename: 'css/[name].[hash].css',
+      chunkFilename: 'css/[name].[chunkhash].css',
+    },
+    postcss: {
+      autoprefixer: {
+        enable: true,
+        config: {},
+      },
+      cssModules: {
+        enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
+        config: {
+          namingPattern: 'module', // 转换模式，取值为 global/module
+          generateScopedName: '[name]__[local]___[hash:base64:5]',
+        },
+      },
+    },
+    rn: {
+      appName: 'taroDemo',
+      postcss: {
+        cssModules: {
+          enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
+        },
+      },
+    },
+  };
+  if (process.env.NODE_ENV === 'development') {
+    // 本地开发构建配置（不混淆压缩）
+    return merge({}, baseConfig, devConfig);
+  }
+  // 生产构建配置（默认开启压缩混淆等）
+  return merge({}, baseConfig, prodConfig);
+});

examples/taro-plugin-react-vite/config/prod.ts

@@ -0,0 +1,35 @@
+export default {
+  env: {
+    NODE_ENV: '"production"',
+  },
+  defineConstants: {},
+  mini: {},
+  h5: {
+    /**
+     * WebpackChain 插件配置
+     * @docs https://github.com/neutrinojs/webpack-chain
+     */
+    // webpackChain (chain) {
+    //   /**
+    //    * 如果 h5 端编译后体积过大，可以使用 webpack-bundle-analyzer 插件对打包体积进行分析。
+    //    * @docs https://github.com/webpack-contrib/webpack-bundle-analyzer
+    //    */
+    //   chain.plugin('analyzer')
+    //     .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin, [])
+    //   /**
+    //    * 如果 h5 端首屏加载时间过长，可以使用 prerender-spa-plugin 插件预加载首页。
+    //    * @docs https://github.com/chrisvfritz/prerender-spa-plugin
+    //    */
+    //   const path = require('path')
+    //   const Prerender = require('prerender-spa-plugin')
+    //   const staticDir = path.join(__dirname, '..', 'dist')
+    //   chain
+    //     .plugin('prerender')
+    //     .use(new Prerender({
+    //       staticDir,
+    //       routes: [ '/pages/index/index' ],
+    //       postProcess: (context) => ({ ...context, outputPath: path.join(staticDir, 'index.html') })
+    //     }))
+    // }
+  },
+};

examples/taro-plugin-react-vite/global.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="@tarojs/taro" />
+/// <reference types="@taro-hooks/plugin-react" />
+import '@taro-hooks/plugin-react';
+
+declare module '*.png';
+declare module '*.gif';
+declare module '*.jpg';
+declare module '*.jpeg';
+declare module '*.svg';
+declare module '*.css';
+declare module '*.less';
+declare module '*.scss';
+declare module '*.sass';
+declare module '*.styl';
+
+declare const CF: string;
+
+declare namespace NodeJS {
+  interface ProcessEnv {
+    TARO_ENV:
+      | 'weapp'
+      | 'swan'
+      | 'alipay'
+      | 'h5'
+      | 'rn'
+      | 'tt'
+      | 'quickapp'
+      | 'qq'
+      | 'jd';
+  }
+}

examples/taro-plugin-react-vite/package.json

@@ -0,0 +1,82 @@
+{
+  "name": "@taro-hooks/taro-hooks-plugin-vite",
+  "version": "1.0.0",
+  "private": true,
+  "description": "@taro-hooks/taro-hooks-plugin-vite",
+  "templateInfo": {
+    "name": "default",
+    "typescript": true,
+    "css": "less",
+    "framework": "React"
+  },
+  "scripts": {
+    "build:weapp": "taro build --type weapp",
+    "build:swan": "taro build --type swan",
+    "build:alipay": "taro build --type alipay",
+    "build:tt": "taro build --type tt",
+    "build:h5": "taro build --type h5",
+    "build:rn": "taro build --type rn",
+    "build:qq": "taro build --type qq",
+    "build:jd": "taro build --type jd",
+    "build:harmony-hybrid": "taro build --type harmony-hybrid",
+    "dev:weapp": "npm run build:weapp -- --watch",
+    "dev:swan": "npm run build:swan -- --watch",
+    "dev:alipay": "npm run build:alipay -- --watch",
+    "dev:tt": "npm run build:tt -- --watch",
+    "dev:h5": "npm run build:h5 -- --watch",
+    "dev:rn": "npm run build:rn -- --watch",
+    "dev:qq": "npm run build:qq -- --watch",
+    "dev:jd": "npm run build:jd -- --watch",
+    "dev:harmony-hybrid": "npm run build:harmony-hybrid -- --watch"
+  },
+  "browserslist": [
+    "defaults and fully supports es6-module",
+    "maintained node versions"
+  ],
+  "author": "",
+  "dependencies": {
+    "@babel/runtime": "^7.24.4",
+    "@taro-hooks/ahooks": "workspace:*",
+		"@taro-hooks/plugin-react": "workspace:*",
+		"@taro-hooks/shared": "workspace:*",
+    "@tarojs/components": "4.0.3-alpha.4",
+    "@tarojs/helper": "4.0.3-alpha.4",
+    "@tarojs/plugin-platform-weapp": "4.0.3-alpha.4",
+    "@tarojs/plugin-platform-alipay": "4.0.3-alpha.4",
+    "@tarojs/plugin-platform-tt": "4.0.3-alpha.4",
+    "@tarojs/plugin-platform-swan": "4.0.3-alpha.4",
+    "@tarojs/plugin-platform-jd": "4.0.3-alpha.4",
+    "@tarojs/plugin-platform-qq": "4.0.3-alpha.4",
+    "@tarojs/plugin-platform-h5": "4.0.3-alpha.4",
+    "@tarojs/plugin-platform-harmony-hybrid": "4.0.3-alpha.4",
+    "@tarojs/runtime": "4.0.3-alpha.4",
+    "@tarojs/shared": "4.0.3-alpha.4",
+    "@tarojs/taro": "4.0.3-alpha.4",
+    "@tarojs/plugin-framework-react": "4.0.3-alpha.4",
+    "@tarojs/react": "4.0.3-alpha.4",
+    "react-dom": "^18.0.0",
+    "react": "^18.0.0",
+    "taro-hooks": "workspace:*"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.24.4",
+    "@babel/plugin-proposal-class-properties": "7.14.5",
+    "@tarojs/cli": "4.0.3-alpha.4",
+    "@tarojs/vite-runner": "4.0.3-alpha.4",
+    "babel-preset-taro": "4.0.3-alpha.4",
+    "eslint-config-taro": "4.0.3-alpha.4",
+    "eslint": "^8.57.0",
+    "stylelint": "^16.4.0",
+    "terser": "^5.30.4",
+    "vite": "^4.2.0",
+    "@babel/preset-react": "^7.24.1",
+    "@types/react": "^18.0.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-react-hooks": "^4.4.0",
+    "react-refresh": "^0.14.0",
+    "less": "^4.2.0",
+    "typescript": "^5.4.5",
+    "postcss": "^8.4.38"
+  }
+}

examples/taro-plugin-react-vite/project.config.json

@@ -0,0 +1,53 @@
+{
+  "miniprogramRoot": "dist-weapp/",
+  "projectname": "taro-hooks-plugin-vite",
+  "description": "项目配置文件，详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
+  "appid": "wx15171eb44c7567ae",
+  "setting": {
+    "urlCheck": true,
+    "es6": false,
+    "postcss": false,
+    "preloadBackgroundData": false,
+    "minified": false,
+    "newFeature": true,
+    "autoAudits": false,
+    "coverView": true,
+    "showShadowRootInWxmlPanel": false,
+    "scopeDataCheck": false,
+    "useCompilerModule": false,
+    "lazyloadPlaceholderEnable": false,
+    "uglifyFileName": false,
+    "uploadWithSourceMap": true,
+    "enhance": false,
+    "useMultiFrameRuntime": true,
+    "packNpmManually": false,
+    "packNpmRelationList": [],
+    "minifyWXSS": false,
+    "useStaticServer": true,
+    "showES6CompileOption": false,
+    "checkInvalidKey": true,
+    "babelSetting": {
+      "ignore": [],
+      "disablePlugins": [],
+      "outputPath": ""
+    },
+    "disableUseStrict": false,
+    "useCompilerPlugins": false,
+    "minifyWXML": false,
+    "ignoreUploadUnusedFiles": false
+  },
+  "compileType": "miniprogram",
+  "simulatorType": "wechat",
+  "simulatorPluginLibVersion": {},
+  "condition": {},
+  "libVersion": "2.24.2",
+  "srcMiniprogramRoot": "dist/",
+  "packOptions": {
+    "ignore": [],
+    "include": []
+  },
+  "editorSetting": {
+    "tabIndent": "insertSpaces",
+    "tabSize": 2
+  }
+}

examples/taro-plugin-react-vite/project.private.config.json

@@ -0,0 +1,12 @@
+{
+  "projectname": "taro-hooks-plugin-vite",
+  "setting": {
+    "compileHotReLoad": false,
+    "urlCheck": false,
+    "bigPackageSizeSupport": true
+  },
+  "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
+  "condition": {
+    "miniprogram": {}
+  }
+}

examples/taro-plugin-react-vite/project.tt.json

@@ -0,0 +1,13 @@
+{
+  "miniprogramRoot": "./",
+  "projectname": "taro-hooks-plugin-vite",
+  "description": "use taro-hooks-plugin",
+  "appid": "touristappid",
+  "setting": {
+    "urlCheck": true,
+    "es6": false,
+    "postcss": false,
+    "minified": false
+  },
+  "compileType": "miniprogram"
+}

examples/taro-plugin-react-vite/src/app.config.ts

@@ -0,0 +1,9 @@
+export default {
+  pages: ["pages/index/index"],
+  window: {
+    backgroundTextStyle: "light",
+    navigationBarBackgroundColor: "#fff",
+    navigationBarTitleText: "WeChat",
+    navigationBarTextStyle: "black",
+  },
+};