taro-安裝及使用-npm

安裝

Taro 項目基於 node，請確保已具備較新的 node 環境（>=8.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

回到某個版本

需要安裝某個固定版本，或者回到某個版本，例如我們要安裝 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

注意事項

值得一提的是，如果安裝過程出現sass相關的安裝錯誤，請在安裝mirror-config-china后重試。

$ npm install -g mirror-config-china

使用

使用命令創建模板項目

$ taro init myApp

npm 5.2+ 也可在不全局安裝的情況下使用 npx 創建模板項目

$ npx @tarojs/cli init myApp

taro init myApp command screenshot

在創建完項目之后，Taro 會默認開始安裝項目所需要的依賴，安裝使用的工具按照 yarn>cnpm>npm 順序進行檢測，一般來說，依賴安裝會比較順利，但某些情況下可能會安裝失敗，這時候你可以在項目目錄下自己使用安裝命令進行安裝

# 使用 yarn 安裝依賴 $ yarn # OR 使用 cnpm 安裝依賴 $ cnpm install # OR 使用 npm 安裝依賴 $ npm install

進入項目目錄開始開發，目前已經支持微信/百度/支付寶/字節跳動/QQ 小程序、H5、快應用以及 ReactNative 等端的代碼轉換，針對不同端的啟動以及預覽、打包方式並不一致

微信小程序

選擇微信小程序模式，需要自行下載並打開微信開發者工具，然后選擇項目根目錄進行預覽。

微信小程序編譯預覽及打包（去掉 --watch 將不會監聽文件修改，並會對代碼進行壓縮打包）

# yarn $ yarn dev:weapp $ yarn build:weapp # npm script $ npm run dev:weapp $ npm run build:weapp # 僅限全局安裝 $ taro build --type weapp --watch $ taro build --type weapp # npx 用戶也可以使用 $ npx taro build --type weapp --watch $ npx taro build --type weapp

百度小程序

選擇百度小程序模式，需要自行下載並打開百度開發者工具，然后在項目編譯完后選擇項目根目錄下 dist 目錄進行預覽。

百度小程序編譯預覽及打包（去掉 --watch 將不會監聽文件修改，並會對代碼進行壓縮打包）

# yarn $ yarn dev:swan $ yarn build:swan # npm script $ npm run dev:swan $ npm run build:swan # 僅限全局安裝 $ taro build --type swan --watch $ taro build --type swan # npx 用戶也可以使用 $ npx taro build --type swan --watch $ npx taro build --type swan

支付寶小程序

選擇支付寶小程序模式，需要自行下載並打開支付寶小程序開發者工具，然后在項目編譯完后選擇項目根目錄下 dist 目錄進行預覽。

支付寶小程序編譯預覽及打包（去掉 --watch 將不會監聽文件修改，並會對代碼進行壓縮打包）

# yarn $ yarn dev:alipay $ yarn build:alipay # npm script $ npm run dev:alipay $ npm run build:alipay # 僅限全局安裝 $ taro build --type alipay --watch $ taro build --type alipay # npx 用戶也可以使用 $ npx taro build --type alipay --watch $ npx taro build --type alipay

字節跳動小程序

選擇字節跳動小程序模式，需要自行下載並打開字節跳動小程序開發者工具，然后在項目編譯完后選擇項目根目錄下 dist 目錄進行預覽。

字節跳動小程序編譯預覽及打包（去掉 --watch 將不會監聽文件修改，並會對代碼進行壓縮打包）

# yarn $ yarn dev:tt $ yarn build:tt # npm script $ npm run dev:tt $ npm run build:tt # 僅限全局安裝 $ taro build --type tt --watch $ taro build --type tt # npx 用戶也可以使用 $ npx taro build --type tt --watch $ npx taro build --type tt

QQ 小程序

選擇 QQ 小程序模式，需要自行下載並打開QQ 小程序開發者工具，然后在項目編譯完后選擇項目根目錄下 dist 目錄進行預覽。

QQ 小程序編譯預覽及打包（去掉 --watch 將不會監聽文件修改，並會對代碼進行壓縮打包）

# yarn $ yarn dev:qq $ yarn build:qq # npm script $ npm run dev:qq $ npm run build:qq # 僅限全局安裝 $ taro build --type qq --watch $ taro build --type qq # npx 用戶也可以使用 $ npx taro build --type qq --watch $ npx taro build --type qq

快應用

選擇快應用模式，需要自行下載並打開快應用開發者工具，然后在項目編譯完后，在開發者工具中選擇「打開文件夾」選擇項目根目錄下 dist 目錄，點擊左邊的預覽圖標（那個眼睛圖標）進行預覽。

快應用編譯預覽及打包（去掉 --watch 將不會監聽文件修改，並會對代碼進行壓縮打包）

# yarn $ yarn dev:quickapp $ yarn build:quickapp # npm script $ npm run dev:quickapp $ npm run build:quickapp # 僅限全局安裝 $ taro build --type quickapp --watch $ taro build --type quickapp # npx 用戶也可以使用 $ npx taro build --type quickapp --watch $ npx taro build --type quickapp

快應用開發者工具如何使用？點擊了解

快應用端開發流程

H5

H5 模式，無需特定的開發者工具，在執行完下述命令之后即可通過瀏覽器進行預覽

H5 預覽項目

# yarn $ yarn dev:h5 # npm script $ npm run dev:h5 # 僅限全局安裝 $ taro build --type h5 --watch # npx 用戶也可以使用 $ npx taro build --type h5 --watch

H5 打包項目

# yarn $ yarn build:h5 # npm script $ npm run build:h5 # 僅限全局安裝 $ taro build --type h5 # npx 用戶也可以使用 $ npx taro build --type h5

React Native

React Native 端運行需執行如下命令，React Native 端相關的運行說明請參見 React Native 教程

# yarn $ yarn dev:rn # npm script $ npm run dev:rn # 僅限全局安裝 $ taro build --type rn --watch # npx 用戶也可以使用 $ npx taro build --type rn --watch

Note：React Native 端和其他端樣式兼容性差異較大，如果需要兼容 React Native 端，建議 React Native 端和其他端同步開發。

Note：如果要支持 React Native 端，必須采用 Flex 布局，並且樣式選擇器僅支持類選擇器，且不支持組合器 Combinators and groups of selectors。

以下選擇器的寫法都是不支持的，在樣式轉換時會自動忽略。

.button.button_theme_islands{ font-style: bold; } img + p { font-style: bold; } p ~ span { color: red; } div > span { background-color: DodgerBlue; } div span { background-color: DodgerBlue; }

樣式上 H5 最為靈活，小程序次之，RN 最弱，統一多端樣式即是對齊短板，也就是要以 RN 的約束來管理樣式，同時兼顧小程序的限制，核心可以用三點來概括：

使用 Flex 布局
基於 BEM 寫樣式
采用 style 屬性覆蓋組件樣式

RN 中 View 標簽默認主軸方向是 column，如果不將其他端改成與 RN 一致，就需要在所有用到 display: flex 的地方都顯式聲明主軸方向。

更新

Taro 提供了更新命令來更新 CLI 工具自身和項目中 Taro 相關的依賴

更新 Taro CLI 工具

# taro $ taro update self # npm npm i -g @tarojs/cli@latest # yarn yarn global add @tarojs/cli@latest

更新項目中 Taro 相關的依賴

$ taro update project

環境及依賴檢測

Taro 提供了命令來一鍵檢測 Taro 環境及依賴的版本等信息，方便大家查看項目的環境及依賴，排查環境問題。在提 issue 的時候，請附上 taro info 打印的信息，幫助開發人員快速定位問題。

$ taro info
👽 Taro v1.2.0-beta.15


  Taro CLI 1.2.0-beta.15 environment info: System: OS: macOS High Sierra 10.13.5 Shell: 5.3 - /bin/zsh Binaries: Node: 8.11.2 - /usr/local/bin/node Yarn: 1.8.0 - /usr/local/bin/yarn npm: 5.6.0 - /usr/local/bin/npm npmPackages: @tarojs/components: ^1.2.0-beta.3 => 1.2.0-beta.3 @tarojs/plugin-babel: ^1.2.0-beta.3 => 1.2.0-beta.3 @tarojs/plugin-csso: ^1.2.0-beta.3 => 1.2.0-beta.3 @tarojs/plugin-sass: ^1.2.0-beta.4 => 1.2.0-beta.4 @tarojs/plugin-uglifyjs: ^1.2.0-beta.3 => 1.2.0-beta.3 @tarojs/rn-runner: ^1.2.0-beta.4 => 1.2.0-beta.4 @tarojs/router: ^1.2.0-beta.3 => 1.2.0-beta.3 @tarojs/taro: ^1.2.0-beta.3 => 1.2.0-beta.3 @tarojs/taro-alipay: ^1.2.0-beta.3 => 1.2.0-beta.3 @tarojs/taro-h5: ^1.2.0-beta.3 => 1.2.0-beta.3 @tarojs/taro-swan: ^1.2.0-beta.3 => 1.2.0-beta.3 @tarojs/taro-weapp: ^1.2.0-beta.3 => 1.2.0-beta.3 @tarojs/webpack-runner: ^1.2.0-beta.3 => 1.2.0-beta.3 eslint-config-taro: ^1.2.0-beta.3 => 1.2.0-beta.3 eslint-plugin-taro: ^1.2.0-beta.3 => 1.2.0-beta.3

Taro Doctor

Taro Doctor 就像一個醫生一樣，可以診斷項目的依賴、設置、結構，以及代碼的規范是否存在問題，並嘗試給出解決方案。

但和真正的醫生不一樣，Taro Doctor 不需要排隊掛號，也不用花錢。你只需要在終端運行命令：taro doctor，就像圖里一樣：

Taro Doctor 診斷結果圖

CLI 配置

自 1.3.9 開始支持

1.3.9 開始 Taro 會在用戶根目錄下創建 .taro 文件夾，其中 .taro/index.json 用於存放 CLI 相關配置。

開發者可以使用 taro config 命令對配置項進行一系列操作：

# 查看用法 $ taro config --help # 設置配置項<key>的值為<value> $ taro config set <key> <value> # 讀取配置項<key> $ taro config get <key> # 刪除配置項<key> $ taro config delete <key> # 打印所有配置項 $ taro config list [--json]