SegmentFault 技术周刊 Vol.29 - 聊聊前端工程化和我们用的利器

点击此处阅读原文：https://segmentfault.com/a/1190000010175303

在前端刀耕火种的年代，布局用 table 标签，CSS 样式大量内联；校验 JS代码是否规范，需要复制代码到 jshint（相信很多 “前辈” 对此都不陌生）；压缩合并代码，也是通过压缩工具压缩完再复制到一个文件里；修改了代码要查看效果，必须手动刷新浏览器；代码写好了要发布到服务器，需要用 FTP 软件上传，等等等等。

其实严格来说，那个时候还没有前端开发这个职位，那个时候叫切图仔或者页面仔，隶属于设计部或者其他什么部。CSS 不能预编译，也没有模块化，不能自动打包，而今天，这些都只要使用前端构建工具就可以实现了，我们也有了专门的前端开发岗位。如果当时的前端开发者穿越到现在，他一定会非常惊讶，并以为自己做了个假前端。

简单的来说，前端工程化就是把一整套前端工作流程中能用工具搞定的部分用工具搞定。

起源

前端的工程化

前端这个职位的诞生也有短短的十年。而在十年之前，我不认识你，那会还叫网页制作，用着一个Adobe非常牛逼的软件叫Dreamweaver。这是一个神奇的软件，绚丽多彩的网页通过它，拖拖拽拽，就这么梦幻般的生成了。网页制作师们，像一群织梦的妇人，心灵手巧，耐苦耐劳，从不抱怨。

我为什么这么强调前端工程化

WEB 前端开发这几年发展非常迅速，非常多的开发框架和构建工具涌现，可能你昨天还在用的工具、插件，到了今天就过时了。在 2 年前，我面试别人的时候，会问一些有没有接触NodeJS、 Grunt、gulp、ES6、Babel 这类技能的问题，超过半数的面试者会回答『没有』，或者说『只是刚刚接触，并不是很深入』。迫于招人急迫，我并不会直接说 NO，然后继续问一些 HTML、CSS、JS 前端三板斧的知识。 然而今年，如果应聘者不会这些技能，那真的很抱歉， 我不会接受一个没有走在前沿的开发者 。任何面试者都不会喜欢一个墨守成规的人。难道没人告诉你，外面的世界已经变了吗？

前端工程化知识要点回顾&思考

前端工程化相关问题是随着前端的发展越来越受到重视的问题，一套好的工程化解决方案能在提高开发效率(包括代码编写的舒适度及多人协作)的同时确保整个系统的伸缩性(各种不同的部署环境)及健壮性(安全)，同时在性能上又能有一个很优异的表现(主要上各种缓存策略加载策略等)，而且这套方案又应该是对工程师无感知(或感知很小)趋于自动化的一套方案。总之，要达到这个目的前端工程化还有很长一段路要走。

F++：别忽略前端工程化的部署与测试

前端工程可以说是软件工程的一个细分领域，流程相似，但特点鲜明。先来说说前端，当然我指的是Web前端，相比其他方向的技术有什么特点：

工欲善其事

我终于弄懂了各种前端build工具

Node, NPM, Grunt, Gulp, Bower, Webpack, Browserify, Yeoman, Brunch……诸多的名词让你一时间感到手足无措，好像根本学不完。 其实关键就是，不要被它们唬住。要知道，所有这些工具，其最初的设计目的，都是要让你的工作变得更简单。 要想弄明白这些工具是什么、如何工作以及为何要使用它们，你其实只需要抓住少数几个核心概念。

前端工程化工具初选

面对日益纷杂的前端工具，作为新人常感无从下手。经过一番检索和简单对比，再结合自己的喜好，筛选了将要学习和使用的工具，以适应日益工程化、专业化的 Web 前端开发工作。

写给后端看的前端技术——webpack（上）

不懂“前端”说的virtual dom、ReactJS、Vue、Angularjs这一大堆东西，也不懂前端说的ES6的优雅，也不知道为啥我用Bootstrap、jQuery就得“剁手”。世界上总得有一篇文章是写给后端工程师看的，后端写给后端看的，不装逼，认认真真。我决定用webpack作为学习前端的第一步，一方面是由于“Build工具”几乎是学习前端的第一道门槛；另一方面它已经“千秋万代一统江湖”了所以请无视——gulp、grunt之类的吧。

php工程狮感知的前端工作流程

这个时代不懂点前端知识，真的没有办法生存。就算不会写，也得了解它的原理吧！最近做了一些总结，之前都是迷迷糊糊，搞不清楚前端之前的相关定位。好好梳理了一下。错误之处请各位指正。

本文主要说的是 JavaScript 工作流程。

前端工程化

从零开始，教你如何开始前端自动化

什么是前端自动化构建就不说了，应为我不是写书的。在前端开发实践中，大公司都会有自己的基础前端架构，能容包括了开发环境、代码管理，代码质量，性能检测，命令行工具，开发规范，开发流程，前端架构及性能优化。相对而言，小公司或则是创业型的公司，前端架构这块做得就相对没有这么好，甚至于很不规范，而规范的目的在于提升工作效率。

[ 前端实习日记 ] 构建静态页面基础架构

以前我们敲静态页面都是写好html，css, js，然后再去刷新浏览器，艾尼马又不行，有重新写过再刷新，一个页面下来按chrl+r的次数可让你的键盘多活好几天，要不会刷新快捷按钮那不得手残了都。
后来，grunt,gulp等工具应运而生，当然它们不止这个功能，但却很好地减轻了我们的负担。这篇文章介绍一些如何使用这些工具使构建页面变得简单高效。这只是个人的目前在用的不成熟的方案，更专业的还请参考百度FIS。

精益 React 学习指南 （Lean React）- 2.1 前端工程化概述

在前端开发的初始阶段，开发者通常只用关 html, css, javascript。但是现代化的前端开发已经不仅仅是业务代码本身，真正的前端开发环境涉及很多方面的需求，如：
- 开发需求
- 共享需求
- 性能需求
- 部署需求

这些东西我们都统一的叫做前端工程化，为了简化前端工程化的配置，出现了很多优秀的工具

精益 React 学习指南 （Lean React）- 2.4 webpack + gulp 构建完整前端工作流

React 在大多数情况被当做当 SPA （单页面应用）的框架，实际上在真实业务开发过程中，非单页面应用的业务框架居多。所以我们在构建前端工程的时候，以多个页面的方式维护。下面定义前端工程的目标：
- 基础技术
- 应用模式
- 样式结构

gulp

初探前端自动化神器 （Gulp）

Gulp 是一个构建系统，开发者可以使用它在网站开发过程中自动执行常见任务。Gulp 是基于 Node.js 构建的，因此 Gulp 源文件和你用来定义任务的 Gulp 文件都被写进了JavaScript（或者CoffeeScript）里。前端开发工程师还可以用自己熟悉的语言来编写任务去 lint JavaScript 和 CSS、解析模板以及在文件变动时编译LESS 文件（当然这些只是一小部分例子）。

gulp前端自动化工具的快速入门案例

最近项目和工作中要开始使用自动化工具了，回想一下以前接触这个的时候就是什么nodejs，grunt之类的了，这次干脆就用一个新的，那么就是gulp

gulp构建前端自动化

grunt是前端工程化的先驱
gulp更自然基于流的方式连接任务
Webpack最年轻，擅长用于依赖管理，配置稍较复杂
推荐使用Gulp，Gulp基于nodejs中stream，效率更好语法更自然,不需要编写复杂的配置文件

webpack

[新姿势]前端革命，革了再革：WebPack

五年间，NodeJS成为了服务端以及脚本工具的一代翘楚，NPM的成功让大家意识到一个集中式的依赖／包管理体系的重要性，Bower应运而生，还有试图将CMD和NPM包带到前端领域，统一前后端包格式的Browserify等等，大量的前端工具爆发式地出现，WebPack是其中的(又)一款模块打包工具。

[译] Webpack 前端构建集成方案

构建工具逐渐成为前端工程必备的工具，Grunt、Gulp、Fis、Webpack等等，译者有幸使用过Fis、Gulp。
前者是百度的集成化方案，提供了一整套前端构建方案，优点是基本帮你搞定了，但是灵活性相对比较低，社区也没那么大；后者提供了非常灵活的配置，简单的语法可以配置出强大的功能，流控制也减少了编译时的时间，可以和各种插件配合使用。
译者因为要使用AMD模块机制，开始接触了webpack，发现官网上讲的晦涩难懂，无法实践，而国内虽有博客也讲解一些入门的教程，但是要么篇幅过短，要么只讲各种配置贴各种代码，然后谷歌发现了国外大牛写的这篇博客，发现讲的非常通俗易懂，配合实践和代码，让译者感慨万千，瞬间打开了一扇大门。

webpack学习（一）—— 入门

本文主要内容译自webpack入门，以一些小的demo对webpack做了简单介绍，每个步骤都很简单明了，适合对webpack完全不了解的新手阅读，以对webpack有个基本的了解。

webpack学习（二）—— 进阶

本文将介绍如何使用webpack对具有较为规范的结构的项目进行构建。主要包括以下几个方面：

webpack学习（三）—— webpack-dev-server

本文主要介绍以下两方面的内容：
- webpack-dev-server自动刷新
- 热加载（Hot Module Replacement）

webpack学习（四）— code splitting

首先说，code splitting指什么。我们打包时通常会生成一个大的bundle.js(或者index,看你如何命名)文件，这样所有的模块都会打包到这个bundle.js文件中，最终生成的文件往往比较大。code splitting就是指将文件分割为块(chunk)，webpack使我们可以定义一些分割点(split point)，根据这些分割点对文件进行分块，并实现按需加载。

webpack 进阶

详解webpack-dev-server的使用

webpack-dev-server是一个小型的Node.js Express服务器，它使用webpack-dev-middleware来服务于webpack的包，除此自外，它还有一个通过Sock.js来连接到服务器的微型运行时。

webpack-dev-server使用方法，看完还不会的来找我~

webpack-dev-server主要是启动了一个使用express的Http服务器。它的作用主要是用来伺服资源文件。此外这个Http服务器和client使用了websocket通讯协议，原始文件作出改动后，webpack-dev-server会实时的编译，但是最后的编译的文件并没有输出到目标文件夹。

重写webpack多页应用配置脚手架

历经了多个web项目的实战检验，我们对webapck在构建中逐步暴露出来的性能问题归纳主要有如下几个方面：
- 代码全量构建速度过慢，即使是很小的改动，也要等待长时间才能查看到更新与编译后的结果（引入HMR热更新后有明显改进）；
- 随着项目业务的复杂度增加，工程模块的体积也会急剧增大，构建后的模块通常要以M为单位计算；
- 多个项目之间共用基础资源存在重复打包，基础库代码复用率不高；
- node的单进程实现在耗cpu计算型loader中表现不佳；

针对以上的问题，我们来看看怎样利用webpack现有的一些机制和第三方扩展插件来逐个击破。

基于webpack+gulp搭建纯静态页面型前端工程模板

基于webpack搭建纯静态页面型前端工程解决方案模板。

5分钟打造简易高效的webpack配置

5分钟从零搭建一个简易高效的webpack开发环境。首先我们明确一下需求：
- 打包调试
- 提取公共代码
- 压缩
- 热替换

webpack分包及异步加载套路

前行

工具武装的前端开发工程师

《基于React的前端工程实战》大纲，也是笔者心中的前端学习路线图

本书最大的优势在于形成了完整的知识体系结构，让你合理归纳自己学到的知识，将知识放在它该在的地方。另外笔者想强调的是，无论React还是Vue或者Angular2都是非常优秀的前端框架，使用哪个框架还是属于术的范畴。本书虽然立足于React，但是其中蕴含的设计模式与工程架构可以通用于任何框架。笔者也着力于不希望受到某个具体框架的太多的束缚，毕竟在这个日新月异的前端世界，说不准哪天就落于人后了。

写给想做前端的你

给大家的建议
- 道阻且长，冰冻三尺非一日之寒；
- 广泛地学习，有条件和能力的同学尽早地接触客户端开发，更多地了解服务端开发；
- 前端大有可为，新技术的发明者大多不是老东西，老东西经验足但是历史包袱重；
- 只在浏览器中思考必死无疑；
- 像一位同学提到的，打好基础，offer就有。学校里倒腾几年真的很难搞出什么大新闻，面试官也不会刻意为难你；
- 测试测试测试，前端测试值得学习掌握，比如e2e，这是一个机会：我能告诉你很多公司的前端测试都瞎JB点吗？
- 学习一些函数式编程的思想，例如：lodash、Redux、RxJS；
- 拿到offer只是开始不要嘚瑟。

前端开发讲座推荐

讲座主题：基于 Vue.js 2.x 的 iView 组件开发实践

讲师介绍： Aresn，基于 Vue.js 的开源 UI 组件库 — iView 的作者。现在大数据公司 TalkingData 负责可视化基础架构。创办了高逼格程序员社区 TalkingCoder。目前正在出版《Vue.js实战》。除了前端，也对 Python、Hybrid、Electron 等技术感兴趣。

讲座主题：web 安全之 xss 漏洞攻击

讲师介绍：耗子，阿里巴巴前端技术专家，原奇虎 360 移动搜索前端负责人。“前端的那点破事” 社群创立者。擅长领域：前端工程化、web 安全攻防、性能优化、项目管理。

讲座主题：【公益】学习 Vue 你需要知道的 webpack 知识

讲师介绍：KingMario，VMware Frontend Tech lead、Vue 生态建设积极参与者，曾供职于中兴通讯、携程、安硕信息、纬路科技等公司，极客学院 Vue.js 课程签约布道师，SegmentFault Vue.js 标签名人榜排名第一，为 Vue.js、vuex、vuejs.org、vue-i18n……多次贡献代码及文档。

讲座主题：Vue实战：打造属于你的博客发布系统

讲师介绍：jrainlau，目前就职于招联消费金融有限公司，担任前端工程师一职。对一切新技术保持着好奇心，尤其是活跃的前端圈子让我一直非常着迷。主要技术栈是Vue.js，早在2015年的Vue.js 1.x时代已经用其构建大型项目，也造了不少的轮子。常年混迹于Segmentfault，稀土掘金，V2EX，Medium，Raddit等国内外技术社区，也贡献了多篇文章。

讲座主题：前端面试攻略：JavaScript 排序与搜索

讲师介绍：翟路佳，热爱编程，希望把程序员作为终身职业。享受不断学习、不断进步的过程，享受解决难题后的畅快。
从业10年有余，目前是一名全栈工程师，技术偏前端。
喜欢分享，好奇心旺盛，喜欢琢磨产品，喜欢观察商业模式。

（本期完）

# SegmentFault 技术周刊 #

「技术周刊」是 SegmentFault 社区特别推出的技术内容系列，两周一更新。周刊筛选的每篇内容，是作者的独到见解，踩坑总结和经验分享。

欢迎「关注」或者「订阅」。大家也可以在评论处留言自己感兴趣的主题，推荐主题相关的优秀文章。