1. Taro简介 2. 环境搭建 3. 项目搭建 4. 编译调试微信小程序 5. Taro项目结构分析 6. Yarn命令详解 7. 解决问题:版本问题 Taro CLI 与本地安装的小程序框架 @tarojs/taro-weapp 版本不一致
1. Taro简介
Taro是一个前端小程序框架,通过这个框架写一套代码,再通过 Taro 的编译工具,就可以将源代码分别编译出可以在不同端(微信/百度/支付宝/字节跳动小程序、H5、React-Native 等)运行的代码,[Taro官网](https://nervjs.github.io/taro/docs/README.html) 2. 环境搭建
Taro的环境搭建要求更新node到最新版本,所以先老老实实的更新node吧 2.1) 先查看下自己的编译环境node的版本号 node -v
随后会显示当前node的版本号,在很多方法中会让你通过npm n模块来更新node(n模块用来管理node),但是你试过之后,你会发现坑真多,最粗暴的方案就是在node官网下载最新msi进行覆盖安装即可,通过如下命令查看本机node的安装位置
where node
随后他会显示出本机node的安装位置,当你下载完最新的msi之后,就在这个位置覆盖安装即可;
2.2) 依次执行如下命令进行Taro环境搭建
npm config set registry http://registry.npm.taobao.org/ npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/ cnpm install -g @tarojs/cli
第一个命令是使用npm的淘宝镜像, 第二个命令是配置node-sass为淘宝镜像 第三个命令是使用cnpm全局安装taro,将会生成一个taro 命令。taro-cli 包位于 Taro 工程的 packages 目录下,主要负责项目初始化、编译、构建等
安装完成之后通过如下命令查看taro是否安装完毕
taro -V
如果安装没有问题会显示如下
2.3) 配置环境遇到如下错误如何处理
C:\Users\Administrator\AppData\Roaming\npm\node_modules\@tarojs\cli\src\util\index.js:227 exports.replaceAsync = async function (str, regex, asyncFn) { ^^^^^^^^
SyntaxError: Unexpected token function at createScript (vm.js:56:10) at Object.runInThisContext (vm.js:97:10) at Module._compile (module.js:542:28) at Object.Module._extensions..js (module.js:579:10) at Module.load (module.js:487:32) at tryModuleLoad (module.js:446:12) at Function.Module._load (module.js:438:3) at Module.require (module.js:497:17) at require (internal/module.js:20:19) at Object.<anonymous> (C:\Users\Administrator\AppData\Roaming\npm\node_modules\@tarojs\cli\bin\taro:4:44) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 恭喜你,这就是node版本不是最新的导致的,更新node吧
3. 项目搭建
通过如下命令搭建项目 taro init taro-learning-pro
这里新建了一个名字叫taro-learning-pro的项目(在创建项目的时候,项目名最好不要包含大写字母…),在输入上述命令之后,按照提示一步一步操作
紧接着,项目会下载对应的依赖,当依赖下载完成之后,会有如下提示
此时一个使用默认模板创建的项目就创建好了,目录结构如下,使用不同的模板生成的项目目录会有一些小小的差别
当项目创建好之后,我们就可以编译调试小程序了,此处以生成微信小程序为例
4. 编译调试微信小程序
4.1)在命令行中输入如下命令 npm run dev:weapp
该命令会编译项目代码,并在dist目录生成目标文件,结果如下
此时已经说明微信小程序目标文件已经生成到dist目录
4.2)下载微信开发者工具 微信开发者工具官网
下载之后进行安装
使用微信扫码登录之后,选择小程序项目
然后选择项目目录中的dist文件夹
点击确定即可,因为taro一直在监听你的文件变化,顾如果文件发生变化,微信小程序工具界面也会发生变化
5. Taro项目结构分析
从上图可知,app.tsx是Taro项目入口文件,项目使用yarn工具来进行包管理,yarn的作用是代替npm的js包管理工具,至于为什么用yarn而不用npm,这里就不计较了;
6. Yarn命令详解
全局安装yarn工具: cnpm install -g yarn
添加一个依赖,通过 yarn add 添加依赖会更新 package.json 以及 yarn.lock 文件 yarn add [packageName] yarn add [packageName] --dev 依赖会记录在 package.json 的 devDependencies 下
更新依赖 yarn upgrade 也可以更新指定的依赖 yarn upgrade [packageName]
移除一个依赖 yarn remove [packageName]
安装 package.json 中的所有文件 yarn 或者 yarn install
7. 解决问题:版本问题 Taro CLI 与本地安装的小程序框架 @tarojs/taro-weapp 版本不一致,请确保一致
多人协同开发的时候,特别是小组有新成员加入,新人需要自己搭建编译环境,但是由于项目是在早期建立的,所以会造成开发版本和新人新建的开发环境不一致的问题 例如,一个项目在早期使用Taro CLI: 1.2.2进行了创建,也使用Taro CLI1.2.2下载了各种依赖,但是新人在加入项目的时候,Taro已经更新到1.2.4,所以在执行npm run dev:weapp的时候,就会提示版本不一致,根本原因就是依赖文件和Taro CLI版本不一致所致,所有我们需要更新两个地方 1: 更新yarn.lock 2: 更新package.json
更新yarn.lock:
cnpm install -g yarn yarn
更新package.json:
npm install -g npm-check-updates ncu -u
通过上述命令,即可完成yarn.lock文件和package.json文件的依赖库更新
点赞 4
———————————————— 版权声明:本文为CSDN博主「yi_master」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。 原文链接:https://blog.csdn.net/yi_master/article/details/86009294
|
请发表评论