酷应用

知行学院总结 | Anybox Web 网盘技术栈、前端项目的构建过程与功能实现

百家作者：QingCloud 2018-12-11 11:40:06

知行学院是青云QingCloud 为广大 CIO、架构师、开发者、运维工程师、技术爱好者提供的一个云计算、大数据、容器等技术的最佳分享与实践平台。其中包括线上技术公开课、云产品解析、线下实践课堂、行业沙龙等众多知识分享形式。

本次我们邀请了青云QingCloud 前端开发工程师段国伟，带来《Anybox Web 网盘技术栈、前端项目的构建过程与功能实现》。

正文：

今天为大家介绍 Anybox Web 企业网盘的前端，现在看到的是网盘的主页面，在这里用户可以看到自己在网盘上的所有文件。除了列表已展示的文件大小、更新时间等信息外，用户可以点击右侧菜单查看文件更详细的信息，如文件共享链接、文件被下载次数等。

Anybox Web 支持上传整个文件夹，用户可以方便的备份整个目录，无须将文件一个个分别上传，上传数量没有限制。

网盘提供了常用文件的预览功能，用户可以在线查看图片、视频、音频、Office 文档和 PDF 文件等。

通过网盘，用户可以很方便的共享文件给其他用户，比如在文件预览页面，用户点击右上角的共享按钮，可以看到这个文件的共享链接，将这个链接发给其他人，其他人就可以通过这个链接看到这个文件。公网链接支持设置密码访问、有效期、文件是否可以下载等。

本次分享分为两节课：第一节课先给大家介绍网盘前端的技术栈，谈谈我们用到什么技术、框架和组件等，并为大家介绍如何构建网盘前端，包括构建的具体流程。

关于网盘上传功能，内容比较多，我们放在了第二节课，12月12日，为大家深度讲解一般场景下网页文件上传功能的实现，文末扫码即可报名。

技术栈

Anybox Web 是一个典型的 BS 架构服务，核心在浏览器中运行单页应用和使用了 Django 框架的 Web Server。

网盘访问流程

这是用户访问网盘时的流程图，当用户打开浏览器访问网盘时，请求会经过 Nginx 发送到 Django Server 上。Django 收到请求后会先检查用户是否已经登录，如果用户没有登录，会让用户重新到登录页面。如果用户已登录，Django Server 会向 API Server 发请求，得到一些渲染页面必要的信息，如用户头像、已用空间大小等，然后用得到的信息渲染一份 HTML，返回给浏览器。

浏览器收到 HTML 后会下载所需要的 js、CSS、图片等自然文件。当 js 文件下载问题后，经过 parse、执行等步骤，在浏览器中运行的单页应用便跑起来了。

框架组件

Web framework，我们选择的是比较流行的 Django，Django 和其他 Python Web、framework，相比有几个显著的优点。Django 稳定可靠，文档写得很好，插件丰富，有开箱即用的特点。使用 Django，我们可以很快开发出我们需要的页面。

Nginx 除了转发浏览器的请求到 Django Server 外，还有一个作用是 Host 前端需要的静态资源文件。在生产环境中，我们会将 Nginx 替换成对象存储，这样做的好处是方便后面做版本控制和 CDN 分发。

缓存是 Web 服务中必不可少的组件，我们使用的是 redis，用于保存用户的登录状态和其他一些不经常改变的数据等。

浏览器单页应用

前端我们使用的是目前流行的 React+Mobx 为主的单页应用，和传统的页面相比，单页应用将很多路由的裸机和页面渲染的任务放到了前端，减少前后端的耦合，提高开发效率的同时，也提高了用户的使用体验。

React 是目前使用最广泛的用来构建页面 UI 的 js 库，不但有平滑的学习曲线，还有强大的社区知识。React 相关文档和开源组件也非常丰富。

状态管理我们使用的是 Mobx，和 Redux 相比，Mobx 不但入门容易而且速度更快。使用 Mobx 作为状态管理，我们可以定义多个 store，将不同业务逻辑的数据区分开。使用 Mobx 改变状态时，不用像 React 需要写很多 Ation 和 reducer，直接修改就可以。

另外我们也使用了一些常见的第三方 js 库，比如工具库 lodash、时间工具库 Momentjs 和预览 PDF、Office 文件时用到的 pdfjs 等。

我们使用 Sass 作为 CSS 的预编译语言，Sass 代码比原生的 CSS 代码更容易读，同时 Sass 还有有很多非常酷的特性，比如支持变量，选择器嵌套，mixin，继承等，借助 Sass 的这些特性，大大提高了代码的可维护性和可扩展性，进而提升了开发效率。

另外，我们还使用了 BEM 来组织我们的 Sass 代码。BEM 是 Block，Element，Modifier 的缩写，它是一种 CSS 的命名规范，也可以作为 HTML 的结构规范。通过 Block/Element/Modifier 这三种概念的划分，有效的解决了 CSS 中命名困难的问题，同时也避免了选择器权重过高的问题。

如果大家想更多的了解 BEM 是什么，以及它解决了什么问题，可以直接搜索，介绍 BEM 的网站很多，流行的 CSS 命名规范有很多，BEM 是其中一种，推荐大家多尝试，找到适合自己的方法。

以上是 Anybox Web 主要技术栈，后面我们会支持更多新的功能，也会引入更多新的技术。

前端构建

不同的前端项目使用的构建工具不同，希望下面的介绍能给大家一些参考和启发。

如何构建前端项目，可能是让刚学前端开发的同学最困惑的地方，因为这里有太多的概念和太多的工具，在理清这些工具的用途和他们之间的差别上花费了很长的时间。接下来我为大家简单介绍在构建 Anybox Web 时，我们用到了哪些工具以及如何使用它们。

我们可以将前端构建过程分为两个大步骤：一是依赖管理与安装，二是资源编译，这样我们也可以将上面的工具分为两大类。

依赖管理与安装工具

我们先来看包管理工具或者依赖管理工具，他们是用来安装和更新项目中的第三方库。

前端项目的依赖分为两大类：Dependencies 和 devDependencies，前者指的是应用运行时的依赖，后者指的是项目开发或者编译时的依赖。例如网盘前端用到了 React Mobx Momnetjs 等第三方库，这些库属于 Dependencies, 而 Babel，webpack sass 等都是只有在开发时才用到的库，属于 devDependencies。

我们可以在项目 package.json 中声明所需要的依赖名称和版本，使用包和管理工具安装他们。比如我们这里声明了项目运行时的依赖 React，它的版本是 16.3。

目前主要使用的包管理工具有两个，一个是 NodeJs 自带的 NPM，另一个是由 Google、Facebook 等工程师合作开发的 Yarn。

网盘使用 Yarn 来管理依赖，因为它比 NPM 更快速可靠。Yarn 使用格式详尽而又简洁的 lockfile 文件和确定性算法来安装依赖，可以保证在一个系统上运行的安装过程，也会以同样的方式运行在其他系统上。Yarn 的命令和 NPM 几乎一样，如果你熟悉 NPM，可以很快的上手 Yarn。

举例说明，在终端中，我们先切换项目目录，输入 Yarn.install-回车，项目所需要的依赖模块很快安装完毕。想了解如何安装和使用 Yarn，可以直接访问 Yarn 的官方网站，里面有详细的文档和教程。

资源编译类工具

依赖管理与安装涉及的工具比较少，我们重点谈谈资源编译类工具。

为了帮助大家理解不同工具在编译过程中的作用，我们先看看这张简化的流程图。

网盘前端 js 和 CSS 源代码大概要经过这几个编译步骤才会成为生产环境的代码。

图中有四个工具在编译过程中比较重要，下面我们逐个介绍：

BABEL，它是 JavaScript 的编译器，它可以把 ES6+ 的代码转化成向后兼容的版本。我们为什么需要它呢？

首先，ES6 是 JavaScript 历史上非常大的一次更新，这次更新带来了众多非常酷的特性，比如 Promise、Arrow Function、Spread Opreators、async/await、Class 等，借助新的特新，可以显著的降低我们代码的复杂度，提高代码的可读性和可维护性，目前主流浏览器已支持 ES6 的大部分新特性。

用户使用浏览器并不一定是最新版本，这些低版本的浏览器缺少对新特性的支持，如果让低版本浏览器直接执行 ES6 的代码会报语法错误。我们不可能为不同浏览器写不同版本的代码，那如果我们非常想使用 ES6 的新特性，怎么办？

为了解决这个矛盾，我们可以用 BABEL 将 ES6+ 的代码转化成低版本浏览器兼容的版本。比如我们使用箭头函数定一个 function，BABEL 会将其编译成普通函数声明的形式。

再比如我们在代码中使用 async/await，BABEL 会将其转化成 generator 的形式，这两种版本的代码在执行结果上没有区别。

有了 BABEL 作为编译器，我们可以在源代码里使用 ES6+，用户的浏览器也能正确的执行编译后的代码，双赢！

第二个为大家介绍的打包工具是 webpack，为了解释为什么我们需要一个打包工具，我们简短的回顾 JavaScript 是如何下载到浏览器里执行的。

最开始，我们有一份 HTML 代码，代码里有一个 script 标签，src 是 js 文件的地址，当浏览器 parse 到这个 script 标签时就会去下载对应的 js 文件。

随着我们页面上逐渐添加更多的功能，js 代码会越来越多，为了更好的组织代码，我们采用模块化开发的方法，将不同的业务、逻辑的代码放在不同的 js 文件里，再在 HTML 中增加对应的 script 标签。

由于 HTML 模式是按顺序 parse 和下载文件的，因此 script 标签在 HTML 中出现的顺序和模块之间的依赖顺序必须是对应的。

比如在某个模块 A 中引用了模块 B，包含模块 B 的标签要出现在 A 模块的前面。当项目进一步增长后，将模块之间的依赖转化成 script 标签的顺序将会变得越来越困难，感觉像自己被绑住手脚。

还有一个问题，每次下载 js 文件时都会产生一次 HTTP 请求，下载的文件越多，消耗的时间越久，这会严重影响页面的性能。为了解决这些问题，我们需要一个打包工具，将项目中的众多模块打包成一个或者几个文件，由打包工具维护模块之间的依赖顺序。我们只需要在 HTML 中写好打包后的 js 文件就可以。

常用的打包工具有 webpack, rollup, browserify 等，网盘选用的是 webpack。

webpack 是目前使用最广泛的打包工具，插件也是最齐全的。webpack 除了可以打包文件外，也可以打包 CSS、图片等资源。

webpack 使用起来也非常简单，一般我们的应用程序启动都有一个入口文件，通过这个文件，webpack 会找到程序依赖的所有模块，构建一个依赖图 Dependency Graph，然后将所有的依赖合并到一个或几个文件中，也就是我们常见的 bundle.js。

关于 webpack 有太多可以说的东西，比如使用 webpack 加载其他文件，code split 等。

第三个要介绍的工具是 Sass，它也是一个编译器，用于将 Sass 代码编译成 CSS 代码。CSS 的预编译语言很多，Sass 是其中功能最强大的一种，浏览器并不能直接认识 Sass 代码，需要经过编译。

例如左边的 Sass 代码，我们使用了变量，但是经过 Sass 编译后，就会将变量替换成具体值，浏览器可以正确去解析。

最后一个工具是 PostCSS，它是一个 CSS 的处理框架。我们最常用的功能就是让它来自动为我们的 CSS 代码添加 vendor prefix。

CSS中有很多试验阶段或者非标准阶段的属性，为了能安全的使用这些属性，我们需要在属性前加上 vendor prefix。我们在代码中常见的 Webkit、Moz 等就是适配不同浏览器的 vendor prefix。

例如我们使用 input-placeholder 来设置 input 元素的 placeholder 样式，需要在前面加上对应的 vendor prefix 才能在相应的浏览器上看到预期的效果。

每次都写 vendor prefix 很麻烦，我们可以使用 PostCSS + Autoprefixer 插件来减少重复劳动。

源代码里，我们只需要写不带 vendor prefix 的属性，Autoprefixer 会自动识别哪些属性需要加，哪些属性不需要。

以上是这四个工具的简单介绍。在前端静态文件编译中还有非常重要的一环，也就是 minify 和压缩。

Minify 和压缩

网盘的前端是一个单元应用，虽然经过 webpack 做代码分片，但是单个 js 文件的体积仍然很大。为了加快页面的加载速度，提高用户体验，对静态文件进行 minify 和压缩是构建过程中必不可少的一步。

minify 主要执行的操作是去除评论、空格、缩短变量名、属性名、参数名、类名和方法名等。例如下面这段代码，经过 minify 后会变成右边的样子，虽然经过 minify 之后的文件基本不可读，但代码仍然能被浏览器正常执行。

压缩的主要操作是找到文件中重复的字符段，用一个指向第一个重复字符串的指针替换它。Gzip 是前端静态文件最常用的压缩方法，压缩后代码不能被浏览器正常执行，更不能直接阅读，必须先解压才可以。

压缩操作一般不包括资源编译过程中，如果使用 Nginx host 静态资源文件，我们只需要开启 Nginx 压缩功能，并指定需要压缩的文件类型就可以。

minify 和压缩是前端静态文件编译中必不可少的步骤，经过压缩和 minify 之后的文件体积会减少 40-90%，大大缩短了文件的下载时间。

gulp

上面说了这么多构建前端代码需要的步骤，我们如何把他们联系起来并且做到自动化呢？再为大家介绍一个将上面步骤关联起来的工具——gulp。

gulp 是一个 task runner，我们可以将上面工具的工作定义成一个个的 task，用 gulp 执行他们。比如我们可以将 CSS代码的编译步骤分别定义成三个 task，用 gulp 执行他们。

比如可以将 CSS 代码的编译步骤分别定义成三个 task，sass task 会将 Sass 代码变成 CSS 代码，并将生成的 CSS 代码作为输入，传给 postcss task 去添加 vendor prefix，然后又把已经添加 vendor prefix 的代码 minify 后放到 dist 文件夹里。