前端开发

Home Assistant构建于Polymer web组件框架之上。Polymer允许构建封装的自定义HTML元素。其源代码位于GitHub上的Home - Assistant - Polymer仓库。

生产环境注意事项

在生产环境中请勿使用开发模式。Home Assistant使用积极的缓存策略来提升移动设备的使用体验。在开发过程中该缓存会被禁用，这样在更改代码时就无需重启服务器。

设置开发环境

Home Assistant默认会提供已编译的前端版本。由于所有内容都被编译到 frontend.html 文件中，在开发过程中不应使用该编译版本，而应使用单独的文件。要为Home Assistant启用开发模式，请在 configuration.yaml 中添加以下配置：

http:
  development: 1

设置前端开发环境需要Node.js，推荐使用nvm进行安装。按照README中的说明安装nvm，然后在 home - assistant - polymer 目录下运行以下命令来安装正确的Node.js版本：

$ cd homeassistant/components/frontend/www_static/home-assistant-polymer
$ nvm install <.nvmrc

Yarn被用作Node模块的包管理器。根据此处的说明安装Yarn。

下一步是获取前端代码。克隆Home Assistant仓库时，默认不会克隆前端仓库。可以从 home - assistant 目录运行以下命令来设置前端开发环境：

$ script/bootstrap_frontend

此脚本将更新 home - assistant/homeassistant/components/frontend/www_static/home - assistant - polymer 中Polymer项目的git子模块。

如果计划向Home Assistant代码库提交PR，需要先fork该Polymer项目，并将fork添加为远程仓库：

$ cd homeassistant/components/frontend/www_static/home-assistant-polymer
$ git remote add <远程名称> <你的fork的GitHub URL>

完成更改并准备推送时，切换到Polymer项目的工作目录，然后推送更改：

$ cd homeassistant/components/frontend/www_static/home-assistant-polymer
$ git push -u <远程名称> HEAD

开发过程

在开发过程中，需要运行Rollup，以使对JavaScript应用核心所做的更改生效：

$ cd homeassistant/components/frontend/www_static/home-assistant-polymer
$ npm run dev

前端的源代码位于两个不同目录：

• UI：homeassistant/components/frontend/www_static/home - assistant - polymer/src/
• 面板：homeassistant/components/frontend/www_static/home - assistant - polymer/panels/

构建Polymer前端

构建新版本的前端非常简单，只需运行 script/build_frontend。它会依次执行以下命令：

1. home - assistant - polymer：安装NPM依赖项。
2. home - assistant - polymer：开始前端构建。
3. 编译所有使用的JavaScript。
4. 安装Bower依赖项。
5. 对核心和面板源进行Vulcanize（合并）和压缩，并构建到目标目录。
6. 将web组件的polyfill文件 webcomponents - lite.min.js 从 home - assistant - polymer 复制到 components/frontend/www_static/webcomponents - lite.min.js。
7. 将最终的前端构建 frontend.html 和面板源从 home - assistant - polymer 复制到 components/frontend/www_static/frontend/。
8. 生成核心和面板源的MD5哈希值。
9. 创建所有源文件的gzip版本。

总结

Home Assistant前端开发的相关内容。首先强调了生产环境与开发环境的差异，生产中不应使用开发模式。在设置开发环境方面，涵盖了启用开发模式的配置、Node.js与Yarn的安装、获取前端代码及相关操作（如处理git子模块、fork项目等）。开发过程中需运行Rollup以实时反映代码更改。最后说明了构建前端的流程，包括安装依赖、编译、合并压缩、复制文件、生成哈希值和gzip版本等一系列操作，为前端开发者提供了全面的指导，有助于顺利开展Home Assistant前端项目的开发与维护工作。