企业官网建设流程全解析

angular-modal-service构建与发布实战：webpack打包、uglifyjs压缩与standard-version版本管理全流程

【免费下载链接】angular-modal-serviceModal service for AngularJS - supports creating popups and modals via a service.项目地址: https://gitcode.com/gh_mirrors/an/angular-modal-service

angular-modal-service是一款 AngularJS 的Modal 弹窗服务组件，通过一个服务即可创建模态框（Modal）与弹出层（Popup）。本文将带你快速走通它的完整构建与发布链路：webpack 打包、uglifyjs 压缩与standard-version 版本管理，帮助你理解一个成熟前端组件库是如何从源码走到 npm 发布的。

1️⃣ 先认识项目：一个源码文件支撑的 Modal 服务

整个库的核心逻辑集中在一个文件里：

• 源码：src/angular-modal-service.js（约 320 行，定义了angularModalService模块和ModalService服务）
• 构建产物输出目录：dst/（包含普通包、压缩包及对应的 source map）
• 使用示例：samples/目录下有 yesno、custom、complex 三组可直接运行的示例

服务的工作方式很直观：调用ModalService.showModal()并传入模板与控制器，返回一个 Promise；弹窗控制器中会自动注入close(result)函数用于关闭并回传结果。

仓库快速上手：

git clone https://gitcode.com/gh_mirrors/an/angular-modal-service cd angular-modal-service npm install

2️⃣ 本地开发环境：测试与热更新一步到位

安装依赖后，三个命令即可进入开发状态：

测试入口是test/index.js，Karma 配置见karma.conf.js——它直接复用webpack.config.js的打包规则，仅在测试时把 angular 从 externals 中移除、追加 Istanbul 覆盖率插桩 loader。

3️⃣ webpack 打包：把源码变成可发布的 bundle

打开webpack.config.js，配置只有 5 个关键点，非常适合作为学习样板：

1. entry：指向src/angular-modal-service.js
2. output：输出到dst/angular-modal-service.js
3. devtool：inline-source-map，为产物内联 source map，方便线上排错
4. externals：把angular声明为外部依赖，不打包进产物——使用者自己已加载 AngularJS，避免重复
5. babel-loader：所有 JS 走@babel/preset-env转译，兼容更老的浏览器

运行npm run build时，webpack 会以--mode=production模式执行，自动启用生产环境优化。

4️⃣ uglifyjs 压缩：40KB 到 4KB 的十倍瘦身

package.json里的build脚本是一条链式命令：

webpack --mode=production && \ uglifyjs ./dst/angular-modal-service.js --compress --mangle \ -o ./dst/angular-modal-service.min.js --source-map

uglifyjs 在这一步完成两件事：--compress压缩无用代码与合并语句，--mangle混淆变量名。压缩前后对比效果显著：

压缩后体积缩小约 10 倍，并额外生成.min.js.map供调试。这正是发布给用户的最终文件——README 中引导使用者引用的正是dst/angular-modal-service.min.js。

5️⃣ standard-version 版本管理：自动升版号 + 更新 CHANGELOG

package.json中的release脚本映射到standard-version命令，它是 Conventional Commits 规范的落地工具：

• 自动升版本号：根据 commit 前缀（feat / fix 等）判断 minor 或 patch 级升级，同步更新package.json与bower.json中的version字段
• 自动生成变更日志：把新版本的改动追加到CHANGELOG.md顶部
• 自动打 Git tag：如v0.15.6

CHANGELOG.md中清晰可见历次版本记录（当前版本为 0.15.6），每次npm run release都会在其中留下一行带日期的版本条目。

6️⃣ 完整发布流程：四步走完

结合 README 的 Releasing 章节，一次正式发布的标准动作是：

1. npm run build—— 生成dst/发布包
2. 把功能分支合并到 master
3. npm run release—— 升版本号、更新CHANGELOG.md、打 tag
4. git push --follow-tags && npm publish—— 推送 tag 并发布到 npm

7️⃣ 附加保障：CI 自动验证

.circleci/config.yml定义了持续集成流水线：checkout 后安装依赖（带package.json校验和的依赖缓存加速）、执行npm test并上传覆盖率，最后把dst/、测试结果和覆盖率报告全部存为构建产物归档。这意味着每次推送都会自动验证构建与测试是否通过。

8️⃣ 快速回顾清单 ✅

• npm install+npm test：确认环境健康
• npm run build：webpack 生产模式打包 → uglifyjs 压缩出 min 包
• 合并到 master 后执行npm run release：版本号、CHANGELOG、tag 一步到位
• git push --follow-tags && npm publish：完成发布

这套「webpack 打包 + uglifyjs 压缩 + standard-version 版本管理」的组合，是前端组件库发布流程的经典范式：构建、压缩、测试、版本、日志、CI 各司其职，一条命令即可完成发布。掌握它之后，你可以轻松复用到自己的 AngularJS 或任意 JS 组件库项目中。

【免费下载链接】angular-modal-serviceModal service for AngularJS - supports creating popups and modals via a service.项目地址: https://gitcode.com/gh_mirrors/an/angular-modal-service