Taro4 默认脚手架 Demo 选择 Npm+Vite+Vue3 无法正常运行的 Bug 解决方案

简单概述

先说结论，如果你遇到了使用Taro4 无法正常运行的情况（甚至是基础 Demo 都不行），请使用 yarn+webpack 进行依赖包管理和打包，目前这个还是官方主流维护的，还可以正常使用。

我一开始尝试使用 npm+vite+vue3 配置进行开发，但是很不幸，npm 安装依赖的时候会出现依赖包冲突的情况，所以请使用 yarn+webpack 进行开发。

因此本文主要讲解在选择 yarn+webpack 进行 Demo 运行的过程中遇到的几个核心问题及其解决方案, 一一解决后，可以正常运行 Taro4 的 Demo 了（终于！！）。

1. Babel 报错：找不到 @babel/plugin-proposal-class-properties
2. Vite 和 Vue 3 项目中的依赖包冲突
3. Taro 报错：taro.defineComponent is not a function

---

1. Babel 报错：找不到 @babel/plugin-proposal-class-properties

问题描述

在使用 yarn dev:weapp 进行项目编译的时候，遇到如下错误信息：

Error: [BABEL] /myApp/node_modules/@tarojs/runtime/dist/index.js: 
Cannot find module '@babel/plugin-proposal-class-properties'

这个问题通常是由于缺少相应的 Babel 插件造成的（我也不知道为啥官方一条龙插件装完居然会缺东西，反正主打一个很烦），不过问题不大，我们可以通过安装对应插件来解决它！

解决方案

1. 安装缺失插件：
   我们通过 yarn 安装缺失的该插件。

   yarn add -D @babel/plugin-proposal-class-properties
   

2. 安装或更新其他可能缺失的 Babel 相关依赖：
   继续通过 yarn 安装其他可能缺失的插件。

   yarn add -D @babel/core @babel/preset-env @babel/preset-react babel-loader
   

3. 清理项目并重新安装依赖：

   rm -rf node_modules
   yarn cache clean
   yarn install
   

4. 重新运行：

   yarn dev:weapp
   

---

2. Vite 和 Vue 3 项目中的依赖包冲突

问题描述

尽管我选择了 yarn, 但是如果选择 vite+Vue 3 开发项目，发现每次安装依赖包时总是出现版本冲突的错误，导致无法成功初始化项目。

解决方案

1. 更换为webpack：

   我知道vite进行打包速度更快，但是 webpack 能正常使用…

---

3. 运行报错：taro.defineComponent is not a function

问题描述

成功初始化项目并调用 yarn dev:wxapp 运行项目后，使用微信开发者工具打开该项目根目录的时候，发现项目无法正常显示，调试台显示如下错误：

TypeError: taro.defineComponent is not a function

这通常是由于你在创建项目的时候可能使用了 sudo 权限进行创建，导致微信开发者工具没有权限打开目录文件（因为你使用的本机用户）。

解决方案

1. 清除缓存和依赖包：

   yarn cache clean
   rm -rf node_modules yarn.lock
   

2. 重新使用当前用户安装依赖包：
   重新安装依赖包，保证依赖包的权限为当前用户。

   yarn install
   

3. 重新运行项目：

   yarn dev:wxapp
   

---

结语

一顿折腾，Taro4 的官方 Demo 终于正常使用了，核心就是请使用 yarn+webpack 进行依赖包管理和打包，目前这个因为官方主流维护的，还可以正常使用！