百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程字典 > 正文

深入浅出全栈工程师 Web应用的构建系统

toyiye 2024-05-19 19:36 17 浏览 0 评论

构建系统(build system)是用来从源代码生成用户可以使用的目标的自动化工具。目标可以包括库、可执行文件、或者生成的脚本等等。

常用的构建工具包括GNU Make、GNU autotools、CMake、Apache Ant(主要用于JAVA)。此外,所有的集成开发环境(IDE)比如Qt Creator、Microsoft Visual Studio和Eclipse都对他们支持的语言添加了自己的构建系统配置工具。通常IDE中的构建系统只是基于控制台的构建系统(比如Autotool和CMake)的前端。

对比于Web应用开发来说,构建系统应该还包括应用打包(如Java中的Jar包,或者用于部署的RPM包、源代码分析、测试覆盖率分析等等。

构建过程

在刚创建项目的时候,我们都会有一个完整的构建思路。如下图便是这样的一个例子:

这是一个后台语言用的是Java,前台语言用的是JavaScript项目的构建流程。

1. Compile。对于那些不是用浏览器的前端项目来说,如ES6、CoffeeScript,他们还需要将代码编译成浏览器使用的JavaScript版本。对于Java语言来说,他需要一个编译的过程,在这个编译的过程中,会检查一些语法问题。

2. Check Style。通常我们会在我们的项目里定义一些代码规范,如JavaScript中的使用两个空格的缩进,Java的Checkstyle中一个函数不能超过30行的限制。

3. 单元测试。作为测试中最基础也是最快的测试,这个测试将集中于测试单个函数的是不是正确的。

4. 功能测试。功能测试的意义在于,保证一个功能依赖的几个函数组合在一起也是可以工作的。

5. Mock Server。当我们的代码依赖于第三方服务的时候,我们就需要一个Mock Server来保证我们的功能代码可以独立地测试。

6. 集成测试。这一步将集成前台、后台,并且运行起最后将上线的应用。接着依据于用户所需要的功能来编写相应的测试,来保证一个个的功能是可以工作的。

7. 打包。对于部署来说,直接安装一个RPM包,或者DEB包是最方便的事。在这个包里会包含应用程序所需的所有二进制文件、数据和配置文件等等。

8. 上传包。在完成打包后,我们就可以上传这个软件包了。

9. 部署。最后,我们就可以在我们的线上环境中安装这个软件包。

一个Web应用的构建过程

下面就让我们来构建一个简单的Web应用,来实践一下这个过程。在这里,我们要使用到的一个工具是Gulp,当然对于Grunt也是类似的。

Gulp入门指南

Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。Gulp.js 是基于 Node.js 构建的,利用 Node.js 流的威力,你可以快速构建项目并减少频繁的 IO 操作。Gulp.js 源文件和你用来定义任务的 Gulp 文件都是通过 JavaScript(或者 CoffeeScript )源码来实现的。

全局安装 gulp:

$ npm install --global gulp

作为项目的开发依赖(devDependencies)安装:

$ npm install --save-dev gulp

在项目根目录下创建一个名为 gulpfile.js 的文件:

var gulp = require('gulp');

gulp.task('default', function() {

// 将你的默认的任务代码放在这

});

运行 gulp:

$ gulp

默认的名为 default 的任务(task)将会被运行,在这里,这个任务并未做任何事情。接下来,我们就可以打造我们的应用的构建系统了。

代码质量检测工具

当C还是一门新型的编程语言时,还存在一些未被原始编译器捕获的常见错误,所以程序员们开发了一个被称作lint的配套项目用来扫描源文件,查找问题。

对应于不同的语言都会有不同的lint工具,在JavaScript中就有JSLint。JavaScript是一门年轻、语法灵活多变且对格式要求相对松散的语言,因此这样的工具对于这门语言来说比较重要。

2011年,一个叫Anton Kovalyov的前端程序员借助开源社区的力量弄出来了JSHint,其思想基本上和JSLint是一致的,但是其有一下几项优势:

  1. 可配置规则,每个团队可以自己定义自己想要的代码规范。

  2. 对社区非常友好,社区支持度高。

  3. 可定制的结果报表。

下面就让我们来安装这个软件吧:

安装及使用

npm install jshint gulp-jshint --save-dev

示例代码:

var jshint = require('gulp-jshint');

var gulp = require('gulp');

gulp.task('lint', function() {

return gulp.src('./lib/*.js')

.pipe(jshint())

.pipe(jshint.reporter('YOUR_REPORTER_HERE'));

});

自动化测试工具

一般来说,自动测试应该从两部分考虑:

  1. 单元测试

  2. 功能测试

Mocha是一个可以运行在Node.js和浏览器环境里的测试框架,

var gulp = require('gulp');

var mocha = require('gulp-mocha');

gulp.task('default', function () {

return gulp.src('test.js', {read: false})

// gulp-mocha needs filepaths so you can't have any plugins before it

.pipe(mocha({reporter: 'nyan'}));

});

编译

对于静态型语言来说,编译是一个很重要的步骤。不过,对于动态语言来说也存在这样的工具。

动态语言的编译

可以说这类型的语言,是以我们常见的JavaScript为代表。

CoffeeScript是一套JavaScript的转译语言,并且它增强了JavaScript的简洁性与可读性。

Webpack是一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。

Babel是一个转换编译器,它能将ES6转换成可以在浏览器中运行的代码。

打包

在GNU/Linux系统的软件包里通过包含了已压缩的软件文件集以及该软件的内容信息。常见的软件包有

DEB。Debian软件包格式,文件扩展名为.deb

RPM(原Red Hat Package Manager,现在是一个递归缩写)。该软件包分为二进制包(Binary)、源代码包(Source)和Delta包三种。二进制包可以直接安装在计算机中,而源代码包将会由RPM自动编译、安装。源代码包经常以src.rpm作为后缀名。

压缩文档tar.gz。通常是该软件的源码,故而在安装的过程中需要编译、安装,并且在编译时需要自己手动安装所需要依赖的软件。在软件仓库没有最新版本的软件时,tar.gz往往是最好的选择。

由于这里的打包过程比较繁琐,就不介绍了。有兴趣的读者可以自己了解一下。

上传及发布包

上传包之前我们需要创建一个相应的文件服务器,又或者是相应的软件源。并且对于我们的产品环境的服务器来说,我们还需要指定好这个软件源才能安装这个包。

以Ubuntu为例,Ubuntu里的许多应用程序软件包,是放在网络里的服务器上,这些服务器网站,就称作“源”,从源里可以很方便地获取软件包。

因而在这一步中,我们所需要做的事便是将我们打包完的软件上传到相应的服务器上。

更多精彩内容欢迎关注我的微信公众号: Phodal


相关推荐

为何越来越多的编程语言使用JSON(为什么编程)

JSON是JavascriptObjectNotation的缩写,意思是Javascript对象表示法,是一种易于人类阅读和对编程友好的文本数据传递方法,是JavaScript语言规范定义的一个子...

何时在数据库中使用 JSON(数据库用json格式存储)

在本文中,您将了解何时应考虑将JSON数据类型添加到表中以及何时应避免使用它们。每天?分享?最新?软件?开发?,Devops,敏捷?,测试?以及?项目?管理?最新?,最热门?的?文章?,每天?花?...

MySQL 从零开始:05 数据类型(mysql数据类型有哪些,并举例)

前面的讲解中已经接触到了表的创建,表的创建是对字段的声明,比如:上述语句声明了字段的名称、类型、所占空间、默认值和是否可以为空等信息。其中的int、varchar、char和decimal都...

JSON对象花样进阶(json格式对象)

一、引言在现代Web开发中,JSON(JavaScriptObjectNotation)已经成为数据交换的标准格式。无论是从前端向后端发送数据,还是从后端接收数据,JSON都是不可或缺的一部分。...

深入理解 JSON 和 Form-data(json和formdata提交区别)

在讨论现代网络开发与API设计的语境下,理解客户端和服务器间如何有效且可靠地交换数据变得尤为关键。这里,特别值得关注的是两种主流数据格式:...

JSON 语法(json 语法 priority)

JSON语法是JavaScript语法的子集。JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔花括号保存对象方括号保存数组JS...

JSON语法详解(json的语法规则)

JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔大括号保存对象中括号保存数组注意:json的key是字符串,且必须是双引号,不能是单引号...

MySQL JSON数据类型操作(mysql的json)

概述mysql自5.7.8版本开始,就支持了json结构的数据存储和查询,这表明了mysql也在不断的学习和增加nosql数据库的有点。但mysql毕竟是关系型数据库,在处理json这种非结构化的数据...

JSON的数据模式(json数据格式示例)

像XML模式一样,JSON数据格式也有Schema,这是一个基于JSON格式的规范。JSON模式也以JSON格式编写。它用于验证JSON数据。JSON模式示例以下代码显示了基本的JSON模式。{"...

前端学习——JSON格式详解(后端json格式)

JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它基于JavaScriptProgrammingLa...

什么是 JSON:详解 JSON 及其优势(什么叫json)

现在程序员还有谁不知道JSON吗?无论对于前端还是后端,JSON都是一种常见的数据格式。那么JSON到底是什么呢?JSON的定义...

PostgreSQL JSON 类型:处理结构化数据

PostgreSQL提供JSON类型,以存储结构化数据。JSON是一种开放的数据格式,可用于存储各种类型的值。什么是JSON类型?JSON类型表示JSON(JavaScriptO...

JavaScript:JSON、三种包装类(javascript 包)

JOSN:我们希望可以将一个对象在不同的语言中进行传递,以达到通信的目的,最佳方式就是将一个对象转换为字符串的形式JSON(JavaScriptObjectNotation)-JS的对象表示法...

Python数据分析 只要1分钟 教你玩转JSON 全程干货

Json简介:Json,全名JavaScriptObjectNotation,JSON(JavaScriptObjectNotation(记号、标记))是一种轻量级的数据交换格式。它基于J...

比较一下JSON与XML两种数据格式?(json和xml哪个好)

JSON(JavaScriptObjectNotation)和XML(eXtensibleMarkupLanguage)是在日常开发中比较常用的两种数据格式,它们主要的作用就是用来进行数据的传...

取消回复欢迎 发表评论:

请填写验证码