![Taro多端开发权威指南:小程序、H5与App高效开发实战](https://wfqqreader-1252317822.image.myqcloud.com/cover/719/38209719/b_38209719.jpg)
1.3 开发环境及工具介绍
Taro项目开发依赖Node.js环境,并且要求Node.js版本高于8.0.0,Taro允许使用大多npm中的库,支持更友好的第三方依赖管理。如果你刚接触Taro,那么推荐使用Taro提供的脚手架工具创建项目,同时该工具提供了很多功能,譬如诊断依赖、创建模块、更新包、打包构建等。我们就从安装Taro脚手架开始吧!
1.3.1 安装Taro脚手架工具
你可以选用npm或者Yarn全局安装@tarojs/cli,或者使用npx。不过由于Node.js版本限制等问题,推荐使用nvm这一工具来管理Node.js版本。
使用npm全局安装Taro脚手架:
![](https://epubservercos.yuewen.com/D79B16/20118172101010406/epubprivate/OEBPS/Images/40906_33_1.jpg?sign=1739280286-BeKpZrMBcbcT8wRb6it72DMjFKq2sSqM-0-5d534b7079aad678d66777387f1e4adb)
使用Yarn全局安装Taro脚手架:
![](https://epubservercos.yuewen.com/D79B16/20118172101010406/epubprivate/OEBPS/Images/40906_33_2.jpg?sign=1739280286-c51EtVybBvm1QftOL95HlAJ4Oex8lvaQ-0-33db08f32c3c5dbf6ab7545af5813992)
安装过程可能会提示Sass相关依赖安装错误,这时请终止,然后手动安装mirror-config-china后重试。安装命令如下:
![](https://epubservercos.yuewen.com/D79B16/20118172101010406/epubprivate/OEBPS/Images/40906_33_3.jpg?sign=1739280286-FtsvTgqhut9IBQ6TmZRZ1FFE22soT4SZ-0-3f95e2d3f5cfeb32cfca730cb2e98a03)
1.3.2 初始化项目
上一节已经成功安装Taro脚手架工具,现在只需一行命令就能创建出基础Taro项目了,命令如下:
![](https://epubservercos.yuewen.com/D79B16/20118172101010406/epubprivate/OEBPS/Images/40906_33_4.jpg?sign=1739280286-nPsdO1Li3cA8OVf9hAvWoLnVXyom5Ok8-0-8f13b6669bef09d2fa0adbcbcd628bec)
如果你的npm版本大于5.2,则可以直接使用npx创建项目:
![](https://epubservercos.yuewen.com/D79B16/20118172101010406/epubprivate/OEBPS/Images/40906_33_5.jpg?sign=1739280286-8yCY9exmPMrtOHNaJMDwlazgMafGKWht-0-bedf66729e9e6c8e38b3f689745f434e)
项目模板及相关配置文件创建完成以后,Taro会自动安装项目中所需要的相关依赖。为了提升安装速度,Taro内部会为我们按照Yarn、cnpm、npm的顺序检测并选择更快的方式去安装依赖。如果在依赖安装过程中出现错误导致安装终止,则可以进入项目的根目录尝试手动安装。
1.3.3 运行项目
Taro开发环境的启动命令较多,分别对应不同端的代码编译与调试,但是为了更方便记忆与语义化,Taro定义了相对一致的开发环境启动命令,以npm运行命令为例,如下表所示。
![](https://epubservercos.yuewen.com/D79B16/20118172101010406/epubprivate/OEBPS/Images/40906_34_1.jpg?sign=1739280286-JPT5VFU6HyqeTWtQtnKKMVe5UR20CZym-0-1f7f8a7cc6b8c4d53174cc62785a7278)
通过以上命令,可以将Taro项目编译为不同端开发环境的代码。这时,只需要使用各端(除了H5)对应的开发工具,打开编译生成的项目文件,即可预览调试。以微信小程序为例:
(1)运行针对微信小程序的编译命令:npm run dev:weapp。
(2)使用微信小程序开发工具,打开该项目目录下的dist文件夹,即可在微信小程序开发者工具中进行预览与调试。
如果你需要同时调试预览多端应用,则需要修改项目下的config/index.js文件,配置outputRoot参数:
![](https://epubservercos.yuewen.com/D79B16/20118172101010406/epubprivate/OEBPS/Images/40906_34_2.jpg?sign=1739280286-2xoPhKCXNvc5XOnLUY8CgBi62Lg97kf7-0-9ab5671f23204d1ae383c3f3a3e893f4)
注:Taro 1.3.5+支持该配置,请确保项目中各端打包与编译相关的依赖版本和@tarojs/cli版本一致。
1.3.4 打包项目
Taro的打包命令同样有多个,也分别对应不同端的线上环境代码生成。为了方便记忆与语义化,Taro定义了相对一致的打包线上环境的代码命令,以npm为例,如下表所示。
![](https://epubservercos.yuewen.com/D79B16/20118172101010406/epubprivate/OEBPS/Images/40906_35_1.jpg?sign=1739280286-T3JmRNvyGwpO7pulZkTiLP7MMvAqDHrB-0-9a3766b46607650d9852462e1b38c3c2)
通过以上命令,可以将Taro项目编译为不同端线上环境的代码,这时只需要使用各端(除了H5)对应的开发工具发布项目即可。打包生成线上环境的代码相较运行本地开发环境的代码,做了更多优化相关的处理,例如JavaScript代码压缩丑化等。
1.3.5 Taro脚手架命令
Taro脚手架提供了很多功能辅助我们开发,可使用taro--help查看Taro脚手架工具的相关提示。这里给大家讲解开发过程中常使用的几个命令,更多命令可前往Taro官网查看学习。
1.更新——update
该命令用来更新项目中的Taro相关依赖或者更新自身的脚手架工具。
更新项目依赖:
![](https://epubservercos.yuewen.com/D79B16/20118172101010406/epubprivate/OEBPS/Images/40906_36_1.jpg?sign=1739280286-A2GlC5QqfEuSTwnMEyl8lf4hAaSV18YS-0-7a24b8d4b9c9e80dffc496311a1c2019)
如果用以上方法更新项目依赖失败,则可尝试修改package.json文件指定对应的依赖版本,然后使用npm或Yarn手动安装。
更新脚手架:
![](https://epubservercos.yuewen.com/D79B16/20118172101010406/epubprivate/OEBPS/Images/40906_36_2.jpg?sign=1739280286-wmXfJfI0ERhKvwtdSGfsNr1QeYzdzs0G-0-f14ee48538644baee35dd0cb8c07f141)
注:以上[version]为选填项,通过执行对应的版本号,安装或更新至对应的版本。
2.环境及依赖信息——info
该命令用来检测Taro环境及依赖的版本等信息,从而方便开发者查看项目环境及依赖,更便捷地排查因开发环境引起的问题。用法如下:
![](https://epubservercos.yuewen.com/D79B16/20118172101010406/epubprivate/OEBPS/Images/40906_36_3.jpg?sign=1739280286-adSWYqJw7wPDKdECPucPegT4HX0f7xeJ-0-bd054c3172abdaef4c7d19ca47f653f0)
命令执行完毕,会打印出项目的相关信息,示例如下:
![](https://epubservercos.yuewen.com/D79B16/20118172101010406/epubprivate/OEBPS/Images/40906_36_4.jpg?sign=1739280286-UeTkOhec870NAfxKmoEuFlVc1hpu0DUy-0-70ac6de481ef26ae51ba842e2c5e880a)
![](https://epubservercos.yuewen.com/D79B16/20118172101010406/epubprivate/OEBPS/Images/40906_37_1.jpg?sign=1739280286-nZjPHzlcMLxrz99tehuWiV6r5LJCdC8g-0-5df049db89081a6d2972bee8fbd2831d)
这样一来,我们可以发现当前使用的Taro脚手架工具版本为2.2.4。但项目中的依赖版本却是2.1.6,此时需要更新项目依赖,以保证与Taro脚手架工具版本一致,更新命令为:
![](https://epubservercos.yuewen.com/D79B16/20118172101010406/epubprivate/OEBPS/Images/40906_37_2.jpg?sign=1739280286-UkSbniI5TAnDQV1Kd4uctWe5BKHEXT3L-0-c89d7af03ff75d6e3c9df931b59f7aa9)
3.项目诊断——doctor
该命令可以诊断项目的依赖、设置、结构及代码的规范是否存在问题,诊断结束后会尝试给出对应问题的解决方案。使用示例如下:
![](https://epubservercos.yuewen.com/D79B16/20118172101010406/epubprivate/OEBPS/Images/40906_37_3.jpg?sign=1739280286-TkVmLtUMelOwpoD5XBO4P7EPXAtR0J6p-0-d30142f9c35416eb92afd8e8d1e887b1)