Ember.js TodoMVC 示例应用全指南：本地开发、生产构建与 Cypress 端到端测试

Ember.js TodoMVC 示例应用全指南本地开发、生产构建与 Cypress 端到端测试【免费下载链接】todomvcHelping you select a JavaScript framework - Todo apps for React.js, Angular, Vue and many more项目地址: https://gitcode.com/gh_mirrors/to/todomvc本篇指南以 TodoMVC 仓库中的 Ember.js 示例应用说明 为主体深入讲解该示例在 Ember Octane 版本下的完整工程化实践从pnpm依赖安装、ember serve本地开发、生产构建、Cypress 端到端测试到rootURL路由配置与基于localStorage的响应式数据层实现。读完本文你将掌握如何在仓库内独立运行、构建并测试这个 Ember 5 时代的 TodoMVC 示例并能理解其预构建产物入库 符号链接的部署约定背后的设计意图。示例应用概览与仓库结构README 的标题即点明了该示例的身份Ember.js TodoMVC Example基于 Ember 5 构建其口号是 A framework for creating ambitious web applications并特别强调Ember is not an MVC framework——Ember 官方自认并非传统 MVC 框架而是更强调约定优于配置Convention over Configuration的应用框架这也解释了该示例为何采用路由 组件 服务Service的组织方式。该示例的实际工程代码并不在examples/emberjs根目录下而是位于子目录 examples/emberjs/todomvc其核心结构如下app/应用源码其中components/存放 7 个.gjs组件create.gjs、todo-list.gjs、todo-item.gjs、filters.gjs、footer.gjs、layout.gjs、attribution.gjsroutes/存放 4 个路由application.js、index.js、active.js、completed.jsservices/repo.js是唯一的服务数据仓库templates/下是 4 个.gjs模板config/environment.js、targets.js、optional-features.json、ember-cli-update.jsontests/QUnit 应用级测试与路由单元测试入口为tests/index.html与tests/test-helper.jstypes/Glint 与 TypeScript 的类型注册表package.json、pnpm-lock.yaml、testem.js、tsconfig.json等工程化配置。一个值得注意的细节README 标题写的是 Ember 5.3而实际 package.json 中锁定的是ember-cli ~5.12.0与ember-source ~5.12.0edition为octane。因此若以仓库现状为准运行环境实际对应 Ember 5.12读者应以package.json的依赖声明为准。目录与构建产物约定符号链接与入库的 distREADME 的 Note for people updating this app 是给后续维护者的重要提醒Theindex.htmland theassetsfolder in the parent folder are symlinks into the items with the same names insidedist. Thedistfolder has to be checked in git and built for production.也就是说examples/emberjs父目录下的index.html与assets目录是指向todomvc/dist/下同名产物的符号链接symlinkdist构建产物目录必须提交进 git 仓库并且必须按生产环境构建。这一约定并非偶然在 config/environment.js 的注释中有明确解释rootURL等设置是todomvc 仓库自身的测试以及**部署站点使用 GH Pages 指向源码中的预构建产物**所必需的。也就是说这个示例应用被设计为构建产物随仓库发布的模式dist入库后站点托管方可以直接把预构建好的静态资源作为页面提供服务而无需在服务器上重新执行构建。对维护者而言这意味着修改源码后必须重新执行生产构建并将新的dist一并提交否则符号链接指向的将是过期的产物。本地开发pnpm install 与 pnpm startREADME 给出的开发流程非常简洁将其作为标准 Ember 应用开发即可$ cd todomvc $ pnpm install $ pnpm start其中cd todomvc指的是进入examples/emberjs/todomvc目录。从 package.json 可以看到start脚本就是ember serve即启动 Ember CLI 的本地开发服务器默认地址为http://localhost:4200。工程还给出了明确的包管理器与运行时约束packageManager为pnpm9.12.1package.jsonengines要求node 20package.json。因此开发前请先确认本机 Node.js 版本不低于 20并使用 pnpm 9.x 安装依赖否则可能遇到依赖安装或构建兼容性问题。依赖安装完成后ember serve会启用实时重载ember-cli-inject-live-reload修改源码即可在浏览器中即时看到变化。生产构建README 中给出的生产构建命令为$ pnpm build在 package.json 中build对应的实际脚本是build:production即ember build --environmentproduction。生产构建会将应用编译输出到todomvc/dist/目录即上文符号链接指向的目录经由broccoli-asset-rev对静态资源做指纹化fingerprinting处理配合 SRIember-cli-sri注入完整性校验通过ember-cli-terser压缩 JavaScript、ember-cli-clean-css压缩样式。结合前文约定构建完成后需确保dist/内的index.html与assets/被更新并提交到 git以维持符号链接指向的产物与源码一致。Cypress 端到端测试README 给出了在仓库根目录运行 Cypress 端到端测试的完整流程# 从本仓库根目录执行 $ npm install $ npm run server # 在另一个终端中执行 $ CYPRESS_frameworkemberjs npm run cy:open这里的要点在于第一步需要在仓库根目录安装依赖并启动测试服务根目录的package.json中的server脚本配合 server.js 与 cypress.config.js第二步通过环境变量CYPRESS_frameworkemberjs告诉测试运行器当前要验证的是emberjs这个示例再打开 Cypress 交互式运行器cy:open。对应的端到端测试用例位于 cypress/e2e/spec.cy.js。除了 Cypress该示例自身还内置了基于 QUnit 的应用测试ember-qunitember/test-helpers通过pnpm test等价于concurrently npm:lint npm:test:*或pnpm test:ember即ember test即可运行测试运行器配置见 testem.js。路由配置与 rootURL 注意事项README 的 Ember Notes 部分给出了一条针对该示例的关键经验TherootURLparam inconfig/environment.jsshould keep as empty string.这条笔记的本意是rootURL必须与部署路径保持一致不能随意改动。而在当前仓库中config/environment.js 实际提交的配置为rootURL: /examples/emberjs/todomvc/dist/, locationType: history,文件注释明确说明默认值是rootURL: /与locationType: history而当前值是为满足 todomvc 仓库自身的测试以及基于 GH Pages 指向源码中预构建产物的部署方式而设置的。也就是说该示例的部署路径是仓库内的相对路径examples/emberjs/todomvc/dist/而不是域名根路径。locationType: history意味着使用 HTML5 History API 进行路由跳转对应 router.js 中的实现——路由类直接读取配置export default class Router extends EmberRouter { location config.locationType; rootURL config.rootURL; } Router.map(function () { this.route(active); this.route(completed); });路由表只声明了两个子路由active与completed与 TodoMVC 的三种过滤状态All / Active / Completed一一对应。此外测试环境下的配置也值得注意config/environment.js测试时locationType切换为none、rootElement设为#ember-testing、autoboot关闭这是 Ember 应用测试的标准配置避免测试期间应用自动挂载干扰断言。数据层实现localStorage tracked-built-ins 的响应式仓库示例的数据仓库是唯一服务 app/services/repo.js它展示了 Ember Octane 时代服务 原生类字段 追踪的现代化写法数据加载load()从window.localStorage.getItem(todos)读取 JSON 数组注释强调 TodoMVC 仓库约定 localStorage 必须存数组再reduce成一个以todo.id为键的TrackedMap每个 todo 用TrackedObject包装从而让每个字段都进入 Ember 的自动追踪auto-tracking系统数据保存persist()将TrackedMap的值展开回数组并写回localStoragekey 仍为todos派生数据通过 getter 提供all、completed、active、remainingremaining只是active的别名等视图写操作add(attrs)使用ember/helper的uniqueId()生成 id 并立即persist()delete(todo)按 id 删除clearCompleted()遍历completed逐个删除初始化时机在 app/routes/application.js 的beforeModel()中调用this.repo.load()保证应用启动时数据已就绪。三个列表路由的model()返回的并非普通对象而是惰性求值的 getter。以 app/routes/index.js 为例model() { let repo this.repo; return { get todos() { return repo.all; }, }; }代码注释解释了这样做的原因如果在这里直接求值会把读取结果从自动追踪中摘除改用 getter 后每次模板访问都会重新读取并保持响应式追踪。active.js与completed.js路由结构完全相同只是分别返回repo.active与repo.completed。模板层同样采用了新版语法——app/templates/index.gjs 使用ember-route-template将模板内联进路由模块并在存在待办项时渲染TodoList组件export default Route( template {{#if model.todos.length}} TodoList todos{{model.todos}} / {{/if}} /template, );组件均为.gjs格式依赖ember-template-imports并配合 Glintglint/core及 ember 相关环境包获得模板类型检查能力应用入口 app/app.js 中导入了todomvc-common的基础样式/脚本与todomvc-app-css保持与 TodoMVC 官方视觉规范一致。测试用例对行为的验证应用级测试 tests/application/basic-functionality-test.js 完整覆盖了 TodoMVC 的核心交互可作为上述实现的直接验证空状态无待办时.filters不渲染访问/时列表为空新增在.new-todo输入并触发Enter后列表出现对应条目且该条目只出现在 Active 过滤视图下编辑双击label唤起.edit输入框填入新文本并失焦blur后完成修改删除点击待办项上的删除按钮后条目消失完成/过滤勾选.toggle后条目在 Active 视图消失、在 Completed 视图出现全局#toggle-all可一键全选/全不选clear-completed可清空已完成项路由导航既验证了visit(/active)、visit(/completed)的直接 URL 访问也验证了点击.filters链接时currentURL()随之变化覆盖history路由模式下的两种导航路径。测试的beforeEach/afterEach都会localStorage.clear()保证用例之间数据隔离。另有 tests/unit/routes/active-test.js 与completed-test.js对两个过滤路由做单元级验证。工程化要点一览最后将示例用到的关键技术依赖整理如下均以 package.json 为准类别依赖用途核心框架ember-source ~5.12.0、ember-cli ~5.12.0Ember 运行时与构建工具链构建体系embroider/compat、embroider/core、embroider/webpackEmbroider 现代构建管线模板体系ember-template-imports、ember-route-template、glimmer/component、glimmer/tracking.gjs模板语法与 Glimmer 组件模型类型体系typescript、glint/*、tsconfig/emberTS Glint 模板类型检查状态/响应式tracked-built-ins、ember-resources、ember-primitives、ember-modifier响应式数据结构与工具样式todomvc-app-css、todomvc-commonTodoMVC 官方视觉与基础行为测试ember-qunit、qunit、qunit-dom、ember/test-helpersQUnit 应用/单元测试质量工具eslint、prettier、ember-template-lint、stylelint代码规范与静态检查整个示例体现了 Ember Octane 版本后的主流工程实践.gjs内联模板组件、Glint 类型化模板、tracked 响应式数据、服务层数据仓库以及生产构建产物随仓库发布的 TodoMVC 部署模式。无论是作为学习 Ember 5 的参考实现还是作为 TodoMVC 框架对比的基准示例它都值得开发者按本文流程实际运行一遍加以验证。【免费下载链接】todomvcHelping you select a JavaScript framework - Todo apps for React.js, Angular, Vue and many more项目地址: https://gitcode.com/gh_mirrors/to/todomvc创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考