《从零构建前后星散的web项目》：前端相识过关了吗？前端基本架构和硬核引见

# 前端预备 ：前端相识过关了吗？前端基本架构和硬核引见

手艺栈的挑选

起首我们构建前端架构须要对前端生态圈有统统相识，而且最好带有肯定的手艺前瞻性，好的手艺架构能够日后会轻易的扩大，削减重构的次数，纵然重构也不须要大动干戈，我一般选型手艺栈会参考以下三点：

一、提出本身营业的需求

• SEO 是不是非常重要？
• 重要面向：挪动端照样 pc 端？
• 是不是有开辟 app 的计划？

有了如许的题目我们能够带着题目去重点选型一些这写题目手艺计划比较成熟的手艺栈。

二、本身是不是成熟，文档是不是友爱

这里举一个之前开辟历程当中现实碰到的，当时为了优化用户体验，节约开辟效力 选型了一款
MVVM 轻量框架，惋惜当时没有决定权，
CTO 选型了
avalon

当时之所以没有挑选 backbone ，重要是由于没有成熟的中文文档，斟酌到团队的流动性和上手性临时没做斟酌，终究挑选了 司徒正美的 avalon 当时来讲照样比较前卫的，也有一些以去哪网为首的大公司都在用。我们当时用的时刻 avalon2 刚出不久，直接用的 2.0，运用历程也涌现了一点题目：文档离散，这一块那一块，存在后置性，生态少，扩大性价比不高 ，有时刻碰到匪夷所思的 bug 寻觅缘由翻了几遍 demo 、文档 能够会找到答案，没有重点标识。固然就当时来讲确实是给我们提拔了部份开辟效力，然则我能够当时更倾向 Angular 或 vue 的。由于他们有无以伦比的生态圈和种种题目标手艺计划以以及圆满的开辟者文档，值得一提的是 avalon 的作者是兼职保护的，假如全栈运营的话，我置信远比如今更好，看一看 avalon 的源码也会对本身有不少的提拔。关于临盆的手艺选型要越发郑重。

三、相识其生态系统

上文提到了生态系统，以我比较经常使用的 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 主架构

四、画出我们希冀的前端基本架构模子

由于我们上一章选型了 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 这些东西，这里大白话讲讲：
他们的先后顺序是：ES5、ES6(ES2015)、ES7、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语句。

• 一张表格对照三言语

你如今能够都已熟习了，上文讲 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项目》预备 – 前端相识过关了吗？前端基本架构和手艺引见