From 09e4093acaeb8116427bfee595d5b418fc55b13a Mon Sep 17 00:00:00 2001 From: h_mo <596417202@qq.com> Date: Mon, 19 Aug 2024 17:52:52 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20tailwindcss=20=E6=9B=BF=E6=8D=A2=20?= =?UTF-8?q?unocss?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .npmrc | 4 +- build/platform.ts | 15 ++++ build/vitePlugins.ts | 57 +++++++++++++++ eslint.config.js | 1 - package.json | 13 ++-- postcss.config.ts | 12 ++++ src/App.vue | 3 + src/main.ts | 1 - src/pages/demo/index.vue | 2 +- src/pages/index/index.vue | 2 +- src/pages/notFound/404.vue | 2 +- src/types/unplugin-transform-class-vite.d.ts | 4 -- tailwind.config.js | 11 +++ tsconfig.json | 2 +- unocss.config.js | 73 -------------------- vite.config.ts | 55 +++------------ 16 files changed, 119 insertions(+), 138 deletions(-) create mode 100644 build/platform.ts create mode 100644 build/vitePlugins.ts create mode 100644 postcss.config.ts delete mode 100644 src/types/unplugin-transform-class-vite.d.ts create mode 100644 tailwind.config.js delete mode 100644 unocss.config.js diff --git a/.npmrc b/.npmrc index 152f324..54d704c 100644 --- a/.npmrc +++ b/.npmrc @@ -2,5 +2,5 @@ # 提示:如果你不希望pnpm在对等依赖问题上失败，在项目根目录下的.npmrc文件中添加"strict-peer-dependencies=false"。 # auto-install-peers=true strict-peer-dependencies=false -# registry=https://registry.npmmirror.com -registry=https://registry.npmjs.org +registry=https://registry.npmmirror.com +# registry=https://registry.npmjs.org diff --git a/build/platform.ts b/build/platform.ts new file mode 100644 index 0000000..c7feb67 --- /dev/null +++ b/build/platform.ts @@ -0,0 +1,15 @@ +import process from 'node:process'; + +const currentPlatform = process.env.UNI_PLATFORM; +const isH5 = currentPlatform === 'h5'; +const isApp = currentPlatform === 'app'; +const WeappTailwindcssDisabled = isH5 || isApp; +const isMp = !isH5 && !isApp; + +export { + isH5, + isApp, + WeappTailwindcssDisabled, + isMp, + currentPlatform, +}; diff --git a/build/vitePlugins.ts b/build/vitePlugins.ts new file mode 100644 index 0000000..f614f3e --- /dev/null +++ b/build/vitePlugins.ts @@ -0,0 +1,57 @@ +import type { PluginOption } from 'vite'; +import uni from '@dcloudio/vite-plugin-uni'; +import { UnifiedViteWeappTailwindcssPlugin as uvtw } from 'weapp-tailwindcss/vite'; +import autoImport from 'unplugin-auto-import/vite'; +import viteRestart from 'vite-plugin-restart'; +import { visualizer } from 'rollup-plugin-visualizer'; +import { WeappTailwindcssDisabled, isH5 } from './platform'; + +interface VitePluginConfig { + isProd: boolean +} + +export function createVitePlugins({ isProd }: VitePluginConfig): PluginOption[] { + return [ + // @ts-expect-error TODO uni() 会报错：uni is not a function,暂时使用此方式解决 + uni?.default(), + uvtw({ + rem2rpx: true, + disabled: WeappTailwindcssDisabled, + // 使用新的 ast-grep 来处理 js 资源，速度是 babel 的2倍左右 + // 需要先安装 `@ast-grep/napi` + // jsAstTool: 'ast-grep' + }), + autoImport({ + include: [ + /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx + /\.vue$/, + /\.vue\?vue/, // .vue + ], + imports: [ + 'vue', + 'uni-app', + 'pinia', + { + 'uni-mini-router': ['useRouter', 'useRoute'], + }, + { + alova: ['useRequest'], + }, + ], + dts: 'typings/auto-imports.d.ts', + eslintrc: { + enabled: true, + }, + }), + viteRestart({ + restart: ['vite.config.ts', 'src/pages.json'], + }), + isH5 && isProd + && visualizer({ + filename: './node_modules/.cache/visualizer/stats.html', + open: true, + gzipSize: true, + brotliSize: true, + }), + ]; +} diff --git a/eslint.config.js b/eslint.config.js index 98b72d7..fbdc545 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -12,7 +12,6 @@ export default antfu( formatters: true, vue: true, jsx: true, - unocss: true, env: { node: true, }, diff --git a/package.json b/package.json index e40ade6..3650576 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,8 @@ "build:quickapp-webview-huawei": "uni build -p quickapp-webview-huawei", "build:quickapp-webview-union": "uni build -p quickapp-webview-union", "lint:fix": "eslint . --fix", - "git:hooks": "npx simple-git-hooks" + "git:hooks": "npx simple-git-hooks", + "postinstall": "weapp-tw patch" }, "dependencies": { "@alova/adapter-uniapp": "^1.2.2", @@ -69,27 +70,27 @@ "@types/crypto-js": "^4.2.2", "@types/lodash-es": "^4.17.12", "@types/node": "^20.16.1", - "@unocss/eslint-plugin": "^0.61.9", "@vitejs/plugin-vue": "^5.1.2", "@vue/runtime-core": "^3.4.38", + "autoprefixer": "^10.4.20", "eslint": "^9.9.0", "eslint-plugin-format": "^0.1.2", "globals": "^15.9.0", "lint-staged": "^15.2.9", "picocolors": "^1.0.1", + "postcss": "^8.4.41", "rollup-plugin-visualizer": "^5.12.0", "sass": "^1.77.8", "simple-git-hooks": "^2.11.1", + "tailwindcss": "^3.4.10", "tsx": "^4.17.0", "typescript": "^5.5.4", "uni-mini-router": "^0.1.6", "uni-read-pages-vite": "^0.0.6", - "unocss": "^0.62.2", - "unocss-preset-weapp": "^0.62.0", "unplugin-auto-import": "^0.18.2", - "unplugin-transform-class": "^0.5.3", "vite": "^5.4.1", - "vite-plugin-restart": "^0.4.1" + "vite-plugin-restart": "^0.4.1", + "weapp-tailwindcss": "^3.5.0" }, "simple-git-hooks": { "pre-commit": "npx lint-staged", diff --git a/postcss.config.ts b/postcss.config.ts new file mode 100644 index 0000000..a16dcd9 --- /dev/null +++ b/postcss.config.ts @@ -0,0 +1,12 @@ +import tailwindcss from 'tailwindcss'; +import autoprefixer from 'autoprefixer'; +import type { AcceptedPlugin } from 'postcss'; +import cssMacro from 'weapp-tailwindcss/css-macro/postcss'; + +const plugins: AcceptedPlugin[] = [tailwindcss(), autoprefixer()]; + +// 可以使用 postcss-pxtransform 来进行 px 转 rpx 的功能 + +plugins.push(cssMacro); + +export default plugins; diff --git a/src/App.vue b/src/App.vue index 735c9d7..d464290 100644 --- a/src/App.vue +++ b/src/App.vue @@ -16,4 +16,7 @@ onHide(() => { diff --git a/src/main.ts b/src/main.ts index c4c1a43..c723877 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,6 +1,5 @@ import { createSSRApp } from 'vue'; import App from './App.vue'; -import 'virtual:uno.css'; import { setupRouter } from './router'; import { setupStore } from './stores'; diff --git a/src/pages/demo/index.vue b/src/pages/demo/index.vue index 304f519..e4a9905 100644 --- a/src/pages/demo/index.vue +++ b/src/pages/demo/index.vue @@ -5,7 +5,7 @@ const demo = ref('Demo');