《从零构建先后分离的web项目》：前端了解过关了吗？

# 前端基础架构和硬核介绍

技术栈的选择

首先咱们构建前端架构须要对前端生态圈有一切了解，而且最好带有必定的技术前瞻性，好的技术架构可能往后会方便的扩展，减小重构的次数，即便重构也不须要大动干戈，我一般选型技术栈会参考如下三点：

1、提出自身业务的需求

• SEO 是否很是重要？
• 主要面向：移动端仍是 pc 端？
• 是否有开发 app 的规划？

有了这样的问题咱们能够带着问题去重点选型一些这写问题技术方案比较成熟的技术栈。

2、自身是否成熟，文档是否友好

这里举一个之前开发过程当中实际遇到的，当时为了优化用户体验，节省开发效率 选型了一款 MVVM 轻量框架，惋惜当时没有决定权， CTO 选型了 avalon

当时之因此没有选择 backbone ，主要是由于没有成熟的中文文档，考虑到团队的流动性和上手性暂时没作考虑，最终选择了 司徒正美的 avalon 当时来讲仍是比较前卫的，也有一些以去哪网为首的大公司都在用。咱们当时用的时候 avalon2 刚出不久，直接用的 2.0，使用过程也出现了一点问题：文档离散，这一块那一块，存在后置性，生态少，扩展性价比不高 ，有时候遇到匪夷所思的 bug 寻找缘由翻了几遍 demo 、文档 可能会找到答案，没有重点标识。固然就当时来讲确实是给咱们提高了部分开发效率，可是我可能当时更偏向 Angular 或 vue 的。由于他们有无以伦比的生态圈和各类问题的技术方案以以及完善的开发者文档，值得一提的是 avalon 的做者是兼职维护的，若是全栈运营的话，我相信远比如今更好，看一看 avalon 的源码也会对本身有很多的提高。对于生产的技术选型要更加谨慎。

3、了解其生态系统

上文提到了生态系统，以我比较经常使用的 vue 来举例，vue 发展至今仅官方为咱们提供了以 vuex、 vue-router、 vue-loader、 vue-cli、 vuepress、 vue-devtools、 vue-ssr 为首的 89 个开源项目，包括无数的 vue 相关的 UI 库，vue 插件 甚至是近两年淘宝提供的 Hybrid ： weex 的支持

截止今天 github 开源的 与 vue 相关的项目多达 167,752 个，与 angular 相关的多达 416,811 个，与 react 相关的 多达 594,272 个。

统计时间 2018-09-01

我想有了这样的生态支持，彻底能够知足咱们中小项目的 95% 以上的需求，至于比较哪一个更强是没有意义的 。

由于比较熟悉让我斗胆私自选择 vue 做为咱们的 SPA 主架构

4、画出咱们指望的前端基础架构模型

由于咱们上一章选型了 Vue，若是只考虑前端咱们最初的想法:技术栈大概是这样的：

经过 node 和 webpack 的支持 把 vue 组件 build 打包成传统元素，发布到 http 服务中，请求后端服务。

随后多是这样的：

随着目前主流第三方库的愈来愈多和技术的尝鲜、客户端的需求、或被动[不得不用]、或主动的去引用了 babel less sass *.loader 和 hybrid 等组件库。

再后来的技术栈须要咱们根据真正踩坑以后才会逐步完善

多是 polyfill 懒加载 xss protobuf 等 针对 浏览器兼容、速度优化、 SEO 、通讯协议 等具体问题。因此，前期能够不用过多考虑，咱们只要知道：这个问题咱们是能够解决的，可是如今能够先不去考虑，有些同窗，太过于“完美主义”以致于想法不错，但动起手来作了几天就不作了，完美主义害死人。

了解 Webpack

WebPack 能够看作是模块打包机器，它能够分析你的项目结构，找到 JavaScript 模块以及其它的一些浏览器不能直接运行的拓展语言：Stylus、Scss、less、TypeScript、CoffeeScript 等，并将其转换和打包为合适的格式供浏览器使用。比较经常使用的还能够经过 webpack-dev-server 进行开发模式的热更新

WebPack 是一种模块化开发的方案

当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序须要的每一个模块，而后将全部这些模块打包成一个或多个 bundle

webpack 经过 loader 能够支持各类语言和预处理器编写模块，最后打包为一个（或多个）浏览器可识别的 JavaScript css 文件

目前支持的 loader 列表

了解 ES6

官方说法

ECMAScript 6（简称ES6）是于2015年6月正式发布的JavaScript语言的标准，正式名为ECMAScript 2015（ES2015）。它的目标是使得JavaScript语言能够用来编写复杂的大型应用程序.

科普

不少人老是搞不清楚 ES 这些东西，这里大白话讲讲：
他们的前后顺序是：ES五、ES6(ES2015)、ES七、ES8

在 2015 年 6 月 ES6 的第一个版本发布， 正式名称就是 《ECMAScript 2015 标准》（简称 ES2015）算是 2011 年 ECMAScript 5.1 以后的 6.0版本
2016 年 6 月，小幅修订的《ECMAScript 2016 标准》（简称 ES2016）[由于改动小，其实他是 6.1 版本，但总有人愿意叫它 ES7 ，不标准的]
2017 年 6 月发布 的《ECMAScript 2017 标准》（简称 ES2017） [由于改动小，其实他是 6.2 版本，但总有人愿意叫它 ES8 ，不标准的]

就像 Kubernetes 人们开他起了一个 K8S 的名字 (K 和 S 中间有 8 个单词)，他是不标准的

了解 Babel Traceur

Babel、Traceur 是一个编译JavaScript的平台，它能够编译代码帮你达到如下目的：

JavaScript.next-to-JavaScript-of-today compiler

今天就使用将来的 JavaScript

截止发布日期 (2018-09-04) ，没有一款彻底支持ES6的JavaScript代理（不管是浏览器环境仍是服务器环境），因此热衷于使用语言最新特性的开发者须要将ES6代码转译为ES5代码。

让你能使用最新的JavaScript代码（ES6，ES7...），而不用管新标准是否被当前使用的浏览器彻底支持；

ES7 做者彻底没精力看 ，不过 Bable 逐渐替代了 Google 的 Traceur 成为主流了，我是个俗人，因此我选 Bable

了解 Sass Less Stylus

Sass 是否是违反了中国的广告法了？？

Sass 、Stylus 和 Less 之类的预处理器是对原生CSS的拓展，它们容许你使用相似于variables, nesting, mixins, inheritance等不存在于CSS中的特性来写CSS，CSS预处理器能够这些特殊类型的语句转化为浏览器可识别的CSS语句。

• 一张表格对比三语言

语言	实现	特性	赋值	缩进
Sass	Ruby	变量$开头	$var: value	不须要
Less	JavaSript	变量@开头	@var: value	不须要
Stylus	NodeJs	不能使用@开头	var:10	均可以

你如今可能都已经熟悉了，上文讲 WebPack 讲过： webpack 里使用相关 loaders 进行配置就可使用了，如下是经常使用的CSS 处理loaders:

Less Loader
Sass Loader
Stylus Loader

本身去找：loader 列表

像：哪一种语言更好、使用的更多、更简单 容易引发争议的 博主不想讨论，看本身喜爱

了解 Electron

一个可使用使用： JavaScript, HTML 和 CSS 构建跨平台的桌面应用的框架，也算 hybrid 的一种，主要场景是 PC 端，没啥好说的。

值得一提的是 Visual Studio Code 、Atom、GIthub Desktop 都是基于此构建的，有时候按 CMD + option + i 有惊喜哦

基于 Electron 开发的APP列表

总结

这些也就基本是前端比较经常使用的主流技术栈组成的骨架了，以后的各类 webpack 插件，各类工具库的选型随着项目实战引入更好，如今讲你们也记不住。

别急实战中的前端架构要比如今复杂得多，跟我一块儿按部就班的的来。

下一章为你们实战：《如何快速构建项目并升级为一个规范的前端骨架》

关于我

• 目前在写《从零构建先后分离项目》系列，修正和补充以此为准
• 不断更新的 项目实践地址

往期文章

《从零构建先后分离 WEB 项目》 序 - 开源的意义

《从零构建先后分离web项目》：开篇 - 纵观WEB历史演变

《从零构建先后分离web项目》探究 - 深刻聊聊先后分离架构

《从零构建先后分离web项目》准备 - 前端了解过关了吗？前端基础架构和技术介绍