xin-school-taro/CLAUDE.md

CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

Build & Development

# WeChat mini-program
npm run dev:weapp          # Watch/dev build → weapp/
npm run build:weapp        # Production build → weapp/

# H5 (web)
npm run dev:h5             # Watch/dev build → build/
npm run build:h5           # Production build → build/

Output directories are determined by TARO_ENV: for H5 it's build/, for all other platforms it matches the platform name (e.g., weapp/).

No test or lint scripts are configured. ESLint (eslint-config-taro) and Stylelint are installed but must be run manually.

Architecture

This is a Taro 3.6 cross-platform app using React 18 (concurrent mode), TypeScript, and Webpack 5. It targets WeChat, Alipay, DingTalk, JD, Kwai, QQ, Baidu, Toutiao mini-programs, and H5 web.

UI Library: @antmjs/vantui

The UI library is @antmjs/vantui (v3), a Taro-compatible port of Vant. Components are imported from @antmjs/vantui directly (e.g., import { Button } from '@antmjs/vantui'). The babel-plugin-import in babel.config.js handles on-demand style imports.

Page Structure

Each page lives in src/pages/<name>/ and consists of three files:

• index.tsx — page component (functional or class)
• index.config.ts — page-level config (title, navigation style, etc.)
• index.less — page styles

Pages must be registered in src/app.config.ts under the pages array.

Path Alias

@ maps to src/ (configured in config/index.js).

Theme & Global Styles

• src/app.less — global app styles (imported in app.ts)
• src/styles/index.less — theme variable overrides for Vant UI. It imports @antmjs/vantui/es/style/var.less and uncomments/redefines Less variables to customize the theme. This file is injected into every .less file via Less modifyVars (configured in config/index.js under both mini.lessLoaderOption and h5.lessLoaderOption).

Webpack Customizations (config/webpack/)

• commonChain.js — Overrides Taro's default script rule exclude so that Babel also processes these node_modules packages: taro, inversify, @antmjs, react-spring, recoil, buffer, qrcode. Do NOT include "taro" in the project name or all node_modules will be recompiled.
• miniChain.js — Applied to mini-program builds. Adds:
  • MiniFixPlugin — fixes path param encoding differences between WeChat/Douyin and Alipay/DingTalk
  • GlobalFixPlugin — polyfills the global variable for Alipay, DingTalk, and Baidu mini-programs
• h5Chain.js — Applied to H5 builds. Adds H5FixPlugin for H5 compatibility fixes.

Build Config Layers

config/index.js exports a function that merges the base config with config/development.js or config/production.js based on NODE_ENV. Environment variables:

Variable	Purpose	Default
TARO_ENV	Target platform (weapp, h5, alipay, etc.)	weapp
NODE_ENV	Build mode	production
API_ENV	API environment selector	real

• designWidth: 750 — all px values are converted to rpx at this ratio
• @tarojs/plugin-framework-react is configured with reactMode: "concurrent" (React 18 concurrent features)
• browserslist targets iOS 9+ for production

App Entry

• src/app.ts — class-based App component, renders this.props.children (the current page)
• src/app.config.ts — defines routes (pages array), window config, and app-level settings
• src/index.html — H5 entry HTML template