雨霖铃
bc1943dc16
feat(dev): 添加开发服务器与热重载支持 - 新增 `npm run dev` 命令，启动带热重载的开发服务器 - 集成 rollup watch 模式与 LiveReload 实现自动刷新 - 添加开发指南 DEVELOPMENT.md，说明项目结构、预览方式及构建流程 - 新增开发预览页面 index.html，用于嵌入展示 sidepanel 内容 - 更新 package.json 和 package-lock.json，引入相关开发依赖 ```
1.4 KiB
1.4 KiB
开发指南
启动开发服务器（带热重载）
要启动带有热重载功能的开发服务器，请运行以下命令：
npm run dev
这将会：
- 启动 Rollup 的监视模式
- 自动重新编译更改的文件
- 通过 LiveReload 刷新浏览器
- 在 http://localhost:8082 启动开发服务器
项目结构
project/
├── sidepanel/ # Chrome扩展侧边栏面板
│ ├── index.html # 侧边栏主页面
│ ├── index.js # 侧边栏主脚本
│ ├── index.css # 侧边栏样式
│ └── ... # 其他相关文件
├── dist/ # 构建输出目录
└── ... # 其他配置和文档文件
预览方式
有两种方式可以预览您的更改：
- 直接访问
http://localhost:8082/sidepanel/index.html查看sidepanel的实际效果 - 访问
http://localhost:8082/index.html查看包含sidepanel预览的开发页面
构建生产版本
要构建生产版本，请运行：
npm run build
这将生成优化后的 bundle 文件到 dist/sidepanel.bundle.js。
热重载工作原理
- 当你修改 sidepanel 目录下的任何文件时，Rollup 会自动重新编译
- 编译完成后，LiveReload 会自动刷新浏览器页面
- 无需手动刷新浏览器来查看更改效果