前端工作流

前端开发早已经度过了刀耕火种的年代,现如今可以说是百家争鸣,百花齐放,因此,在这里我们从头梳理一下,从零到一个项目上线,我们会经历些什么。

准备

基础决定上层建筑

在项目开始之前,首先我们得有足够的基础知识储备,这个毋庸赘言,无论是 JavaScriptHTMLCSS 基础还是诸如算法数据结构以及计算机网络等。

Node && NPM

在一切的一切开始之前,我们需要准备我们的开发环境,首先就是 Node,你可以在官网下载,但更多的时候,你可能需要去这里

尽管一切看起来似乎很合理,但有的时候我们往往需要切换 Node 的版本,比如说从 Latest 切换到 LTS,甚至于更老的版本,这在将 Node 用于服务端开发时将更加频繁,NVM(W) 可以很好的承担这一职责,其中 NVM 适用于 *nix 平台,而 NVMW 适用于 Windows

在安装好 Node 之后,NPM 也会随之而安装,但不一定是最新版本,如需要更新至最新版本,需执行以下命令:

npm i npm -g

除此之外,你更多的时候也需要将源地址切换为淘宝的源,毕竟我大清自有国情在此。这个时候可以用 nrm

# 安装 nrm
npm i nrm -g -r https://registry.npm.taobao.org

# 切换其他源

nrm use npm # 或者 nrm use taobao

编辑器圣战

随着整个前端行业的繁荣,可选编辑器的编辑器也越来越多,功能也越来越强大,无论是 VimWebStorm,还是最新的 AtomVSCode,都有它的受众。而 AtomVSCode 的丰富插件为我们的开发体验提升到了无以复加的地步,在插件市场总有一款适合你,如有不适合,你还可以自己开发一个插件,因为 JavaScript 就是插件的开发语言。

尽管有很多编辑器可以选择,但是,我推荐 VSCode,无论是它的打开速度,性能都优于其他编辑器,简直无可挑剔,而且本地化也很优秀,更为重要的,你可以在 VSCode 调试你的代码,而且插件下载速度比 Atom 高到不知哪里去了。

版本控制

版本控制对于软件开发来说同样是是必备的基础技能,尤其是多人协作开发与大型项目开发,无论你多么优秀,你总会有代码回滚的时候。

SVNGit 是版本控制的中流砥柱,他们能够很好的解决的我们在多人协作时所会遇到的问题。但是,尽管他们都能很好的解决问题,和编辑器一样,我依然会很主观的推荐 Git,尤其是你配合 gitflow 使用时,你会体验到整个过程的舒适与便捷。

一切准备就绪

为每一个独立项目新建文件夹这个自不必多谈,在新建文件夹之后,在文件夹内依次初始化 Git 仓库以及 NPM

# 初始化 git
git init

# 初始化 npm
npm init

之所以要先于 NPM 之前初始化 Git,是因为 NPM 在初始化时会去读取当前目录的 Git 信息,这对于之后的发布很有帮助。

UI 框架

现今流行的三大框架 AngularVueReact 各自的优缺点在此不赘述,各路人马对此有充分的认知,无论从开发体验、生态环境还是性能指数上都对此有很多文章来充分解读。

然而,在这里我想说的是:框架只是完成项目的手段,它不是目的,切勿为了使用框架而使用框架。

语言本身

由于先天的原因,JavaScript 从出生开始就一直被人诟病,因此而产生了诸多的变种,比如 TypeScriptCoffeScript,除此之外还有诸多能够编译的 JavaScript 的语言。而且 JavaScript 也在不断的自我完善中,ES Next 正在不断吸收、补充和完善 JavaScript 自身,你可以在这里看到最新的进展。

模块化

正如前文所说,JavsScript 天生就有诸多问题,因此在需要模块化之时,产生了诸多规范或者说建议性的标准,其中 CMDUMDAMD 各自引领风骚,在这里,我们不过多的关注他们之间的区别,如有需要,这里有更加详尽、清楚的论述。但殊途同归,在 ES 2015(ES 6) 发布之后,他们被标准化的 import/export 所取代,这也是推荐使用的方式,尽管需要费一些周折,但它会在我们之后所提到的构建中发挥大作用。

代码质量

除了通过优秀的算法与逻辑处理来提升代码质量之外,随着前端项目的大型化,类型检查也逐渐的被重视起来,除了 TypeScript 本身就提供类型推断和类型检查之外,Flowtype 也能很好的完成这部分工作。两者在配合前文提到的编辑器插件可以更加友好以及准确的给出类型推断以及智能提示。

尽管如此,在多人协作之时,我们依然很难避免不同风格的编码习惯出现在同一个项目之中,因此统一的编码习惯需要借助外部工具来约束。无论是 ESLint 还是 JSLint 都可以通过简单的配置来实现这一想法。尽管它们的功能类似,但与时俱进的看法是 ESLint 优于 JSLint,因为它更加贴合 ES Next 的语法。除前述之外,还有 EditorConfig 用于多编辑器协同与 StyleLint 用于样式检查。

测试

优秀的项目必然有完善的测试用例,无论是单元测试还是集成测试,无论是对于项目交付之前的自测还是后期的维护都很有帮助。就目前看来,主流的断言库主要有 MochaChai,而 Jest 则显得更加全面。

对于集成测试,则可以选择 PhantomJS 来完成,或者你也可以体验最新的 Headless Chrome

多数情况下,你的测试用例不会只有一个,面对大量的测试用例,我们需要一个工具使得它们能够更快的,甚至并发的被执行,因此你需要一个 Test RunnerKarmaAVA 以最小、最简单的配置出色的完成了这部分工作。

构建

当一切,包含你的逻辑、测试用例都完成之后,可以开始构建代码了,通常在这个时候我们需要借助其他工具来完成这一步,比如 WebpackRollupFis 也将是一个不错的选择。他们会将你模块化的代码以更加合适的方式组织为更少的文件数以及文件大小,以便能够更快的打开我们的应用,这其中包含了按需加载、代码压缩、转码、分析依赖等诸多工作,而你要做的仅仅是为他们写一个简单的配置文件。

提到转码,则不得不提到 Babel,尽管 JavaScript 自身在不断进化,但浏览器很难紧跟步伐,而且这一决定权还不在开发者自己。因此,我们将我们用最新、最流行的方式写出的代码转码为在旧浏览器中能够执行的代码,而这,正是 Babel 所做的工作。

除了 JavaScript 的转码之外,CSS 的预处理与后处理往往也是在这个时候去处理。因为 CSS 本身的局限性,我们很难把它当作为一门完整的编程语言去看待,它更多的只是一个 DSL(Domain-specific language),因此而衍生了 SassLessStylus 等预处理器以及后处理器 PostCSS,在切身实践之后,你将体会到它的酸爽。

而对于依赖分析,这就依赖于上文提到的模块化,模块化的组织代码将有助于打包工具更好的分析依赖、优化代码。前面我们说到推荐使用最新的 import/export 语法,之所以这样做是因为 tree-shaking,这个由 Rollup 作者所提出的概念。依赖静态模块语法,Webpack v2 以上版本以及 Rollup 能够实现最小化的模块引用,从而减少代码体积,这对于加速网页打开有极大的帮助。

懒惰是美德

我一直奉行一个观点,能用脚本解决的事情就不要手动去做,能够自动化处理的就不要动用人力去解决。

好在有 Node,因为有 Node,前端工具如雨后春笋般的一个接一个的出现,前文提到的大部分操作我们都可以通过编写简单的 JavaScript 代码,甚至于以一个命令去解决。

而测试与构建这种机械的操作可以放心大胆的交给 CI 去完成,比如说 Travis CICircle CI

结语

除了前文提到的之外,前端这片大海中还有很多优秀的工具等着我们去探索,而 ElectronReactNative 的诞生则使得使用 JavaScript 编写原生应用成为可能。

路漫漫其修远兮,君需上下而求索,前端的征途是星辰大海。

文章均采用 CC BY-NC-SA 3.0 许可协议,转载请注明出处。
本文链接:https://blog.kingsongao.com/2017/10/20/前端工作流/