尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

E2EMail开发者指南:do.sh构建体系、Closure编译与Karma+Jasmine测试实战教程

E2EMail开发者指南:do.sh构建体系、Closure编译与Karma+Jasmine测试实战教程 E2EMail开发者指南do.sh构建体系、Closure编译与KarmaJasmine测试实战教程【免费下载链接】e2emailE2EMail is a simple Chrome application - a Gmail client that exchanges OpenPGP mail.项目地址: https://gitcode.com/gh_mirrors/e2/e2emailE2EMail 是一个基于 Chrome 应用的 Gmail 客户端用于收发 OpenPGP 端到端加密邮件。本文将从零带你跑通它的完整工程链路用 do.sh 一键脚本完成依赖安装与构建、理解 Closure Compiler 如何把源码压成两个 JS 产物、以及使用 Karma Jasmine 在真实 Chrome 中运行单元测试适合刚接触前端构建体系的新手阅读。项目速览E2EMail 是什么E2EMail 的核心价值让非技术用户也能通过 Gmail 收发加密邮件。应用启动后只显示账户中的加密邮件发送时自动完成签名与加密密钥管理由应用自动处理详见 README.md 的 Key management 章节。代码组织非常清晰目录职责chrome/应用主工程页面、组件、工具函数chrome/pages/各路由页面的控制器与模板welcome、setup、messages 等chrome/components/可复用 Angular 组件auth、openpgp、storage 等chrome/worker/Web Worker 入口加密运算在独立线程执行chrome/karma/Karma 测试配置chrome-lib/git submodule 引入的 Google end-to-end 加密库应用主模块 chrome/app.js 通过goog.require声明所有组件依赖并用$routeProvider注册了 10 个页面路由——这也是 Closure 编译的入口点。环境准备与一次性 setup构建依赖 4 样工具git、python、jdk 1.7、ant运行测试还需nodejs、npm及 nvm。先克隆仓库git clone https://gitcode.com/gh_mirrors/e2/e2email cd e2email然后执行一次性初始化拉取所有依赖./do.sh setupdo.sh 中e2email_setup()会依次执行git submodule init/git submodule update --recursive—— 拉取 chrome-lib/end-to-end 加密库调用子模块自带的do.sh install_deps下载 Closure Library、Closure Compiler 等构建依赖。 脚本开头有set -o errexit任何一步失败都会立即中止遇到报错先看最后一条命令输出。do.sh 命令总览do.sh 底部的case分支注册了 6 个子命令覆盖了从构建到测试的完整流程命令作用关键函数./do.sh setup一次性拉取依赖do.sh#L31-L35./do.sh build构建未打包应用do.sh#L116-L145./do.sh clean清理构建产物与 node_modulesdo.sh#L147-L153./do.sh karma启动 Karma 开发服务器do.sh#L163-L166./do.sh test_app单次运行全部测试do.sh#L168-L171./do.sh lintgjslint 代码检查do.sh#L173-L177Closure 编译详解两个入口两份产物执行./do.sh build后e2email_build() 按以下流程工作生成依赖文件e2email_generate_jsdeps()调用 Closure Library 的depswriter.py扫描 end-to-end 库与chrome/源码产出build/e2e-deps.js和build/e2email-deps.js编译 Worker以e2email.worker.bootstrap为入口编译出assets/js/worker_binary.js编译主应用以e2email.application.module为入口编译出e2email_binary.js拷贝静态资源manifest、_locales、background.js原样复制所有 HTML 按原路径搬入全部 CSS 合并为styles-bundle.css。编译的核心在e2email_jscompile()do.sh#L69-L96它用 Java 运行compiler.jar通过--closure_entry_point从入口点自动推导依赖闭包并排除 demo、兼容性测试等无关目录。两个入口分别对应两种运行环境主应用入口chrome/app.js注册 Angular 模块与全部路由编译时额外启用--angular_pass让 Closure 理解 Angular 的依赖注入Worker 入口chrome/worker/bootstrap.js启动e2e.openpgp.ContextImpl并将密钥环存入 IndexedDB把耗时的加密运算隔离到后台线程。编译行为由 chrome/compiler.flags 统一控制几个值得注意的点--manage_closure_dependencies--only_closure_dependencies只做依赖闭包提取不做全目录编译一组--jscomp_error...把checkTypes、undefinedVars、uselessCode等设为错误级别类型问题会直接打断构建--js!**_test.js测试文件永不进入生产包四个--externs声明了 Angular 与 Chrome 扩展 API 的外部类型避免编译器误报未定义变量。此外构建时用--define注入了两个常量密钥服务器地址do.sh#L100与 Worker 二进制路径do.sh#L109这些值在编译期写死进产物。在 Chrome 中加载构建产物构建成功后产物位于build/e2email目录。加载方式打开chrome://extensions开启右上角「开发者模式」点击「加载已解压的扩展程序」选择build/e2email目录应用出现在 Chrome 应用列表中启动即可看到 chrome/manifest.json 声明的 Gmail 权限授权流程。如需调试源码里保留了 debug 分支do.sh#L101-L103加上--debug --formattingPRETTY_PRINT即可得到带格式输出的版本方便断点定位。Karma Jasmine 测试实战E2EMail 的测试栈在 package.json 中声明jasmine-corekarmakarma-jasminekarma-chrome-launcher以及两个 HTML 预处理器把模板编译为 Angular 可注入的 JS。测试约定很简单测试文件与被测文件同目录、以_test.js结尾例如chrome/util/email_test.js —— 校验邮箱解析的边界情况缺 、缺域名等chrome/components/openpgp/openpgp-service_test.js —— 用 Angular Mock 的$httpBackend模拟密钥服务器交互覆盖本地/远端混合场景。Karma 的配置在 chrome/karma/karma.conf.js要点basePath: ../指向chrome/目录files数组先加载构建出的e2email_binary.js即被测代码本体再加载 karma/angular-mocks.js 与所有**/*_test.jsng-html2js预处理器把**/*.html模板转成可注入的模块供控制器测试使用。两种运行方式# 开发模式启动服务器浏览器中反复运行支持改码即测 ./do.sh karma # CI 模式单次运行后立即退出指定 Chrome 浏览器 ./do.sh test_appdo.sh#L155-L171 中可以看到两种模式都先执行e2email_prepare_karma()检查 node/npm 是否安装、执行npm install、并先完整构建一次应用——测试跑的就是真实的编译产物而非源码这能同时暴露编译期问题。⚠️karma命令会启动一个本地 Web 服务器输出中的 URL 用 Chrome 打开即可看到测试面板test_app则以--single-run无头方式跑完退出。代码风格与收尾修改代码后建议运行./do.sh lint它调用 gjslint 以--strict模式递归检查chrome/目录排除assets与karma要求代码符合 Closure 的命名空间规范goog、e2e。最后开发完成后可用./do.sh clean清掉build/与node_modules回到干净状态。小结你想做的事执行命令首次拉取依赖./do.sh setup构建应用./do.sh build加载到 Chromechrome://extensions→ 加载build/e2email交互式跑测试./do.sh karmaCI 单次测试./do.sh test_app代码检查./do.sh lint整条链路的精髓在于do.sh 把「依赖管理 → Closure 编译 → 产物打包 → 真实环境测试」封装成 6 条命令而 Closure 编译 Karma 测试的组合保证了产物与测试跑的是同一份代码。掌握这套体系后你可以按同样思路为其他 Closure 风格的前端项目搭建工程化流程。【免费下载链接】e2emailE2EMail is a simple Chrome application - a Gmail client that exchanges OpenPGP mail.项目地址: https://gitcode.com/gh_mirrors/e2/e2email创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表