本书作者 周俊鹏 ，是 boi 的作者。虽然 boi 这款前端构建工具 star 不是很多，但是不妨碍作者对前端工程化的深入和理解，毕竟术业有专攻。
不到一周时间（业余时间）草草看完本书，没太详细看细节，因为我平时工作基本用不到。阅读本书权当作为对前端工程化的一个统一的了解和认识，毕竟此前都是在零零散散的项目中接触，没体系的看过。
本书具有阅读价值的章节如下：
- 第二章 脚手架
- 第三章 构建
- 第四章 本地开发服务器
- 第五章 部署
光看以上的标题，基本也都涵盖了前端工程化的所有要点。因此，想要构建完整的知识体系，还是看书最快最有效。我也正好借助本书，来梳理一下**如果从零开始构建一个前端开发环境，都需要做哪些工作？**这是本文的最终目的。
脚手架，即初始化项目环境的所有文件，例如 create-react-app 和 vue-cli ，可以一键构建 React 和 vue 的开发环境。后续的构建、本地 server 、部署等步骤需要的文件、插件，都需要在脚手架初始化的时候都全部搞定。一次性使用，用完即弃。
至于什么好处、收益，书中写了不少，大体就是较少成本、减少配置云云，不再赘述。
Yeoman 是 2012 年 Google I/O 大会发布的脚手架工具解决方案，它不能直接使用，而是提供了一套完整的脚手架开发的 API ，完全开放，高度可扩展。即可以借助 Yeoman 轻松开发自己的脚手架构建工具。
书中介绍了如何使用 Yeoman 开发一个脚手架，我没有详细看。后面如果自己遇到该类需求，再去查阅 Yeoman 文档。
构建工具是前端工程化的核心部分，也是文章最大篇幅介绍的部分。
构建，也叫做编译。就是将开发环境手写的代码，转换成能被浏览器（或者 nodejs）识别的代码的过程。除了语言转换之外，还要考虑一些性能、开发效率等相关的问题，例如文件合并、图片 base64 嵌入、文件名加 md5、路径识别等。记得之前看过 fis 文档中总结的前端构建工具的 三种语言能力，很有道理，如下：
- 资源定位：获取任何开发中所使用资源的线上路径；
- 内容嵌入：把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中；
- 依赖声明：在一个文本文件内标记对其他资源的依赖关系；
接下来书中的内容都是介绍以下两点：
- ES6 + Babel
- CSS + PostCSS
大体读来，感觉作者在这两点很强调和赞同一个趋势 —— 第一，写代码应该向标准（ES6、CSS等）靠近，而不是在代码中屈就于浏览器兼容性；第二，构建工具用于抹平标准和浏览器兼容性的差异，但前提是不能妨碍标准。 简单解释一下。
例如。我们可以在开发环境中写标准的 ES6 代码，babel 会编译成浏览器识别的 js 。我们可以在开发环境写标准的 css 代码，PostCSS 会编译成各个浏览器兼容的 css 。说到这里，作者大赞 PostCSS 相比于 less sass 这些预编译工具的优点 —— 面向语言标准、而非面向浏览器差异。所以称，PostCSS 是 CSS 的 babel 。
但是，构建工具在抹平过程中也不能掺杂自己私定的标准。例如，fis 在生成雪碧图的时候要求这样写 css
.icon_home { background-image: url('home.png?__sprite') }很明显，这里的?__sprite，除了 fis 其他谁的都不认识它。构建工具要服务于开发环境，而不能造成二次影响。
模块化这部分主要讲了两件事儿：
- 分模块异步加载 ：AMD 本身支持异步加载，而 webpack 对 AMD 的支持并不好。不过在开发环境可以使用 CommonJS 和 ES Module ，虽然这两者标准上不支持异步加载，但是 webpack 可以通过
require.ensure和import()函数来间接支持。（个人思考： webpack 的这种支持方式不是标准化，前端异步加载尽量使用 AMD 方式，至于如何借助工具实现这种方式，尚需调研……） - 使用缓存策略增量更新 ：说白了就是打包出来的静态资源加上 hash 指纹，通过这种方式来清楚缓存。加 hash 指纹或者 md5 后缀是基本功能，所有的构建工具都支持。文章继续扩展，讲到了更加复杂的按需加载和增量更新的结合，提出了各种使用 webpack 具体解决方案，我并没有详细看。
webpack 对于一部加载、分模块打包、按需加载等这些的配置，我暂时还没有搞明白，这算是自己有理论无实践的技术盲区。我觉得原因有两点：第一，webpack 配置复杂度确实太高；第二，自己没有真正理解这块的整体流程，因此看不透 —— 对于这种问题，只能抽专门时间针对性学习。
你可以不学甚至讨厌 webpack 如此复杂的配置文档，但是你必须掌握这部分实现原理和流程。
资源定位，即能识别资源之前的相互引用关系（如 html 引用了某些 js 和 css），以及根据引用关系确定打包之后的最终地址。例如，开发环境代码是../static/xxx_hash.js，发布之后就是https://static.xxx.com/static/xxx_hash.js，而且要把xxx_hash.js上传到 CDN server 端指定的位置。
webpack 的逆向注入模式，即构建工具打包出xxx_hash.js之后再逆向插入到 html 模板中。如果按照正常的注入方式，在一开始就要往 html 模板中插入<script>的话，并不知道接下来将打包出来的hash值是啥。
接下来书中又顺着逆向注入方式讲解了很多更加复杂的业务场景，我没有仔细看。一来目前用不到，二来看起来这部分还挺复杂的。
最后，总结一下现在开源社区中常用的前端构建工具有：
- Grunt （基本被弃用）
- fis （基本百度内部使用）
- Gulp
- webpack
- parcel （近期新出的，尚未用过，待抽空研究一下）
本文基本都是参照 webpack 的实现来讲解构建工具的各个要素，除了作者对 webpack 研究够深，也说明 webpack 的社区够大。如果要从零构建一个前端开发环境，构建工具选用 webpack 是最稳妥的选择。
本地 server 肯定是前端工程化中必不可少的内容，如 webpack 社区有 webpack-dev-server 。本地 server 用于解决两个问题：
- 动态构建
- Mock
webpack 的集成环境已经对动态构建和 Mock 做了完善的处理，Mock 可以使用本地代理的方式来搞定。文章从专业的角度讲述了更多内容，我并没有详细看。感觉这部分使用 webpack 还能满足目前工作的要求，尚没有其他疑问。
注意，这里的“部署”仅仅是将发布的代码部署到测试机的过程。处于安全考虑，发布流程通常交友专业的运维人员负责，或者用专业的运维平台来限制性的操作，不能人人都有发布权限。
要实现部署流程，需分三步：
- 制定配置策略：得在配置文件中写明白将部署的机器 host patch user passeord 等信息
- 实现部署行为：以 SFTP 协议为链接协议
- 开发命令行接口，提供一键部署方案。这个主要是针对构建工具的，例如
fisp release等这种命令的封装。
其中第二步。SFTP 是 SSH 协议的一部分，全称 Secure File Transfer Protocol ，使用 node-ssh2 封装非常简单，可看文档 demo。
公司内部的开发也有用 webpack 做构建工具的，但是最后还得用 fis 进行部署。
其实这是“第六章 工作流”的内容，但是内容比较少，就拿到这里总结一下得了。git 中需要如下分支：
- master 主分支，存储已发布的源码，不能在此分支上开发，只能合并 hotfix 和 release 分支。可以此为基础拉其他分支。
- hotfix 热修复分支，修复紧急 bug ，以 master 为基础新建。（hotfix 是代指，不同 bug 拉的分支名称可能不一样）
- release 预发布分支，提测分支，可在此基础修复 bug 。以 dev 分支为基础新建或者合并 dev 分支。
- dev 开发分支，用于汇总个 feature 分支，只能合并，不能在此分支进行开发
- current-feature 当前版本迭代功能的分支，业务开发人员均在该分支进行开发
- future-feature 未来版本迭代功能的分支
经过对本书的总结，发现从零构建一个前端开发环境，所需要的就这么几点：
- 脚手架：React 和 vue 的有现成的脚手架。如果需要自己开发，那就根据实际情况来。
- 构建功能：以上总结的所有要点，webpack 都支持。图省事儿，就直接选择 webpack ，虽然配置文件稍微复杂一点。（当然，如果有自己的技术 KPI ，也可以造轮子）
- 本地 server：webpack 同样也都支持。
- 部署：和构建工具是分开的。可以自己开发也可以选择例如 fis 这样现成的工具。
- 用 nodejs 来开发命令行工具 commander.js
- 号称零配置的前端构建工具 parcel （直指 webpack 那复杂的配置文档）
- nodejs 实现 SFTP 上传的工具 node-ssh2
- 遗留问题：对于 webpack 进行动态构建打包的配置和使用的了解尚不够。