3、项目初始化与目录结构：使用脚手架创建插件项目、理解manifest.json配置文件、掌握src与dist目录的作用

好，咱们正式开始动手了。

前面两章聊了抖音直播插件的整体概念和生态，说实话，都是理论。这一章，咱们直接上代码。我会带你从零创建一个插件项目，然后拆开它的骨架，看看里面到底长什么样。

我个人习惯是，先跑起来，再慢慢理解。所以别怕，跟着我走一遍，你就能摸清门道。

3.1 使用脚手架创建插件项目

抖音官方提供了一个脚手架工具，叫 @douyin-microapp/cli。说白了，就是帮你把项目模板一键生成好，省得你手动建文件夹、写配置文件。

安装命令很简单：

npm install -g @douyin-microapp/cli

装完之后，用这个命令创建项目：

dy-cli create my-live-plugin

嗯，这里要注意。运行后它会问你几个问题：

• 项目名称：默认就是你刚才输入的 my-live-plugin
• 模板类型：选「直播互动插件」
• 是否启用 TypeScript：我建议选「是」。虽然不强制，但用了 TS 之后，代码提示和类型检查能帮你省掉很多低级 bug。

等它跑完，你会看到这样的输出：

✔ 项目创建成功！
cd my-live-plugin
npm install
npm run dev

我在项目中遇到过不少新手，卡在这一步就慌了。其实别急，先 cd 进去，然后 npm install 装依赖，最后 npm run dev 启动开发模式。这时候插件就能在抖音开发工具里预览了。

3.2 理解 manifest.json 配置文件

项目创建好了，打开根目录，你会看到一个 manifest.json 文件。这个文件是插件的「身份证」，抖音平台全靠它来识别你的插件。

我们来看一个典型的配置：

{
  "name": "my-live-plugin",
  "version": "1.0.0",
  "description": "一个简单的直播互动插件",
  "main": "dist/index.js",
  "scripts": {
    "dev": "dy-cli dev",
    "build": "dy-cli build"
  },
  "permissions": {
    "live": {
      "description": "获取直播间信息"
    },
    "user": {
      "description": "获取用户基本信息"
    }
  },
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "互动面板"
      }
    }
  ]
}

这里有几个关键字段，我挑重要的说：

字段	作用	注意点
name	插件唯一标识	不能跟其他插件重名
version	版本号，遵循 semver 规范	每次发布必须递增
main	入口文件路径	通常指向 dist/index.js
permissions	声明插件需要的权限	不声明就无法调用对应 API
pages	插件包含的页面	每个页面都要在这里注册

你想想看，这个文件就像插件的「护照」。抖音平台在加载插件时，会先读这个文件，看看你有哪些页面、需要什么权限。如果少了什么，插件就跑不起来。

3.3 掌握 src 与 dist 目录的作用

创建完项目，你会看到两个核心目录：src 和 dist。很多新手搞不清它们的区别，我简单解释一下。

src 目录：你的工作区

src 是 source 的缩写，也就是源代码目录。你写的所有代码、样式、页面，都放在这里。它是你的「厨房」，所有原材料都在这里加工。

典型的 src 结构长这样：

src/
├── pages/
│   └── index/
│       ├── index.js      # 页面逻辑
│       ├── index.json    # 页面配置
│       ├── index.wxml    # 页面结构
│       └── index.wxss    # 页面样式
├── components/           # 公共组件
├── utils/                # 工具函数
├── app.js                # 应用入口
├── app.json              # 应用配置
└── app.wxss              # 全局样式

我个人习惯把 src 里的文件按功能模块分文件夹。比如 components/ 放公共组件，utils/ 放工具函数。这样后期维护起来，找东西特别快。

dist 目录：打包后的产物

dist 是 distribution 的缩写，也就是发布目录。当你运行 npm run build 时，脚手架会把 src 里的代码编译、压缩、打包，然后输出到 dist 目录。

说白了，dist 里的文件才是抖音平台真正加载的东西。src 里的代码是给人看的，dist 里的代码是给机器跑的。

我记得有一次，一个同事为了快速修复一个 bug，直接改了 dist/index.js。结果第二天重新构建，他的修改全没了。嗯，从那以后，我们团队定了个规矩：dist 目录不进 Git 仓库，只作为构建产物。

3.4 开发与构建流程

搞清楚了目录结构，咱们来看看完整的开发流程：

1. 开发阶段：在 src 里写代码，运行 npm run dev 启动热更新
2. 调试阶段：在抖音开发工具里预览，边改边看效果
3. 构建阶段：运行 npm run build，生成 dist 目录
4. 发布阶段：把 dist 目录打包上传到抖音开放平台

这个流程其实跟普通的前端项目很像。你如果做过 Vue 或 React 项目，应该不会陌生。

3.5 本章小结

这一章咱们干了三件事：

• 用脚手架创建了一个直播插件项目
• 拆解了 manifest.json 的配置项
• 搞清楚了 src 和 dist 的分工

说实话，这些基础的东西虽然看起来简单，但它们是后续所有开发的地基。你想想看，如果连目录结构都搞不清楚，后面写代码时文件放哪都不知道，那得多难受。

下一章，咱们会深入插件的生命周期，看看插件从加载到销毁，到底经历了哪些阶段。到时候我会分享一些我在实际项目中遇到的坑，保证让你少走弯路。

好，今天就到这。动手试试，把项目跑起来，感受一下。