feat: update project configuration and structure

- Updated project.config.json with new project name and settings.
- Removed unused app.scss and index.scss files, replaced with CSS files.
- Refactored app.ts to utilize Taro's useLaunch hook for app initialization.
- Simplified index.tsx to display a basic greeting and user info button.
- Added new project.xhs.json for XHS platform configuration.
- Introduced is-xhs utility function to check for XHS environment.
- Updated tsconfig.json to include path mappings and additional include paths.
This commit is contained in:
2026-03-12 17:45:09 +08:00
parent c4b288ac17
commit 7b760d20f3
18 changed files with 4167 additions and 2576 deletions

View File

@@ -1,12 +0,0 @@
# http://editorconfig.org
root = true
[*]
indent_style = space
indent_size = 2
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false

View File

@@ -1,4 +1,4 @@
module.exports = {
{
"extends": ["taro/react"],
"rules": {
"react/jsx-uses-react": "off",

2
.gitignore vendored
View File

@@ -5,3 +5,5 @@ deploy_versions/
node_modules/
.DS_Store
.swc
*.local
.env*

View File

@@ -1,24 +1,11 @@
// babel-preset-taro 更多选项和默认值:
// https://github.com/NervJS/taro/blob/next/packages/babel-preset-taro/README.md
// https://docs.taro.zone/docs/next/babel-config
module.exports = {
presets: [
['taro',
{
framework: 'react',
ts: 'true',
compiler: 'vite',
}]
],
plugins: [
[
"import",
{
"libraryName": "@nutui/nutui-react-taro",
"libraryDirectory": "dist/esm",
"style": 'css',
"camel2DashComponentName": false
},
'nutui-react-taro'
]
['taro', {
framework: 'react',
ts: true,
compiler: 'webpack5',
}]
]
}

View File

@@ -1,6 +1,10 @@
import type { UserConfigExport } from "@tarojs/cli";
export default {
import type { UserConfigExport } from "@tarojs/cli"
export default {
logger: {
quiet: false,
stats: true
},
mini: {},
h5: {}
} satisfies UserConfigExport<'vite'>
} satisfies UserConfigExport<'webpack5'>

View File

@@ -1,99 +1,102 @@
import { defineConfig, type UserConfigExport } from '@tarojs/cli'
import devConfig from './dev'
import prodConfig from './prod'
import vitePluginImp from 'vite-plugin-imp'
import { defineConfig, type UserConfigExport } from "@tarojs/cli";
import TsconfigPathsPlugin from "tsconfig-paths-webpack-plugin";
import devConfig from "./dev";
import prodConfig from "./prod";
// https://taro-docs.jd.com/docs/next/config#defineconfig-辅助函数
export default defineConfig<'vite'>(async (merge, { command, mode }) => {
const baseConfig: UserConfigExport<'vite'> = {
projectName: 'taro-template',
date: '2026-3-12',
designWidth: 375,
// @ts-ignore
export default defineConfig<"webpack5">(async (merge, { command, mode }) => {
const baseConfig: UserConfigExport<"webpack5"> = {
projectName: "2025-09-14-webpack-demo",
date: "2025-9-14",
designWidth: 750,
deviceRatio: {
640: 2.34 / 2,
750: 1,
375: 2,
828: 1.81 / 2
},
sourceRoot: 'src',
outputRoot: 'dist',
plugins: ['@tarojs/plugin-html'],
defineConstants: {
828: 1.81 / 2,
},
sourceRoot: "src",
outputRoot: "dist",
plugins: ["@tarojs/plugin-generator"],
// plugins: ["@tarojs/plugin-generator", "@tarojs/plugin-platform-xhs"],
defineConstants: {},
copy: {
patterns: [
],
options: {
}
patterns: [],
options: {},
},
framework: 'react',
compiler: {
vitePlugins: [vitePluginImp({
libList: [
{
libName: '@nutui/nutui-react-taro',
style: (name) => {
return `@nutui/nutui-react-taro/dist/esm/${name}/style/css`
},
replaceOldImport: false,
camel2DashComponentName: false,
}
]
})],
type: 'vite'
framework: "react",
compiler: "webpack5",
cache: {
enable: false, // Webpack 持久化缓存配置建议开启。默认配置请参考https://docs.taro.zone/docs/config-detail#cache
},
mini: {
postcss: {
pxtransform: {
enable: true,
config: {
selectorBlackList: ['nut-']
}
config: {},
},
cssModules: {
enable: false, // 默认为 false如需使用 css modules 功能,则设为 true
config: {
namingPattern: 'module', // 转换模式,取值为 global/module
generateScopedName: '[name]__[local]___[hash:base64:5]'
}
}
namingPattern: "module", // 转换模式,取值为 global/module
generateScopedName: "[name]__[local]___[hash:base64:5]",
},
},
},
webpackChain(chain) {
chain.resolve.plugin("tsconfig-paths").use(TsconfigPathsPlugin);
},
},
h5: {
publicPath: '/',
staticDirectory: 'static',
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'
filename: "css/[name].[hash].css",
chunkFilename: "css/[name].[chunkhash].css",
},
postcss: {
autoprefixer: {
enable: true,
config: {}
config: {},
},
cssModules: {
enable: false, // 默认为 false如需使用 css modules 功能,则设为 true
config: {
namingPattern: 'module', // 转换模式,取值为 global/module
generateScopedName: '[name]__[local]___[hash:base64:5]'
}
}
namingPattern: "module", // 转换模式,取值为 global/module
generateScopedName: "[name]__[local]___[hash:base64:5]",
},
},
},
webpackChain(chain) {
chain.resolve.plugin("tsconfig-paths").use(TsconfigPathsPlugin);
chain.set("ignoreWarnings", [
{
module: /@tarojs\/components/,
message: /webpackExports/,
},
]);
},
},
rn: {
appName: 'taroDemo',
appName: "taroDemo",
postcss: {
cssModules: {
enable: false, // 默认为 false如需使用 css modules 功能,则设为 true
}
}
}
}
if (process.env.NODE_ENV === 'development') {
},
},
},
};
if (process.env.NODE_ENV === "development") {
// 本地开发构建配置(不混淆压缩)
return merge({}, baseConfig, devConfig)
return merge({}, baseConfig, devConfig);
}
// 生产构建配置(默认开启压缩混淆等)
return merge({}, baseConfig, prodConfig)
})
return merge({}, baseConfig, prodConfig);
});

View File

@@ -1,4 +1,5 @@
import type { UserConfigExport } from "@tarojs/cli";
import type { UserConfigExport } from "@tarojs/cli"
export default {
mini: {},
h5: {
@@ -29,4 +30,4 @@ export default {
// }))
// }
}
} satisfies UserConfigExport<'vite'>
} satisfies UserConfigExport<'webpack5'>

View File

@@ -2,14 +2,15 @@
"name": "taro-template",
"version": "1.0.0",
"private": true,
"description": "taro模板",
"description": "taro-template",
"templateInfo": {
"name": "react-NutUI",
"name": "default",
"typescript": true,
"css": "Sass",
"css": "None",
"framework": "React"
},
"scripts": {
"new": "taro new",
"build:weapp": "taro build --type weapp",
"build:swan": "taro build --type swan",
"build:alipay": "taro build --type alipay",
@@ -18,7 +19,9 @@
"build:rn": "taro build --type rn",
"build:qq": "taro build --type qq",
"build:jd": "taro build --type jd",
"build:quickapp": "taro build --type quickapp",
"build:harmony-hybrid": "taro build --type harmony-hybrid",
"build:xhs": "taro build --type xhs",
"dev:xhs": "npm run build:xhs -- --watch",
"dev:weapp": "npm run build:weapp -- --watch",
"dev:swan": "npm run build:swan -- --watch",
"dev:alipay": "npm run build:alipay -- --watch",
@@ -27,60 +30,53 @@
"dev:rn": "npm run build:rn -- --watch",
"dev:qq": "npm run build:qq -- --watch",
"dev:jd": "npm run build:jd -- --watch",
"dev:quickapp": "npm run build:quickapp -- --watch"
"dev:harmony-hybrid": "npm run build:harmony-hybrid -- --watch"
},
"browserslist": [
"last 3 versions",
"Android >= 4.1",
"ios >= 8"
"defaults and fully supports es6-module",
"maintained node versions"
],
"author": "",
"dependencies": {
"@babel/runtime": "^7.21.5",
"@babel/runtime": "^7.28.6",
"@tarojs/components": "4.1.11",
"@tarojs/helper": "4.1.11",
"@tarojs/plugin-platform-weapp": "4.1.11",
"@tarojs/plugin-framework-react": "4.1.11",
"@tarojs/plugin-platform-alipay": "4.1.11",
"@tarojs/plugin-platform-tt": "4.1.11",
"@tarojs/plugin-platform-swan": "4.1.11",
"@tarojs/plugin-platform-h5": "4.1.11",
"@tarojs/plugin-platform-harmony-hybrid": "4.1.11",
"@tarojs/plugin-platform-jd": "4.1.11",
"@tarojs/plugin-platform-qq": "4.1.11",
"@tarojs/plugin-platform-h5": "4.1.11",
"@tarojs/plugin-html": "4.1.11",
"@tarojs/plugin-platform-swan": "4.1.11",
"@tarojs/plugin-platform-tt": "4.1.11",
"@tarojs/plugin-platform-weapp": "4.1.11",
"@tarojs/plugin-platform-xhs": "^1.2.2",
"@tarojs/react": "4.1.11",
"@tarojs/runtime": "4.1.11",
"@tarojs/shared": "4.1.11",
"@tarojs/taro": "4.1.11",
"@nutui/nutui-react-taro": "^2.6.14",
"@tarojs/plugin-framework-react": "4.1.11",
"@tarojs/react": "4.1.11",
"react-dom": "^18.0.0",
"react": "^18.0.0"
"react": "^18.3.1",
"react-dom": "^18.3.1"
},
"devDependencies": {
"@babel/preset-react": "^7.24.1",
"@babel/plugin-proposal-class-properties": "7.14.5",
"@babel/core": "^7.8.0",
"babel-plugin-import": "^1.13.8",
"@babel/core": "^7.29.0",
"@babel/plugin-transform-class-properties": "7.28.6",
"@babel/preset-react": "^7.28.5",
"@pmmmwh/react-refresh-webpack-plugin": "^0.6.2",
"@tarojs/cli": "4.1.11",
"@tarojs/vite-runner": "4.1.11",
"@tarojs/plugin-generator": "4.1.11",
"@tarojs/taro-loader": "4.1.11",
"@tarojs/webpack5-runner": "4.1.11",
"@types/node": "^25",
"@types/react": "^18.3.23",
"@types/webpack-env": "^1.18.8",
"babel-preset-taro": "4.1.11",
"eslint-config-taro": "4.1.11",
"eslint": "^8.12.0",
"stylelint": "^14.4.0",
"terser": "^5.16.8",
"vite": "^4.2.0",
"vite-plugin-imp": "^2.4.0",
"@tarojs/test-utils-react": "^0.1.1",
"@types/react": "^18.0.0",
"@vitejs/plugin-react": "^4.1.0",
"eslint-plugin-react": "^7.8.2",
"eslint-plugin-import": "^2.12.0",
"eslint-plugin-react-hooks": "^4.2.0",
"react-refresh": "^0.11.0",
"sass": "^1.60.0",
"@typescript-eslint/parser": "^6.2.0",
"@typescript-eslint/eslint-plugin": "^6.2.0",
"typescript": "^5.1.0",
"postcss": "^8.4.18"
"eslint-plugin-react": "^7.37.5",
"eslint-plugin-react-hooks": "^7.0.1",
"postcss": "^8.5.8",
"react-refresh": "^0.18.0",
"tsconfig-paths-webpack-plugin": "^4.2.0",
"typescript": "^5.9.3",
"webpack": "5.105.4"
}
}

6276
pnpm-lock.yaml generated

File diff suppressed because it is too large Load Diff

View File

@@ -1,25 +1,15 @@
{
"miniprogramRoot": "dist/",
"projectname": "taro-template",
"description": "taro模板",
"appid": "touristappid",
"setting": {
"urlCheck": true,
"es6": false,
"miniprogramRoot": "./dist",
"projectname": "2026-03-12-taro-template",
"description": "taro-template",
"appid": "touristappid",
"setting": {
"urlCheck": true,
"es6": false,
"enhance": false,
"compileHotReLoad": false,
"postcss": false,
"preloadBackgroundData": false,
"minified": false,
"newFeature": true,
"autoAudits": false,
"coverView": true,
"showShadowRootInWxmlPanel": false,
"scopeDataCheck": false,
"useCompilerModule": false
},
"compileType": "miniprogram",
"simulatorType": "wechat",
"simulatorPluginLibVersion": {},
"condition": {}
"postcss": false,
"minified": false
},
"compileType": "miniprogram"
}

75
project.xhs.json Normal file
View File

@@ -0,0 +1,75 @@
{
"description": "项目配置文件",
"packOptions": {
"ignore": []
},
"setting": {
"minified": true,
"urlCheck": true,
"useNewDevtools": false,
"enableSimulatorV2": true,
"enableV2": false,
"enableVDom": true,
"useNewCompiler": true,
"bundle": false,
"userConfirmedBundleSwitch": false,
"scopeDataCheck": false,
"coverView": true,
"es6": true,
"postcss": true,
"compileHotReLoad": false,
"lazyloadPlaceholderEnable": false,
"preloadBackgroundData": false,
"autoAudits": false,
"newFeature": false,
"uglifyFileName": false,
"uploadWithSourceMap": true,
"useIsolateContext": true,
"nodeModules": false,
"enhance": true,
"useMultiFrameRuntime": true,
"useApiHook": true,
"useApiHostProcess": true,
"showShadowRootInWxmlPanel": true,
"packNpmManually": false,
"enableEngineNative": false,
"packNpmRelationList": [],
"minifyWXSS": true,
"showES6CompileOption": false,
"useLiteCompiler": true
},
"compileType": "miniprogram",
"libVersion": "3.116.2",
"projectname": "xhs-demo",
"debugOptions": {
"hidedInDevtools": []
},
"appid": "68c47321131b9b0001166b7d",
"scripts": {},
"staticServerOptions": {
"baseURL": "",
"servePath": ""
},
"isGameTourist": false,
"condition": {
"search": {
"list": []
},
"conversation": {
"list": []
},
"game": {
"list": []
},
"plugin": {
"list": []
},
"gamePlugin": {
"list": []
},
"miniprogram": {
"list": []
}
},
"projectName": "jd-code-exchange"
}

View File

@@ -1,19 +1,26 @@
import { useEffect } from 'react'
import { useDidShow, useDidHide } from '@tarojs/taro'
// 全局样式
import './app.scss'
import { PropsWithChildren } from "react";
import { useLaunch } from "@tarojs/taro";
function App(props) {
// 可以使用所有的 React Hooks
useEffect(() => { })
import "./app.css";
import Taro from "@tarojs/taro";
// 对应 onShow
useDidShow(() => { })
function App({ children }: PropsWithChildren<any>) {
useLaunch(() => {
console.log("App launched.");
console.log(Taro.getEnv(), Taro.ENV_TYPE);
if (Taro.getEnv() === Taro.ENV_TYPE.WEAPP) {
Taro.login({
success: function (res) {
console.log("login success", res);
},
});
} else {
console.log("Not in a mini program environment, skipping login.");
}
});
// 对应 onHide
useDidHide(() => { })
return props.children
// children 是将要会渲染的页面
return children;
}
export default App
export default App;

View File

@@ -1,28 +1,23 @@
import { useState } from 'react'
import { View } from '@tarojs/components'
import { ConfigProvider } from '@nutui/nutui-react-taro'
import './index.scss'
function Index() {
const [translated] = useState({
zhCN: {
welcome: '欢迎使用 NutUI React 开发 Taro 多端项目。',
button: '使用英文',
open: '点击打开',
},
enUS: {
welcome: 'Welcome to use NutUI React to develop Taro multi-terminal projects.',
button: 'Use Chinese',
open: 'Click Me',
},
})
import { View, Text, Button } from "@tarojs/components";
import { useLoad } from "@tarojs/taro";
import "./index.css";
export default function Index() {
useLoad(() => {
console.log("Page loaded.");
});
return (
<ConfigProvider>
<View className='nutui-react-demo'>
<View className='welcome'>{translated.zhCN.welcome}</View>
</View>
</ConfigProvider>
)
<View className="index">
<Text>Hello world!</Text>
<Button
openType="getUserInfo"
onGetUserInfo={(e) => {
console.log("onGetUserInfoEventDetail", e);
}}
>
User Info
</Button>
</View>
);
}
export default Index

View File

@@ -0,0 +1,6 @@
import Taro from "@tarojs/taro";
export const isXHS = () => {
// @ts-ignore
return Taro.getEnv() === "xhs";
};

View File

@@ -13,15 +13,18 @@
"noUnusedParameters": true,
"strictNullChecks": true,
"sourceMap": true,
"baseUrl": ".",
"rootDir": ".",
"jsx": "react-jsx",
"allowJs": true,
"resolveJsonModule": true,
"typeRoots": [
"node_modules/@types"
]
],
"paths": {
// TS5090 leading './'
"@/*": ["./src/*"]
}
},
"include": ["./src", "./types"],
"include": ["./src", "./types", "./config"],
"compileOnSave": false
}

4
types/global.d.ts vendored
View File

@@ -16,7 +16,7 @@ declare namespace NodeJS {
/** NODE 内置环境变量, 会影响到最终构建生成产物 */
NODE_ENV: 'development' | 'production',
/** 当前构建的平台 */
TARO_ENV: 'weapp' | 'swan' | 'alipay' | 'h5' | 'rn' | 'tt' | 'quickapp' | 'qq' | 'jd'
TARO_ENV: 'weapp' | 'swan' | 'alipay' | 'h5' | 'rn' | 'tt' | 'qq' | 'jd' | 'harmony' | 'jdrn' | 'xhs'
/**
* 当前构建的小程序 appid
* @description 若不同环境有不同的小程序,可通过在 env 文件中配置环境变量`TARO_APP_ID`来方便快速切换 appid 而不必手动去修改 dist/project.config.json 文件
@@ -25,3 +25,5 @@ declare namespace NodeJS {
TARO_APP_ID: string
}
}