Taro开放式跨端跨框架环境安装及使用

Taro 是一个开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发 微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ 小程序 / H5 / RN 等应用。

支持多端转换
Taro 3 可以支持转换到 H5、ReactNative 以及任意小程序平台。

目前官方支持转换的平台如下:

H5
ReactNative
微信小程序
京东小程序
百度小程序
支付宝小程序
字节跳动小程序
QQ 小程序
钉钉小程序
企业微信小程序
支付宝 IOT 小程序

安装及使用

本文以 Windows 10系统、node v14.17.5 版本、npm 6.14.14 版本、git 2.23.0 版本为例。
请注意
值得一提的是,如果安装过程出现sass相关的安装错误,请在安装 mirror-config-china 后重试。
$ npm install -g mirror-config-china

Taro 项目基于 node,请确保已具备较新的 node 环境(>=12.0.0),推荐使用 node 版本管理工具 nvm 来管理 node,这样不仅可以很方便地切换 node 版本,而且全局安装时候也不用加 sudo 了。

CLI 工具安装#
首先,你需要使用 npm 或者 yarn 全局安装 @tarojs/cli,或者直接使用 npx:

# 使用 npm 安装 CLI
$ npm install -g @tarojs/cli

# OR 使用 yarn 安装 CLI
$ yarn global add @tarojs/cli

# OR 安装了 cnpm,使用 cnpm 安装 CLI
$ cnpm install -g @tarojs/cli

查看 Taro 全部版本信息#
可以使用 npm info 查看 Taro 版本信息,在这里你可以看到当前最新版本

$ npm info @tarojs/cli

项目初始化#
使用命令创建模板项目:
$ taro init myApp

或者,npm 5.2+ 也可在不全局安装的情况下使用 npx 创建模板项目:
$ npx @tarojs/cli init myApp

E:\Taro>taro init myApp
👽 Taro v3.3.3

Taro 即将创建一个新项目!
Need help? Go and open issue: https://tls.jd.com/taro-issue-helper

? 请输入项目介绍! HelloWorld
? 请选择框架 React
? 是否需要使用 TypeScript ? Yes
? 请选择 CSS 预处理器(Sass/Less/Stylus) Sass
? 请选择模板源 Gitee(最快)
√ 拉取远程模板仓库成功!
? 请选择模板 默认模板

✔ 创建项目: myApp
✔ 创建文件: myApp\.npmrc
✔ 创建文件: E:\Taro\myApp\babel.config.js
✔ 创建文件: E:\Taro\myApp\global.d.ts
✔ 创建文件: E:\Taro\myApp\package.json
✔ 创建文件: E:\Taro\myApp\project.config.json
✔ 创建文件: E:\Taro\myApp\project.tt.json
✔ 创建文件: E:\Taro\myApp\tsconfig.json
✔ 创建文件: E:\Taro\myApp\.editorconfig
✔ 创建文件: E:\Taro\myApp\.eslintrc
✔ 创建文件: E:\Taro\myApp\.gitignore
✔ 创建文件: E:\Taro\myApp\config\dev.js
✔ 创建文件: E:\Taro\myApp\config\index.js
✔ 创建文件: E:\Taro\myApp\config\prod.js
✔ 创建文件: E:\Taro\myApp\src\app.config.ts
✔ 创建文件: E:\Taro\myApp\src\app.scss
✔ 创建文件: E:\Taro\myApp\src\app.ts
✔ 创建文件: E:\Taro\myApp\src\index.html
✔ 创建文件: E:\Taro\myApp\src\pages\index\index.config.ts
✔ 创建文件: E:\Taro\myApp\src\pages\index\index.scss
✔ 创建文件: E:\Taro\myApp\src\pages\index\index.tsx

√ cd myApp, 执行 git init
- 执行安装项目依赖 npm install, 需要一会儿...

在创建完项目之后,Taro 会默认开始安装项目所需要的依赖,安装使用的工具按照 yarn > cnpm > npm 顺序进行检测。一般来说,依赖安装会比较顺利,但某些情况下可能会安装失败,这时候你可以在项目目录下自己使用安装命令进行安装:

# 进入项目根目录
$ cd myApp

# 使用 yarn 安装依赖
$ yarn

# OR 使用 cnpm 安装依赖
$ cnpm install

# OR 使用 npm 安装依赖
$ npm install

常见问题#
保持 CLI 的版本与各端依赖版本一致#
在使用 Taro 进行多端开发中,请保持 Taro CLI 的版本与你项目的依赖版本一致,否则可能会出现编译错误或者运行时错误。

如果发现不一致的情况可以使用 Taro 升级命令 taro update self [版本号] 和 taro update project [版本号]来分别将 CLI 和项目依赖升级到指定版本; 或者也可以手动安装相应版本 CLI,修改 package.json 依赖版本号,然后重装依赖来解决。

# 使用Taro 升级命令更新CLI版本到最新版本
$ taro update self [版本号]
# 使用Taro 升级命令更新CLI版本到指定版本
$ taro update self
# 使用Taro 升级命令将项目依赖升级到与@tarojs/cli一致的版本
$ taro update project
# 使用Taro 升级命令将项目依赖升级到指定版本
$ taro update project [版本号]
如果你所使用的 Taro CLI 版本为 3.0.9,而项目里使用的依赖版本为 3.0.10,则有可能会出现问题,这时请将你的 Taro CLI 版本更新至项目依赖版本号相同的版本,如果还是出现问题,请向我们提出 Issue。

Taro 多版本共存问题#
很多开发者曾经使用 Taro 旧版本开发过项目,已经在全局安装了 Taro,但是想同时体验到 Taro 3,应该如何进行操作?

我们提供了两种思路:

如果是需要新创建 Taro 3 项目,可以使用 nvm 来管理 node 版本,通过安装不同 node 版本来安装不同版本的 Taro CLI,从而解决 Taro 多版本共存的问题
如果是部分已有项目需要升级到 Taro 3,可以在这些项目本地安装相应版本的 Taro CLI,这样通过 yarn 或者 npm 执行命令的话就会直接使用本地安装的 Taro CLI,安装方式 yarn add @tarojs/cli

回到某个版本#
需要安装某个固定版本,或者回到某个版本,例如我们要安装 1.3.9 , 则如下:

# 使用 npm 安装 CLI
$ npm install -g @tarojs/cli@1.3.9
# OR 使用 yarn 安装 CLI
$ yarn global add @tarojs/cli@1.3.9
# OR 安装了 cnpm,使用 cnpm 安装 CLI
$ cnpm install -g @tarojs/cli@1.3.9

转载请注明出处:https://www.onexin.net/taro-installation-and-use/

相关文章:

1、Taro 架构编译时和运行时
https://www.onexin.net/taro-complier-and-runtime/

2、Taro 编译分为 dev 和 build 模式
https://www.onexin.net/taro-dev-build/

Leave a Reply