搭建环境

本文介绍进行面板开发前所必要的环境搭建工作。

• 如果您需要基于 Windows 系统开发面板，需要安装：

  • Node.js 版本管理器（Node Version Manager，即 NVM）
  • Yarn

• 如果您需要基于 macOS 系统开发面板，需要安装：

  • NVM
  • Yarn
  • Homebrew 和 Watchman

安装开发工具

面板 SDK 开发前，请您按需自行下载安装下列推荐的编辑器：

• Visual Studio Code：（推荐）自带格式化、代码跳转等常用功能，社区贡献与活跃度较高。
• WebStorm：集成度较高的 IDE。
• Sublime Text：小巧轻便。
• Atom：小巧轻便。

安装 NVM

1. 打开终端。

2. 安装 NVM。

   curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.36.0/install.sh | bash
   

3. （可选）输入 nvm -v，确认 NVM 已正常安装。

   输出版本号，则表明安装成功。若报错 nvm: command not found，您可参考文末 常见问题 的解决方法。

4. 输入 nvm install 14.21.3，安装 Node.js 14.21.3 版本。

   由于 RN 的版本为 0.59.10，建议安装 Node.js 14 系列或 Node.js 12 系列的版本。

5. （可选）支持通过 nvm use 命令切换至指定 Node.js 版本。

   nvm use 14.21.3
   

安装 Yarn

1. 打开终端。

2. 输入npm install -g yarn，安装 Yarn。

3. （可选）输入 yarn -v，确认 Yarn 已正常安装。

安装 Homebrew 及 Watchman

1. 根据 Homebrew 官方文档的说明进行安装。
2. 打开终端。
3. 输入 brew install watchman，安装 Watchman。

安装 tuya-panel-cli

命令行工具（CLI）tuya-panel-cli 和涂鸦面板开发深度集成，请务必安装。安装命令如下：

• MacOS & Linux

  curl -fsSL https://cdn.jsdelivr.net/gh/tuya/tuya-panel-cli/install.sh | sh
  

  首次安装时，需要根据提示设置环境变量。

• Windows Powershell

  iwr https://cdn.jsdelivr.net/gh/tuya/tuya-panel-cli/install.ps1 -useb | iex
  

  iwr 命令在低版本 Powershell 下不可用，请参考 iwr 无法被识别（Windows） 解决。

安装完成后，运行 tuya-panel-cli help。如果展示所有可用命令的帮助信息，则安装成功。

常见问题

Q：输入 nvm -v 时，为什么报错 nvm: command not found？

A：可能原因是 NVM 所在的路径未设置为环境变量，您可以参照下述步骤设置环境变量：

1. 打开终端。

2. 输入cd ~，进入当前用户的 Home 目录。

3. 输入以下命令，打开配置文件。

   • Window 系统

     open .bash_profile
     

   • 新版 macOS 系统

     open .zshrc
     

4. 在配置文件中，复制以下代码后，保存文件。

   export NVM_DIR="$HOME/.nvm"
    [ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"
   

5. 输入 source .bash_profile 或 source .zshrc，重新加载配置文件。

6. 输入 nvm -v，查看 NVM 版本，验证是否安装成功。

Q：macOS 系统无法安装 Homebrew，怎么办？

A：如果您的电脑中没有 Xcode 命令行工具，安装 Homebrew 可能会失败。

• 解决方案 1：安装 Xcode。

• 解决方案 2：使用命令在线安装。

  1. 打开 Mac 终端。
  2. 输入 cd ~ ，进入当前用户的 Home 目录。
  3. 输入 xcode-select --install，安装 Xcode 命令行工具安装包。

相关文档

安装或者运行 RN 的过程中，如果出现错误提示，可查看 RN 社区的常见错误文档。

• 中文版：React Native 常见问题
• 英文版：React Native Troubleshooting