{"id":23196949,"url":"https://github.com/hoperyy/front-end-engineering","last_synced_at":"2025-09-22T21:37:54.273Z","repository":{"id":39538163,"uuid":"95352489","full_name":"hoperyy/front-end-engineering","owner":"hoperyy","description":"前端工程化","archived":false,"fork":false,"pushed_at":"2023-04-18T16:55:10.000Z","size":16727,"stargazers_count":39,"open_issues_count":3,"forks_count":8,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-08-18T22:42:18.145Z","etag":null,"topics":["automatic","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hoperyy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2017-06-25T10:18:21.000Z","updated_at":"2025-03-29T09:26:38.000Z","dependencies_parsed_at":"2025-08-18T22:32:39.613Z","dependency_job_id":"36420835-4a83-4600-8820-eb90848a2919","html_url":"https://github.com/hoperyy/front-end-engineering","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/hoperyy/front-end-engineering","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoperyy%2Ffront-end-engineering","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoperyy%2Ffront-end-engineering/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoperyy%2Ffront-end-engineering/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoperyy%2Ffront-end-engineering/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hoperyy","download_url":"https://codeload.github.com/hoperyy/front-end-engineering/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoperyy%2Ffront-end-engineering/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":276481036,"owners_count":25649986,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-22T02:00:08.972Z","response_time":79,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["automatic","webpack"],"created_at":"2024-12-18T14:27:19.042Z","updated_at":"2025-09-22T21:37:54.215Z","avatar_url":"https://github.com/hoperyy.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"**项目内容同步在我的 [github blog](https://github.com/hoperyy/blog) - 前端工程化部分**\n\n## 前言\n\n自从前后端分离以来，“前端工程化”已经是前端领域的高频词汇。\n\n随着 Node.js 的兴起，诞生了如 gulp、grunt、webpack 等一批自动化工具，大大提升了前端在自动化、工程化等方面的效率，并降低了成本。\n\n大体的来说，前端工程化有两层含义：\n\n+   广义的前端工程化\n\n    前端工程是软件工程的一个子类，指的是将软件工程的方法和原理运用在前端开发中, 目的是实现 **高效开发**，**有效协同**，**质量可控**。\n\n+   狭义的前端工程化\n\n    前端工程是指将 **开发阶段** 的代码转变成 **生产环境** 的代码的 一系列步骤。\n\n    主要包括 **构建 , 分支管理 , 自动化测试, 部署** 等。\n\n（ 定义摘自：https://segmentfault.com/a/1190000008358748 ）\n\n## 前端工程化的特点\n\n+   自动化\n+   规范化\n+   傻瓜化\n\n## 前端工程化的体现\n\n**自动化** 是前端工程化的重要特征。我们通过开发一些工具，将重复性工作自动化，以提高开发、协作效率。\n\n### 项目初始化\n\n项目初始化，一般是初始化项目目录文件，对前端而言，一般是如下的目录结构：\n\n```\npages/\n    index/\n    detail/\npackage.json\n.gitignore\nREADME.md\n```\n\n这个动作完全可以自动化，通过工具生成标准模板。\n\n工具推荐：\n\n+   [bio-cli](https://github.com/weidian-inc/bio-cli) `init` 命令\n\n### 本地开发\n\n前端使用的技术栈多种多样，如 vue/react/zepto 等，样式编辑有 less/sass/原生 css 等，js 有 es5/es6 等，而这种情况遇到的困难，就是如何配置各种工具才能产出浏览器可以识别的代码。\n\n配置的过程是繁琐的，这个过程我们也需要 **自动化**。\n\n工具推荐：\n\n+   [bio-cli](https://github.com/weidian-inc/bio-cli) `run` 命令\n\n### 数据 Mock\n\n前端和后端由于节奏不同，但前端有时又对接口依赖，怎么办呢？数据 Mock 就有用了。\n\n前后端数据格式在约定好后，前端同学在开发阶段接入 mock 数据，等到接口准备好后，转为真实数据即可。\n\n现在社区有很多工具可以 Mock 数据，推荐几个：\n\n+   [easy-mock](https://easy-mock.com/)\n+   [bio-cli](https://github.com/weidian-inc/bio-cli) `mock` 命令\n\n### 模块管理\n\n在团队协作中，肯定会涉及通用模块的沉淀和使用问题，那么我们如何处理这些问题呢？\n\n通常情况下，我们将各类模块通过 npm 托管分发。\n\n### 代码规范\n\n团队协作，每个人的代码风格都不一样，除了个别开发者会自行配置代码检查，绝大部分同学很少有时间和动力为自己配置代码检查工具。\n\n这时，团队协作就面临以下问题：\n\n+   生产环境的代码未经漏洞审查\n+   即使通过漏洞审查，代码风格也不同，团队成员间的代码维护成本较高\n\n我们将代码检查工具化，极大简化成本。\n\n有两种方式统一代码风格并检查漏洞：\n\n+   开发阶段即统一代码风格\n+   提交到 git 仓库统一代码风格，开发阶段不统一\n\n两种方式都可以，看团队需求。\n\n### 分支管理\n\n现在大多数团队使用 git 进行代码管理。\n\n在开发阶段使用开发分支，生产发布**自动** `merge master` 合并主干。\n\n### 自动化测试\n\n+   本地开发阶段进行自动化测试\n\n    通过工具，将本地复杂的测试准备工作自动化，以便于在本地进行自动化测试。\n\n+   线上部署阶段进行自动化测试\n\n    线上部署阶段，很容易进行自动化测试的中心化管理，如果有项目没有写测试用例，中心化平台可以做各种操作，如暂停部署等。\n\n本地开发和线上部署两个阶段的自动化测试，需要有机结合起来，保证测试环境的一致性。\n\n### 部署\n\n部署阶段，因为是中心化的，所以更容易进行各种检测操作，以保证线上稳定。\n\n它需要：\n\n+   自动拉取项目代码\n+   代码规范检测（需和本地开发阶段保持一致）\n+   检查项目分支是否已合并 master，如没有，则暂停部署。避免进行回归测试。\n+   自动执行测试用例（需和本地开发阶段保持一致）\n+   自动编译打包\n+   健全的错误捕获机制，避免将问题代码发布到线上\n\n### 错误与性能监控\n\n对页面错误和性能的监控是必要的，随着团队规模的不同，监控系统接入的难度不同。\n\n其中，效率最低、准确性最差的是手动添加监控代码。这种我们放弃。\n\n自动添加监控代码包括：\n\n+   错误、性能监控脚本能够自动化添加到线上页面\n+   错误、性能监控能够自动化获取\n\n监控代码部署后，就通过各种手段展现、通知责任人，查看优化前后效果对比等。\n\n+   性能监控系统需要的功能\n\n    +   数据可视化\n    +   可以查看：全网/业务/页面 的数据表现\n    +   可以查询任意时间段的数据\n    +   可以查看表现变化情况（趋势）\n    +   秒开率计算算法符合逻辑\n    +   展示首屏网络传输各个时刻的状态（转场、查询缓存、dns 解析、建立 tcp 连接等）\n    +   找出瓶颈页面\n        +   20%、80% 的页面处于哪个时间区间\n        +   找到处于某个时间区间的有哪些页面，以及各种网络信息\n    +   消息通知\n        +   线上性能表现差时，通过消息通知责任人优化，精确到页面\n\n工具推荐：\n\n+   自动获取前端首屏时间：https://github.com/hoperyy/auto-compute-first-screen-time\n\n### 前端安全监控\n\nTODO...\n\n## 将工具收敛\n\n上面在涉及前端工程化的各个环节，我们都推荐了一些工具，可以设想一下，如果每个环节都有一个新的工具要使用，开发起来将是多么痛苦。\n\n所以，**前端工程化的一个重要里程碑，是一个工具做完大部分事情。**\n\n上述功能，我们建议集成到一个工具里，避免开发者频繁地切换工具。\n\n## 工具\n\n### webpack\n\nwebpack 的变化非常快，目前我们的尝试版本是 3.10.0。\n\n+   使用\n    +   [webpack 深入配置](https://github.com/hoperyy/blog/issues/2)(2017)\n    +   [webpack 经验谈](https://github.com/hoperyy/blog/issues/22)(2017)\n    +   [启动一个 vue 项目](https://github.com/hoperyy/blog/issues/1)(2017)\n    +   [项目个性化配置策略](https://github.com/hoperyy/blog/issues/113)(2017)\n    +   [解决 webpack/webpack-dev-server 监听文件时频繁触发编译和回调的问题](https://github.com/hoperyy/front-end-engineering/issues/4)(2017)\n    +   [用纯webpack结构替代gulp+webpack结构开发脚手架](https://github.com/hoperyy/blog/issues/3)(2017)\n    +   [脚手架与业务目录的目录结构浅析](https://github.com/hoperyy/blog/issues/110)(2017)\n\n+   分析\n\n    +   实现一个简单的 webpack：https://github.com/youngwind/fake-webpack\n    +   webpack 原理与实战：http://imweb.io/topic/59324940b9b65af940bf58ae\n    +   [Webpack 打包优化之速度篇](https://jeffjade.com/2017/08/12/125-webpack-package-optimization-for-speed/)\n    +   [Babel 插件开发指南](https://github.com/brigand/babel-plugin-handbook/blob/master/translations/zh-Hans/README.md)\n    +   [从零开始编写一个 babel 插件](https://juejin.im/post/5a17d51851882531b15b2dfc)\n    +   [写一个 babel 插件](https://cnodejs.org/topic/5a9317d38d6e16e56bb808d1)\n    +   [细说 webpack 之流程篇](http://taobaofed.org/blog/2016/09/09/webpack-flow/)\n\n### IDE\n\n强大的 IDE 可以让开发过程如丝般顺滑。下面是对前端开发而言，比较优秀的 IDE：\n\n+   VSCode: https://code.visualstudio.com/\n+   Atom: https://atom.io/\n+   Sublime: https://www.sublimetext.com/\n+   webstorm: https://www.jetbrains.com/webstorm/\n\n更重要的是，这些 IDE 提供了插件机制，想要的功能通过插件大部分能够实现。\n\n## 资料\n\n+   [webpack源码学习系列之一：如何实现一个简单的webpack](https://github.com/youngwind/blog/issues/99)\n+   [深入剖析 webpack 打包生成的一大堆代码到底是啥](http://blog.csdn.net/haodawang/article/details/77126686)\n+   [前端工程中遇到的各种问题记录](https://github.com/fouber/blog)\n+   [现代前端科技解析 —— Javascript Bundler](https://github.com/jin5354/404forest/issues/66)\n\n## LICENSE\n\nMIT","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhoperyy%2Ffront-end-engineering","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhoperyy%2Ffront-end-engineering","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhoperyy%2Ffront-end-engineering/lists"}