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