前端工程化发展历史（译）

毕业前对前端工程化一直没有什么切身的体会，现在工作也有半年多了，体会也越来越深，npm，yarn，Webpack ，gulp，Babel，ESlint，TypeScript 最近准备一一去深入了解一下，看到一篇不错的关于前端工程化的发展过程，就翻译了一下，How it feels to learn JavaScript in 2016，虽然说是 2016 年的文章，但现在看来依旧不过时，也侧面说明了前端也渐渐趋于稳定了。

以下是全文：

对的，但更准确的说我是前端工程师(Front End engineer)。可视化、音乐播放器、足球游戏，凡是你能想到的都属于前端开发。我刚刚从 JS 大会(JsConf)和 React 大会(ReactConf)回来，因此我知道创造 Web apps 最新的技术。

天哪，不不不，已经没有人再用 jQuery 了。你应该去学习 React，现在已经 2016 年了！

它是由 Facebook 几个大神创造的一个非常 cool 的框架，它能帮助你轻松的控制视图，更好的管理项目，提升性能。

可以的，但你首先得在你的页面中引入 React 和 React Dom 这两个库。

React 是它的核心库，而 React Dom 是用来操控 Dom 的，通常你需要用 JSX 去描述 DOM。

JSX 是一种 JavaScript 的语法扩展，看起来更像 XML。它是描述 DOM 的一种新的方式，比 HTML 会更好。

孩子，已经 2016 年了，没有人直接去写 HTML 了。

emmm，还不太行。你还需要添加 Babel 这个库。

Babel 是一个可以帮助你把任意版本的 JavaScript 代码转换成你要的版本。但如果你坚持只使用 ES5 的语法，Babel 也可以不引入。但现实点吧，现在是 2016 年了，你应该向大家一样，使用 ES2016+ 的语法了。

ES5 代表 ECMAScript 5，它是使用人数最多的一个版本，几乎所有浏览器都支持 ES5 的语法。

它是在 1999 年提出的一个语言规范，JavaScript 属于其中的一种实现。 JavaScript 是 1995 年提出的，之前还叫过 Livescript，仅仅运行在网景的浏览器中。之前这些非常混乱，现在由于有 ECMAScript 的 7 个版本，一切都变得很清晰了，

分别是第 5 个和第 7 个版本。

你的意思是 ES6？由于每个版本相当于之前版本的超集，所以如果使用 ES2016+，之前版本 ES6、ES5 所有的特性你就都可以使用了。

当然可以，但你不能使用一些最新的特性，比如 async 和 await。你只能通过 ES6 的生成器和协程来执行「同步」的形式异步请求，感兴趣的话可以看一下 co 框架。

大哥，已经 2016 年了，没有人再使用 jQuery 了，它只会让你写出意大利面条式的代码。

是的，但你还需要用一个模块管理器把这三个库打包成一个文件。

它的定义取决于语境，不过在 Web 中，只要支持 AMD 和 CommonJS 模块的话就可以称为模块管理器了。

按照定义来说，他们是描述不同的 javaScript 的库和类模块如何相互作用的不同规范，也就是常说的模块化。你听过 exports 和 require 吗？你可以通过 AMD 或者 CommonJS 编写不同的 js 模块，然后可以使用 Browserify 把这些文件打包起来。

它是一个可以将我们工程依赖的、由 CommonJS 编写的 js 模块打包起来，使其可以运行在浏览器中的工具。之所以有这个工具，是因为我们所依赖的那些模块往往被发布在 npm registry 中。

它是一个存放着世界各地的人们编写的代码模块的仓库。

不太一样。它更像一个中心仓库，人们可以在上边发布和下载模块。你可以把模块下载下来在本地使用，也可以把它们上传至 CDN 上然后使用。

是的，但现在是 2016 年了，没有人再使用 Bower 了。

是的，如果你想使用 React，你只需要下载 React 模块，然后 import 到你的代码中就可以了。你几乎可以使用 npm 下载现在所有流行的 javaScprit 库。

是的，不过 Augular 是 2015 年的事情了。虽然 Augular 现在也还在用，但 2016 年有了 VueJS 或者 RxJS 这些新的库，你要学一学吗？

是的。

对，所以你需要使用一个任务管理器来自动化的运行 Browserify，例如 Grunt、Gulp 或者 Broccoli ，甚至可以使用 Mimosa。

它们都是任务管理器，但现在看起来一点都不 cool 了。我们在 2015 年的时候使用它们，之后还用过 Makefiles ，但是现在我们通过 Webpack 把所有功能都集成在一起了。

是的，但是你懂的，在 Web 领域，我们总是喜欢先把事情搞复杂，然后再回归起点。这些年我们总是这样，你等着吧，再过一两年我们肯定就能在 web 上写汇编代码了。

它是另一种浏览器的模块管理器，同时也是一种任务执行器(task runner)。他更像是 Browserify 的升级版。

也许吧，它可以帮你更好的管理模块之间的依赖。Webpack 允许你使用不同的模块管理器，除了 CommonJS 类型的模块，最新的 ES6 的模块也是支持的。

大家都是这样，但通过 SystemJS 的话你就不用关心它们了。

和 Browserify 以及 Webpack 1.x 不同，SystemJS 可以动态加载模块，允许你将不同模块打包成不同文件，而不是打包到一个大文件中。

是的，但由于 HTTP/2 的时代要来临了，它会支持请求多路复用。

也不是。我的意思是我们可以把依赖的库作为外部的脚本从 CDN 中加载，但 Babel 库仍然需要加到本地的。

对的，你需要引入整个 babel-core，对于线上环境来说效率很差。你需要做很多的前置动作才能让项目准备好，压缩资源、混淆代码、内联 css 、延迟加载 js，还有...

我会使用 Webpack + SystemJS + Babel 的组合从 TypeScript 转化。

TypeScript 就是 javaScript，更准确的说是 javaScript 的超集，或者说更具体点，是 ES6 版本的 javaScript 的超集。

因为它允许我们写 javaScript 的时候定义类型，从而减少运行时的错误。现在已经是 2016 年了，是时候在 javaScript 代码中添加类型了。

虽然 TypeScript 是 javaScript 的超集，但它还需要编译成 javaScript 才能在浏览器运行。而另一种工具 Flow 就仅仅做类型检查，无需编译。

它是 Facebook 的几个人开发的一个静态类型检查器，他们使用 OCaml 语言去写的，因为函数式编程看起来很酷。

这是如今那些 cool kids 使用的，函数式编程、高阶函数、柯里化、纯函数。

没有人一开始就会的。你只需要知道函数式编程比面向对象更好，并且这是 2016 该采取的方式就可以了。

就像 java 被 Oracle 收购前一样好，哈哈，我意思是面向对象过去很辉煌，当然现在依旧很多人在使用。但是现在很多人都意识到修改对象状态是一个太危险的事情了，所以大家都转向了不可变对象和函数式编程。Haskell 语言已经这么做很多年了，但不要和我提 Elm 那些人。幸运的是，原生 javaScript 也可以通过 Ramda 这样的库进行函数式编程。

不，是 Ramda，和 Lambda 表达式类似，它是 David Chambers 创建的库。

David Chambers ，一个大神，喜欢玩 mean Coup game，是 Ramda 的贡献者之一。如果你想更深入的了解函数式编程，你还需要知道 Erik Meijer。

另一个函数式编程的大神，他有很多演讲抨击过敏捷编程。当然感兴趣的话你还可以去了解 Tj, Jash Kenas, Sindre Sorhus, Paul Irish, Addy Osmani--

emmm，你不是用 React 获取数据，你只是用它展示数据。

你可以用 Fetch 去从服务器 fetch the data。

Fetch 和 XMLHttpRequests 一样是浏览器的原生实现，是为了从服务器获取数据。

AJAX 只是基于 XMLHttpRequests 的封装，而 Fetch 可以让你使用 Promise 风格去异步请求数据，从而避免回调地狱。

就是由于网络请求是异步的，你需要在回调函数里边去获取数据，如果此时又需要网络请求，那就需要在回调函数里再调用网络请求，然后再加回调函数，如果再请求网络...会变得越来越乱。

是的，通过 promise 你可以更轻松的管理异步请求，写出易于理解的代码，同时调用多个网络请求。

是的，但是你得保证你用户的浏览器是最新的，否则你需要 Fetch 的 polyfill（兼容不能用 Fetch 的浏览器），或者使用 Request，Bluebird 或者 Axios。

这就是 javaScript，有成千上万个库去做同样的事情，当然我们可以从中选出一个最好用的。

它们是基于 XMLHttpRequests 实现的 promise 风格的请求库。

忘记 jQuery 吧，去用 Fetch + polyfill，或者 Request，Bluebird， Axios。我们可以通过它们在 async 函数中 await 异步请求，就像顺序编程一样。

await 允许你阻塞异步请求，让你更好的控制异步请求，然后处理数据，大大增强了代码的可读性。这非常方便，但你记得要加 stage-3 preset 的 Babel，或者通过 transform-async-to-generator 插件使用 syntax-async-functions 。

不不不，真正麻烦的地方在于首先要编译 Typescript 代码，然后再用 Babel 转化才能让 await 被浏览器认识。

1.7 是不支持的，它只会被编译成 ES6，预计下一个版本才会支持。所以你只能先把Typescript 编译成 ES6，然后再通过 Babel 把它转换成 ES5，以便兼容更多的浏览器。

其实挺简单的。就是用 Typescript 写代码，所有模块都用 Fetch 去请求，加上 Babel 的 stage-3 preset ，然后使用 SystemJS 去加载它们。为了让 Fetch 兼容更多浏览器，记得加 polyfill，或者使用 Request，Bluebird 或者 Axios，并且使用 await 去等待所有的 promise。

你的应用要控制所有 state 的变化吗？

那太好了，不然我还得向你解释 Flux ，以及它的一些实现，比如 Flummox, Alt, Fluxible。但说实话， Redux 会更好用些。

哦哦，如果只是展示数据，你其实不需要 React，用一个模版引擎就好了。

我只是想告诉你你能用什么。

其实如果用模版引擎的话，我还是推荐你继续使用 Typescript + SystemJS + Babel 的组合。

有很多，你之前有用过什么吗？

jTemplates? jQote? PURE?

Transparency? JSRender? MarkupJS? KnockoutJS? 这一个支持双向绑定。

PlatesJS? jQuery-tmpl? Handlebars?这些还有些人在用。

PlatesJS? jQuery-tmpl? Handlebars? 甚至 lodash 都有一个模版引擎，但这已经是 2014 年的事情了。

Jade? DustJS?

DotJS? EJS?

Nunjucks? ECT?

对的，应该没有人喜欢 Coffeescript 的语法了。那 Jade?

我的意思是 Pug，也是 Jade。现在 Jade 叫 Pug 了。

也许会用 ES6 支持的原生模版字符串。

对的。

对的。

对的。

对的。

对的。

对的。

对的。

对，记得不要忘记给 Fetch 加上 polyfill，有些浏览器目前还不支持这个特性。

问题不大，也许未来我们就会使用 Elm 或者 WebAssembly 了。

哈哈，你应该去了解一下 Python 社区。

听过 Python 3 吗？（ python 3 没有向前兼容 pyhon 2，差异巨大）

总结一下，前端之所以发生这么大的变化，我觉得一个很关键的点就是 Node.js 的出现。它使得 js 可以脱离浏览器去运行，还提供了读写文件的能力。从而可以在本地进行编译、转换 js 文件，将打包完成的文件运行在浏览器中。

我们可以不去考虑浏览器支持的语法，各种模块化、ES 的新特性，放心大胆的用就可以了，大不了最后再转换就可以了。

此外 node.js 也使得 javaScript 可以写一些服务器端的应用，自己只用它写过一些 Web 接口，其他的了解不多。