从零开始开发lovelace-horizon-cardTypeScriptLitRollup开发环境完整搭建教程【免费下载链接】lovelace-horizon-cardSun Card successor: Visualize the position of the Sun over the horizon.项目地址: https://gitcode.com/gh_mirrors/lo/lovelace-horizon-cardLovelace Horizon Card 是一款把太阳和月亮在地平线上的位置可视化出来的 Home Assistant 仪表盘卡片Sun Card 的继任者。本文是一份面向新手的完整教程带你从零搭建lovelace-horizon-card 的 TypeScript Lit Rollup 开发环境跑起本地调试页面、构建产物并运行单元测试与视觉测试。 项目结构与技术栈一览在动手之前先花一分钟认识项目结构后面每个步骤都能对号入座目录 / 文件作用src/卡片源码核心在 src/components/horizonCard/基于Lit自定义元素src/index.tsRollup 打包入口rollup.config.mjs生产构建配置rollup.config.dev.mjs开发配置热更新 本地服务器dev/index.html开发调试页面时间、语言切换面板tests/Jest 单元测试 Playwright 视觉测试docker/Dockerfile可复现的容器化构建环境 前置准备Node.js 与 Yarn 4项目对运行时有两处硬约束提前装对可以少走弯路Node.js 22版本固定在 .nvmrc 中。推荐用nvm管理版本进目录执行nvm use即可自动切到正确版本。Yarn 4package.json 里通过packageManager: yarn4.5.1声明由Corepack自动提供。执行一次corepack enable之后yarn命令会按项目要求自动使用 4.x。 只需两个命令安装 nvm 后nvm install nvm use再corepack enable。 克隆仓库并安装依赖git clone https://gitcode.com/gh_mirrors/lo/lovelace-horizon-card.git cd lovelace-horizon-card yarn installyarn install会拉取三类关键依赖见 package.json运行时依赖litUI 框架、suncalc3日出日落/月相天文计算、custom-card-helpersHome Assistant 卡片基础库构建工具rollup Babel/TypeScript 插件测试工具jestts-jest、playwright/test。️ 最快启动开发环境yarn dev开发环境的核心命令只有一个yarn dev它由 rollup.config.dev.mjs 驱动一次做三件事监听 src/ 下的 TypeScript 源码变更并即时重新打包产物输出到dist/lovelace-horizon-card.js启动本地静态服务器http://localhost:5000同时托管 dev/ 调试页和dist/产物。打开浏览器访问http://localhost:5000你会看到 dev/index.html 提供的开发面板可以调整时间、切换 38 种语言并实时看到卡片的渲染结果——改一行代码页面自动刷新。️ 构建发布产物yarn build生产构建一条命令搞定yarn buildpackage.json 中它被拆成三步yarn i18n:generate由 scripts/generate-i18n-index.mjs 扫描 src/assets/localization/languages/ 重新生成多语言索引→yarn lintESLint 检查→yarn rollup按 rollup.config.mjs 打包。最终产物是单文件dist/lovelace-horizon-card.js可直接放到 Home Assistant 的www目录作为 JS 模块加载。TypeScript 编译规则在 tsconfig.json目标是 ES2022、开启strict严格模式真正的编译工作由 Rollup 中的 Babel 插件完成tsc只做类型检查noEmit。✅ 运行测试单元测试 视觉测试yarn test # Jest 单元测试自动收集覆盖率 yarn test:visual # Playwright 视觉回归测试截图比对单元测试配置在 jest.config.jsjsdom 环境 ts-jest 转译快照序列化使用jest-serializer-html测试代码位于 tests/unit/视觉测试位于 tests/visual/首次运行会自动下载 Chromium之后对卡片各场景截图比对防止 UI 意外回归。 进阶用 Docker 跑一套零依赖构建环境如果不想在本地装 Node项目自带可复现的容器环境 docker/Dockerfiledocker build -f docker/Dockerfile -t horizon-card-ci . docker run --rm horizon-card-ci # 自动执行 lint test build容器内固定 Node 22 Corepack 提供 Yarn 4宿主零安装。此外dev/ha-live/ 还能用一条verify.sh命令拉起一个真实 Home Assistant 容器验证构建产物在真机主题下的渲染效果适合做发布前检查。️ 常见命令速查表需求命令启动开发环境yarn dev生产构建yarn build代码检查yarn lint单元测试yarn test视觉回归测试yarn test:visual重新生成语言索引yarn i18n:generate到这里你的 lovelace-horizon-card 开发环境就搭建完成了yarn dev改代码看效果yarn test守质量yarn build出产物。接下来不妨打开 src/components/horizonCard/ 看看卡片如何组织动手改出你的第一个版本吧【免费下载链接】lovelace-horizon-cardSun Card successor: Visualize the position of the Sun over the horizon.项目地址: https://gitcode.com/gh_mirrors/lo/lovelace-horizon-card创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考