build: migrate to vite bundler

.vscode/settings.json

@@ -31,6 +31,7 @@
     "styl",
     "tarojs",
     "unplugin",
+    "vite",
     "walleeeee",
     "weapp",
     "zhihu",

babel.config.cjs

@@ -7,6 +7,7 @@ module.exports = {
     [
       'taro',
       {
+        compiler: 'vite',
         framework: 'vue3',
         ts: true,
       },

config/index.ts

@@ -4,13 +4,6 @@
 
 import path from 'node:path'
 import { defineConfig } from 'taro-define-config'
-import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin'
-
-declare module 'taro-define-config' {
-  interface CustomPluginOptionsMap {
-    'taro-plugin-pinia': {}
-  }
-}
 
 /**
  * resolve path
@@ -21,7 +14,7 @@ const resolve = (...args: string[]) => path.resolve(__dirname, '..', ...args)
 
 export default defineConfig({
   projectName: 'taro-vue3-zhihudaily',
-  date: '2022-5-21',
+  date: '2024-2-1',
   designWidth: 750,
   deviceRatio: {
     640: 2.34 / 2,
@@ -31,9 +24,9 @@ export default defineConfig({
   },
   sourceRoot: 'src',
   outputRoot: 'dist',
-  plugins: ['@tarojs/plugin-html', 'taro-plugin-pinia'],
+  plugins: ['@tarojs/plugin-html'],
   compiler: {
-    type: 'webpack5',
+    type: 'vite',
     prebundle: {
       enable: false,
       exclude: ['@nutui/nutui-taro', '@nutui/icons-vue-taro'],
@@ -80,9 +73,6 @@ export default defineConfig({
         },
       },
     },
-    webpackChain(chain) {
-      chain.resolve.plugin('tsconfig-paths').use(TsconfigPathsPlugin)
-    },
     sassLoaderOption: {
       sassOptions: {
         silenceDeprecations: ['import'],
@@ -99,8 +89,5 @@ export default defineConfig({
         config: {},
       },
     },
-    webpackChain(chain) {
-      chain.resolve.plugin('tsconfig-paths').use(TsconfigPathsPlugin)
-    },
   },
 })

package.json

@@ -48,8 +48,9 @@
     "@tarojs/plugin-platform-weapp": "catalog:",
     "@tarojs/router": "catalog:",
     "@tarojs/shared": "catalog:",
-    "@tarojs/webpack5-runner": "catalog:",
-    "@types/webpack-env": "^1.18.8",
+    "@tarojs/vite-runner": "catalog:",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vitejs/plugin-vue-jsx": "^3.1.0",
     "@vue/babel-plugin-jsx": "^1.2.5",
     "@vue/compiler-sfc": "^3.5.13",
     "babel-preset-taro": "catalog:",
@@ -63,16 +64,26 @@
     "tsconfig-paths-webpack-plugin": "^4.2.0",
     "typescript": "^5.7.3",
     "unplugin-vue-components": "^28.4.0",
+    "vite": "^4.5.9",
     "vue-loader": "^17.4.2",
     "vue-tsc": "^2.2.4",
     "webpack": "^5.98.0"
   },
+  "pnpm": {
+    "onlyBuiltDependencies": [
+      "@parcel/watcher",
+      "@swc/core",
+      "@tarojs/binding",
+      "core-js",
+      "core-js-pure",
+      "esbuild"
+    ]
+  },
   "nano-staged": {
-    "*.{js,ts,cjs,mjs,vue,yml,yaml,md,json}": "eslint --fix"
+    "*.{js,ts,cjs,mjs,vue,md,yml,yaml,json}": "eslint --fix"
   },
   "browserslist": [
-    "last 3 versions",
-    "Android >= 4.1",
-    "ios >= 8"
+    "defaults and fully supports es6-module",
+    "maintained node versions"
   ]
 }

pnpm-workspace.yaml

@@ -9,7 +9,7 @@ catalog:
   '@tarojs/runtime': ^4.0.9
   '@tarojs/shared': ^4.0.9
   '@tarojs/taro': ^4.0.9
-  '@tarojs/webpack5-runner': ^4.0.9
+  '@tarojs/vite-runner': ^4.0.9
   babel-preset-taro: ^4.0.9
 packages:
   - .

project.config.json

@@ -5,7 +5,9 @@
   "appid": "wx9d6b29dabbb43222",
   "setting": {
     "urlCheck": true,
-    "es6": true,
+    "es6": false,
+    "enhance": false,
+    "compileHotReLoad": false,
     "postcss": false,
     "minified": true
   },

src/components/PosterBuilder/index.vue

@@ -2,7 +2,13 @@
 import Taro from '@tarojs/taro'
 import { defineComponent, onMounted, ref } from 'vue'
 import { drawBlock, drawImage, drawLine, drawText } from './utils/draw'
-import { getImageInfo, getLinearColor, getRandomId, toPx, toRpx } from './utils/tools'
+import {
+  getImageInfo,
+  getLinearColor,
+  getRandomId,
+  toPx,
+  toRpx,
+} from './utils/tools'
 import type { PropType } from 'vue'
 import type { DrawConfig, Image } from './utils/types'
 

src/components/PosterBuilder/utils/draw.ts

@@ -15,7 +15,10 @@ import type {
  * ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise(是否逆时针画弧))
  * ctx.arcTo(x1, y1, x2, y2, radius); // 当前点-x1点 画切线 x1点到x2点画切线， 用半径为radius的圆弧替换掉切线部分
  */
-export function _drawRadiusRect(config: DrawRadiusRectConfig, { ctx }: DrawOptions) {
+export function _drawRadiusRect(
+  config: DrawRadiusRectConfig,
+  { ctx }: DrawOptions,
+) {
   let { x, y, w, h, r } = config
 
   const minSize = Math.min(w, h)
@@ -36,7 +39,10 @@ export function _drawRadiusRect(config: DrawRadiusRectConfig, { ctx }: DrawOptio
 /**
  * 绘制圆角矩形
  */
-export function _drawRadiusGroupRect(config: DrawRadiusGroupRectConfig, { ctx }: DrawOptions) {
+export function _drawRadiusGroupRect(
+  config: DrawRadiusGroupRectConfig,
+  { ctx }: DrawOptions,
+) {
   const { x, y, w, h, g } = config
   const [
     borderTopLeftRadius,
@@ -91,7 +97,10 @@ export function _drawRadiusGroupRect(config: DrawRadiusGroupRectConfig, { ctx }:
 /**
  * 计算文本长度
  */
-export function _getTextWidth(text: DrawTextData | DrawTextData[], drawOptions: DrawOptions) {
+export function _getTextWidth(
+  text: DrawTextData | DrawTextData[],
+  drawOptions: DrawOptions,
+) {
   const { ctx } = drawOptions
   let texts: any[] = []
   if (Array.isArray(text)) {
@@ -169,7 +178,10 @@ export function _drawSingleText(data: DrawTextData, drawOptions: DrawOptions) {
         // 如果拼接下一个字就超出宽度则添加者省略号或者换行
         if (line === lineNum) {
           // 已经是最后一行，就拼接省略号
-          if (restWidth + ctx.measureText(text[i + 1]).width > ctx.measureText('...').width) {
+          if (
+            restWidth + ctx.measureText(text[i + 1]).width
+            > ctx.measureText('...').width
+          ) {
             // 剩余宽度能否放下省略号
             fillText = `${fillText}...`
           } else {
@@ -293,7 +305,10 @@ export function drawBlock(data: DrawBlockData, drawOptions: DrawOptions) {
   // 渲染块内文字
   if (text) {
     // 如果文字宽度超出块宽度，则块的宽度为：文字的宽度 + 内边距
-    const textWidth = _getTextWidth(typeof text.text === 'string' ? text : text.text, drawOptions)
+    const textWidth = _getTextWidth(
+      typeof text.text === 'string' ? text : text.text,
+      drawOptions,
+    )
     blockWidth = Math.max(textWidth, width)
     blockWidth += paddingLeft + paddingLeft
 

src/components/PosterBuilder/utils/tools.ts

@@ -104,15 +104,17 @@ export const getFactor = () => {
  * @param factor - 转化因子
  * @returns px
  */
-export const toPx = (rpx: number, factor = getFactor()) => Number.parseInt(String(rpx * factor), 10)
+export const toPx = (rpx: number, factor = getFactor()) =>
+  Number.parseInt(String(rpx * factor), 10)
 
 /**
  * px => rpx 单位转换
  * @param px - 需要转换的数值
  * @param factor - 转化因子
  * @returns rpx
  */
-export const toRpx = (px: number, factor = getFactor()) => Number.parseInt(String(px / factor), 10)
+export const toRpx = (px: number, factor = getFactor()) =>
+  Number.parseInt(String(px / factor), 10)
 
 /**
  * 下载图片资源
@@ -203,10 +205,10 @@ export function getLinearColor(
   h: number,
 ) {
   if (
-    typeof startX !== 'number' ||
-    typeof startY !== 'number' ||
-    typeof w !== 'number' ||
-    typeof h !== 'number'
+    typeof startX !== 'number'
+    || typeof startY !== 'number'
+    || typeof w !== 'number'
+    || typeof h !== 'number'
   ) {
     console.warn('坐标或者宽高只支持数字')
     return color

src/index.html

@@ -10,7 +10,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
     <title></title>
     <script>
-      /* 以下为 H5 响应式脚本，请不要删除！ */
+      /* 以下为 H5 响应式脚本，请不要删除！*/
       /* prettier-ignore */
       !function(x){function w(){var v,u,t,tes,s=x.document,r=s.documentElement,a=r.getBoundingClientRect().width;if(!v&&!u){var n=!!x.navigator.appVersion.match(/AppleWebKit.*Mobile.*/);v=x.devicePixelRatio;tes=x.devicePixelRatio;v=n?v:1,u=1/v}if(a>=640){r.style.fontSize="40px"}else{if(a<=320){r.style.fontSize="20px"}else{r.style.fontSize=a/320*20+"px"}}}x.addEventListener("resize",function(){w()});w()}(window);
     </script>

src/packages/user/favorite/index.vue

@@ -29,7 +29,9 @@ const goHome = () => {
       class="favorite-list"
     >
       <view class="favorite-list-count">
-        <text class="count-text"> 共计 {{ favoriteStore.list.length }} 篇收藏 </text>
+        <text class="count-text">
+          共计 {{ favoriteStore.list.length }} 篇收藏
+        </text>
         <nut-button
           @tap="clearFaveriteList"
           class="count-clear-btn"

src/packages/user/thank/index.vue

@@ -9,7 +9,9 @@ const onCopyLink = async (link: string) => {
 
 <template>
   <div class="page-thank">
-    <nut-noticebar :close-mode="true"> 点击链接，即可复制 URL 至浏览器中打开。 </nut-noticebar>
+    <nut-noticebar :close-mode="true">
+      点击链接，即可复制 URL 至浏览器中打开。
+    </nut-noticebar>
     <view class="card">
       感谢
       <text

src/pages/detail/index.vue

@@ -40,9 +40,9 @@ const posterConfig = ref<DrawConfig>(INIT_DRAW_CONFIG)
 const favoriteStore = useFavoriteStore()
 const shouldRenderPoster = computed(
   () =>
-    posterConfig.value.blocks?.length ||
-    posterConfig.value.images?.length ||
-    posterConfig.value.texts?.length,
+    posterConfig.value.blocks?.length
+    || posterConfig.value.images?.length
+    || posterConfig.value.texts?.length,
 )
 
 const fetchNewsDetail = async (id: string) => {

src/utils/index.ts

@@ -9,12 +9,15 @@ export function formatTime(
   date: dayjs.ConfigType,
   { isUnix = false, format = 'YYYY-MM-DD HH:mm:ss' } = {},
 ) {
-  return isUnix ? dayjs.unix(date as number).format(format) : dayjs(date).format(format)
+  return isUnix
+    ? dayjs.unix(date as number).format(format)
+    : dayjs(date).format(format)
 }
 
 /**
  * Check if given object is empty
  * @param obj - object to be checked
  * @returns `true` if the object is empty
  */
-export const isEmptyObject = (obj: Record<string, any>) => Object.keys(obj).length > 0
+export const isEmptyObject = (obj: Record<string, any>) =>
+  Object.keys(obj).length > 0

src/utils/translators.ts

@@ -12,14 +12,16 @@ export function getMatchedString(matches: string[] | null) {
 }
 
 // ([\s\S]*?) 可以匹配换行等字符，(.*?) 是不可以的
-export const RE_QUESTION = /<div class="question">([\S\s]*?)<\/a>(\n*)<\/div>(\n*)<\/div>/g
+export const RE_QUESTION =
+  /<div class="question">([\S\s]*?)<\/a>(\n*)<\/div>(\n*)<\/div>/g
 export const RE_TITLE = /<h2.*?<\/h2>/g
 export const RE_ANSWER = /<div class="answer">([\S\s]*?)<\/div>(\n*)<\/div>/g
 export const RE_AVATAR = /<img class="avatar"(.*?).((jpe?g)|(png))([\S\s]*?)">/g
 export const RE_AUTHOR = /<span class="author">(.*?)<\/span>/g
 export const RE_BIO = /<span class="bio">(.*?)<\/span>/g
 // TODO 正文，段落列表，需要添加兼容性，p标签是段落正文，figure 标签有可能内嵌图片信息
-export const RE_CONTENT = /(<p>|<figure>|<ul>|<ol>)([\S\s]*?)(<\/p>|<\/figure>|<\/ul>|<\/ol>)/g
+export const RE_CONTENT =
+  /(<p>|<figure>|<ul>|<ol>)([\S\s]*?)(<\/p>|<\/figure>|<\/ul>|<\/ol>)/g
 export const RE_IMAGE = /<img.*?>/i
 export const RE_OL = /<ol.*?>([\S\s]*?)<\/ol>/i
 export const RE_UL = /<ul.*?>([\S\s]*?)<\/ul>/i
@@ -30,7 +32,9 @@ export function normalizeStory(html: string) {
   const images: string[] = []
   const questions: Question[] = []
   const questionHtmlList = html.match(RE_QUESTION)
-  if (!questionHtmlList || questionHtmlList.length === 0) return { images, questions }
+  if (!questionHtmlList || questionHtmlList.length === 0) {
+    return { images, questions }
+  }
 
   questionHtmlList.forEach(question => {
     const titleHtml = getMatchedString(question.match(RE_TITLE))
@@ -50,7 +54,9 @@ export function normalizeStory(html: string) {
         const hasList = RE_OL.test(content) || RE_UL.test(content)
         const temp = { type: '', content: '' }
         if (hasImage) {
-          const tempContentHtml = getMatchedString(content.match(RE_IMAGE_SOURCE))
+          const tempContentHtml = getMatchedString(
+            content.match(RE_IMAGE_SOURCE),
+          )
           const imageSrc = tempContentHtml.slice(5, -1)
           temp.content = imageSrc
           temp.type = 'IMAGE'

types/global.d.ts

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