2、开发环境搭建与工具链：Node.js与npm/yarn的安装配置、抖音开发者工具的使用、本地调试与真机预览
好，咱们正式开始动手了。这一章我带你搭好开发环境。别小看这一步，我见过太多同学卡在环境配置上，一卡就是半天。咱们把基础打牢，后面写代码才顺畅。
2.1 Node.js 与 npm/yarn 的安装配置
抖音直播插件开发，底层依赖 Node.js。说白了，你的代码需要 Node.js 来跑构建、装依赖、做打包。没有它，寸步难行。
2.1.1 安装 Node.js
我个人习惯用 LTS 版本。什么是 LTS？就是长期支持版，稳定、坑少。你想想看，咱们做项目求的是稳，不是追新。
- 下载地址：Node.js 官网（nodejs.org）
- 推荐版本：当前最新的 LTS 版本（比如 18.x 或 20.x）
- 安装方式：下载安装包，一路 Next 就行
node -v 和 npm -v。如果能看到版本号，说明安装成功。我每次装完都会先跑这两条命令，确认环境没问题再继续。
2.1.2 npm 还是 yarn？
这个问题经常有人问。我的答案是：都可以，但建议团队统一。
| 工具 | 特点 | 适用场景 |
|---|---|---|
| npm | Node.js 自带，无需额外安装 | 个人项目、小团队 |
| yarn | 速度快，有离线缓存，锁文件更可靠 | 大型项目、多人协作 |
我在项目中遇到过几次 npm 安装依赖时版本冲突的问题，后来切到 yarn 就顺了。但这不是说 npm 不好，只是 yarn 的锁机制更严格一些。
2.1.3 配置镜像源
国内的同学，这一步很重要。直接连 npm 官方源，下载速度会让你怀疑人生。我曾经等一个包等了十分钟，最后超时了。
// 使用淘宝镜像
npm config set registry https://registry.npmmirror.com
// yarn 同样可以配置
yarn config set registry https://registry.npmmirror.com.npmrc 文件，里面写上 registry=https://registry.npmmirror.com，这样只对当前项目生效，不影响全局。
2.2 抖音开发者工具的使用
抖音开发者工具，是我们写插件的主力 IDE。它基于 Electron，界面和 Chrome DevTools 很像，上手很快。
2.2.1 下载与安装
去抖音开放平台官网，找到「开发者工具」下载页面。支持 Windows 和 macOS。安装过程没什么特别的，一路下一步就行。
2.2.2 创建第一个项目
打开工具后，你会看到这样的界面：
- 点击「新建项目」
- 选择「抖音直播互动插件」模板
- 填写项目名称和路径
- 点击「确定」
嗯，这里要注意：项目路径不要有中文和空格。我刚开始做的时候没注意，结果编译报错，查了半天才发现是路径问题。
2.2.3 工具界面概览
工具主要分为几个区域：
- 左侧：项目文件树，和 VS Code 类似
- 中间：代码编辑器，支持语法高亮和智能提示
- 右侧：预览区，可以实时看到插件效果
- 底部：控制台，查看日志和错误信息
我个人最喜欢的是它的「真机调试」功能，后面会详细讲。
2.3 本地调试与真机预览
写代码最怕什么？写完发现跑不起来。所以调试能力，是开发效率的关键。
2.3.1 本地调试
在开发者工具里，点击「预览」按钮，工具会自动编译你的代码，并在右侧模拟器中展示效果。你可以：
- 修改代码后，按
Ctrl+S保存，模拟器会自动刷新 - 在控制台查看 console.log 的输出
- 使用 Elements 面板查看 DOM 结构
为什么会这样？因为工具内置了热更新机制。你改代码，它只重新编译改动的部分，而不是整个项目。速度很快。
2.3.2 真机预览
模拟器再像，也不如真机靠谱。我遇到过好几次模拟器上完美运行，真机上却出问题的案例。所以，真机预览是必做的一步。
操作步骤：
- 在开发者工具中点击「真机调试」
- 工具会生成一个二维码
- 打开抖音 App，扫码即可
- 手机上会显示你的插件界面
2.3.3 常见问题与避坑
这里分享几个我踩过的坑：
- 端口占用：工具默认使用 8080 端口，如果被占用，可以在设置里修改
- 缓存问题：真机调试时，如果修改了代码但手机没更新，试试在工具里点「清除缓存」
- 版本匹配：确保开发者工具版本和抖音 App 版本匹配，否则可能出现兼容性问题
npm install，确保依赖是最新的。然后清空控制台，这样新日志不会被旧日志淹没。
好了，环境搭好了，工具也熟悉了。下一章咱们就开始写真正的插件代码了。记住，环境配置是基础，基础不牢，地动山摇。花点时间把这一步做好，后面会省很多事。