首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JavaScript全栈开发-工具篇(上)

JavaScript全栈开发-工具篇(上)

作者头像
腾讯NEXT学位
发布2018-10-12 16:27:54
1.9K0
发布2018-10-12 16:27:54
举报
文章被收录于专栏:腾讯NEXT学位腾讯NEXT学位
一、运行环境

1. Node.js

2. Chrome

3. 其它浏览器

二、开发工具

1. WebStorm

1.1 功能特性

1.2 小技巧

1.3 实用快捷键

1.4 插件支持

2. Sublime Text

2.1 功能特性

2.2 小技巧

2.3 实用快捷键

2.4 插件支持

3. HBuilder

3.1 功能特性

3.2 小技巧

3.3 实用快捷键

3.4 插件支持

4. 开发工具小结

三、构建工具

1. Grunt

1.1 Grunt安装

1.2 Grunt配置文件

1.3 Grunt任务的运行

2. Gulp

2.1 Gulp安装

2.2 Gulp配置

2.3 Gulp运行 3. 构建工具小结

四、测试工具

1. 单元测试

1.1 前端单元测试QUnit

1.2 后端单元测试NodeUnit

1.3 NodeJS自带测试模块Assert

1.4 Mocha

1.5 单元测试工具小结

1.6 测试工具扩展阅读

2. 性能测试

2.1 PageSpeed Insights

2.2 Apache Bench

2.3 性能测试工具小结

3. 测试工具扩展阅读

五、调试工具

1. 浏览器工具

1.1 Chrome 开发者工具

1.2 FireBug插件

1.3 Chrome Inspect开发者工具

2. Http代理工具

2.1 Fiddler

2.2 Fiddler插件-Rosin

2.3 Fiddler插件-Willow

2.4 Fiddler插件-SSI Proxy

2.5 微信、手机QQ WebView及腾讯手机QQ浏览器开发者工具-Inspect

3. 调试工具小结

六、总结

本文关键词

JavaScript早期主要作为脚本语言运行在浏览器,而现在JavaScript的使用范围已经超越浏览器,向通用系统语言发展。特别是HTML5的出现,浏览器的平台化,Node.js开源项目的发展,NoSQL技术的发展,JavaScript逐渐成为跨移动平台应用程序及跨平台桌面应用程序的开发语言。

JavaScript标准有两类,一种是作为浏览器上通用行业标准的ECMAScript标准,另一种是作为浏览器外的桌面、服务器的标准CommonJS标准。JavaScript可以只用一种语言,开发出适应不同平台(浏览器,桌面端,服务器,移动端)的程序。而本文主要以JavaScript作为全栈开发语言讨论软件产品前后端开发、测试相关的工具和方法。

一、前后端运行环境

1. Node.js

首页:https://nodejs.org

下载:https://nodejs.org/download

Node.js是以Chrome的V8引擎为运行时,基于事件驱动的无阻塞I/O模型,轻量高性能,可快速构建可伸缩应用程序的平台,适合运行数据密集型实时应用程序。

下载Windows Installer(.msi)程序进行安装,默认安装npm(node package manager),及注册node的安装目录到操作系统的环境变量,这样在命令行界面任何路径下都可以访问node和npm程序。接下来要说明的开发测试工具,很多都基于node和npm。

npm的默认仓库源访问比较慢,可通过修改npm配置注册源地址或npm安装模块时带--registry选项指定源仓库地址。

npm config set registry http://tnpm.oa.com #修改配置方式 @@@

npm --registry http://tnpm.oa.com install <package> #安装时指定源方式 @@@

2. Chrome

首页:https://www.google.com/chrome

前端开发必备浏览器,内置开发者工具功能比较强大。

3. 其它浏览器

FireFox浏览器的插件FireBug也是一款比较优秀的工具。如果是做PC端的前端开发,考虑浏览器的兼容性,Internet Explorer也是必备的浏览器。(浏览器使用的市场份额原因,虽然份额在下滑)

二、开发工具

因个人偏好和使用习惯的不同,开发工具不同人有不同的选择。以下是几种常见的前端开发工具:

* WebStorm

* Sublime

* HBuilder

1. WebStorm

首页:http://www.jetbrains.com/webstorm

下载:http://www.jetbrains.com/webstorm/download

1.1 功能特性

WebStorm是由JetBrains开发的一个比较强大的轻量级开发工具,能够完美地支持前端开发及基于NodeJS的服务端开发。

-- 支持JavaScript, Node.js, ECMAScript 6, TypeScript, CoffeeScript, HTML, CSS, Less, Sass 和 Stylus。语法高亮,文档查询,重构

-- 快速定位及错误高亮

-- 项目导航及高级重构功能

-- 支持AngularJS、React、Meteor、Express、其它框架

-- 内置前端及服务端NodeJS断点调试器

-- 与构建工具(Grunt、Gulp)、代码质量工具(JSHint,JSLint,ESLint,JSCS),测试工具(Karma,Mocha),版本控制工具(Git,GitHub,Mercurial,SVN)集成。

-- 版本控制集成(Subversion,Perforce,Git,CVS)

1.2 小技巧

-- 更改IDE主题:File -> Setting -> Appearance & Behavior -> Appearance

-- 更改编辑器代码风格:File -> Setting -> Editor -> CodeStyle

-- 设定IDE和项目的默认编码:File -> Setting -> Editor -> File Encoding

-- 插件安装:File -> Setting -> Plugins

-- 编辑器配置导入导出:File -> Import Settings... / Export Settings...

-- 快捷键设置:File -> Setting -> Keymap

-- 自动保存,文件关闭后仍能进行撤销和重做操作

-- 显示行号,自动换行功能开关:代码左侧区域右键菜单勾选。如下图左侧

-- 鼠标移至html文件顶部区域出现不同浏览器快速打开按钮。如下图右侧

1.3 实用快捷键

1.4 插件支持

WebStorm插件仓库里面很多实用的插件来扩展WebStorm的能力。详见:http://plugins.jetbrains.com/webStorm。

可以通过 File -> Setting -> Plugin 里面的功能在线安装插件,也可将插件下载然后离线安装。

2. Sublime Text

首页:http://www.sublimetext.com/

下载:

http://www.sublimetext.com/2 (Sublime Text 2)

http://www.sublimetext.com/3 (Sublime Text 3)

2.1 功能特性

Sublime Text是一个跨平台的文本编辑器,支持基于Python的插件,可通过Package扩展。

-- 内置支持很多编程语言,并支持语法高亮。用户也可以通过插件支持更多编程语言

-- Go to anything功能,快速跳到文件,符号或行数

-- Command palette功能:弹性快捷键功能

-- 多行选择功能:同时修改多行内容

-- 基于 Python 语言的外挂 API

-- 针对个别项目使用不同的编辑器设置

-- 通过 JSON 文件自定义设置值

-- 跨平台(Windows、Linux 和 Mac OS X)

-- 兼容 TextMate 的语言标记语法

2.2 小技巧

-- 文件未保存退出编辑器,下次启动会自动恢复

-- 双击选中一个标识符,然后连按ctrl+D可以连续选中多个标识符,进行重命名等操作

-- 以某种编码格式打开,以某种编码格式保存见File -> Reopen with Encoding / Save with Encoding

-- 矩形选取,按住鼠标中键(滚轮)不放,向下拉取选择然后松开即可垂直方向选择矩形内的内容。配合ctrl多处选择,可以进行多处编辑

-- html中输入一个标签名如div,按Tab会自动生成<div></div>,如安装Emmet插件会给你惊喜

-- 按住ctrl+alt,然后按上或下方向键可进行垂直方向光标定位,按左或右方向键可进行水平选取

2.3 实用快捷键

快捷键练习网站:http://www.shortcutfoo.com/

2.4 插件支持

1) 编写自定义插件扩展:Tools -> New Plugin.. 

2) 插件下载:https://packagecontrol.io

3) 插件管理

可以安装包管理器来查找,安装,更新插件包。包管理器及安装方法见:https://packagecontrol.io/installation。页面有自动安装或手动安装示例方法。安装完成后在菜单References -> PackageControl打开包管理器。选择Package Control: Install Package选项,可搜索待安装的插件。

4) 常用插件

-- NodeJS扩展

SublimeText-Nodejs(已停止维护):https://packagecontrol.io/packages/Nodejs

Jake:https://github.com/mde/jake

3. HBuilder

首页:http://www.dcloud.io

下载:http://download.dcloud.net.cn/HBuilder.windows.6.0.1.zip

3.1 功能特性

HBuilder是DCloud推出的一款免费的支持HTML5的Web开发IDE。通过完整的语法提示和代码输入法、代码块及很多配套,HBuilder能大幅提升HTML、JavaScript、CSS的开发效率。

-- 代码助手

-- 内置web服务器,可用各种主流浏览器进行测试

-- 各种眼睛保护配色

-- 内置最全语法库支持和浏览器兼容数据

-- 可进行手机App开发

-- 跳转助手、选择助手、转义助手、快捷键助手

-- 语法校验、转到定义、重构 、大纲、任务TODO 、版本历史、内置webserver、预编译less、sass等

3.2 小技巧

-- 代码提示时,按下候选列表前的数字,自动把该候选项输入到编辑区

-- 内置Emmet插件,输入div按Tab,自动生成<div></div>,详见Emmet插件

-- 内嵌jQuery、Zepto、微信JS SDK、MUI框架插件,可提示相应框架API的语法。在工程点右键 -> 引用框架语法 来添加对其它(angular、ext、dojo..)框架库语法提示的支持。

-- Ctrl+P边写代码边预览

-- 拖动tab代码选项卡,可以进行左右或上下分屏显示

3.3 实用快捷键

3.4 插件支持

HBuilder基于Eclipse 3.7(2011年6月发布)开发,因此兼容Eclipse3.x版本插件。也可进到 工具 -> 插件安装 -> 浏览Eclipse插件市场 来安装插件。

NodeJS插件:Nodeclipse 安装方法见:http://ask.dcloud.net.cn/article/230

4. 开发工具小结

作为一款开发工具,能让开发者将写代码当成一种享受,愉快地编码,最核心的功能应该满足以下几点:

1. 功能完善,该有的常用功能都有

2. 编码快速,智能提示,自动完成

3. 启动速度,测试速度快

4. 开发工具界面的主题和配色也是比较重要,耐看、代码区分一目了然,不刺眼,不引起视觉疲劳。

5. 可配置,可插件,有扩展的能力,满足自定义开发的需求

上述的几种开发工具各自有其优势:

1) WebStorm :功能完善强大

2) SublimeText:轻量快捷,界面优美

3) HBuilder:Html5开发,快速编码

开发者可根据自己的需要和个人偏好选择其中一个或多个工具使用,以满足快速开发的需求。

三、构建工具

在前端开发过程中,经常需合并文件、压缩代码、单元测试、检查语法错误等,需要用手工或不同的工具来完成不同的任务,重复劳动且耗时繁琐,而自动化构建工具可以帮我们自动管理和运行各种任务。可以减少代码构建手工出错的机会,大大增强了开发效率,节省资源。

以下是常见的自动构建工具,可根据需要,选择其中之一进行安装。

* Grunt

* Gulp

1. Grunt

首页:http://gruntjs.com

中文:http://www.gruntjs.net

项目:https://github.com/gruntjs(包括Grunt及其各种模块)

源码:https://github.com/gruntjs/grunt

插件:http://gruntjs.com/plugins

1.1 Grunt安装

Grunt和Grunt插件是通过npm(node package manager)安装管理的。

常见的Grunt模块说明

在项目目录安装Grunt及常见的Grunt插件:

npm install grunt-cli -g

npm install grunt --save-dev# 安装常见的grunt模块

npm install grunt-contrib-clean --save-dev

npm install grunt-contrib-compass --save-dev

npm install grunt-contrib-concat --save-dev

npm install grunt-contrib-copy --save-dev

npm install grunt-contrib-cssmin --save-dev

npm install grunt-contrib-imagemin --save-dev

npm install grunt-contrib-jshint --save-dev

npm install grunt-contrib-uglify --save-dev

npm install grunt-contrib-watch --save-dev

 grunt-cli为grunt的命令行界面,主要向Grunt传递Gruntfile配置信息,然后执行Grunt来完成配置文件中指定的任务。

-g:--global,表示全局安装,全局安装后可在任何目录执行grunt命令

--save-dev:表示安装grunt模块时,模块会被自动加到项目的package.json文件的依赖列表中

1.2 Grunt配置文件

模块安装完成后,在项目根目录创建名为Gruntfile.js的配置文件。该配置文件是一个node.js的模块,Grunt运行需要该配置文件。

Grunt常用API

-- grunt对象:Grunt通过将grunt对象赋值给module.exports函数,将grunt对象的属性和方法传递给Gruntfile、Grunt模块和task文件中

-- grunt.initConfig(configObject):grunt.config.init方法的别名,初始化各模块的配置

-- grunt.loadNpmTasks(pluginName):加载通过npm安装的Grunt模块

-- grunt.registerTask(taskName, taskList):注册定义任务

以下为压缩css的任务的配置文件

//Gruntfile.jsmodule.exports = function (grunt) {//初始化配置

    grunt.initConfig({

        cssmin: { //定义配置对象

            minify: { //定义任务目标:压缩

                expand: true, //表下面的文件占位符*要扩展成具体文件名

                cwd: 'css/', //需要处理文件所在目录

                src: ['*.css', '!*.min.css'],//需处理的文件列表(*表任意数量字符,!表示不匹配的情况)

                dest: 'css/', //处理后生成的文件所在目录

                ext: '.min.css' //处理后生成的文件扩展名

            },

            combine: { //定义任务目标:合并

                files: { //目标文件名,源文件名列表

                    'css/out.min.css': ['css/part1.min.css', 'css/part2.min.css']

                }

            }

        }

    });

    grunt.loadNpmTasks('grunt-contrib-cssmin'); //加载npm安装的cssmin模块

    grunt.registerTask('default', ['cssmin:minify', 'cssmin:combine']); //注册任务

};

配置项属性可在Grunt插件列表http://gruntjs.com/plugins 找到对应的模块页面获取详细的信息。上述安装的其它模块的使用方法可参考插件模块页面的介绍。Grunt内部方法调用的基本流程是 grunt.initConfig() -> grunt.loadNpmTasks() -> grunt.registerTask()。

1.3 Grunt任务的运行

1) 运行方式1:Grunt命令行方式执行

命令行进到项目根目录,执行grunt命令,命令格式:grunt 模块名:目标名,未指定模块名,目标名将依次执行相应模块及相应目标。

grunt #各模块及目标依次执行

grunt cssmin #执行cssmin模块下所有目标任务

grunt cssmin:minify #执行cssmin模块下的minify目标任务

2) 运行方式2:开发工具IDE方式执行

1> WebStorm

打开项目代码,右键点击 Gruntfile.js 文件 -> 点击Show Grunt Tasks菜单项 -> 出现Grunt任务列表 -> 右键选中其中一个任务项 Run -> 完成执行。(若Grunt列表出现警告,未列出任务,则需要点击警告设置Grunt的NodeJS和Grunt-cli安装路径)。

2> SublimeText

SublimeText默认没有安装Grunt,参看SublimeText中插件支持的安装方法在Package Control中安装插件"Grunt"。

安装完成后 -> 快捷键ctrl+shift+p(或Tools -> Command Palette)运行命令行 -> 选中Grunt命令 -> 完成执行。

2. Gulp

首页:http://gulpjs.com

中文:http://www.gulpjs.com.cn

项目:https://github.com/gulpjs

源码:https://github.com/gulpjs/gulp

插件:http://gulpjs.com/plugins

2.1 Gulp安装

Gulp和Gulp插件是通过npm(node package manager)安装管理的。

常见的Gulp模块说明

在项目目录安装Gulp及常见的Gulp插件:

npm install gulp --global # 安装常见Gulp模块

npm install gulp-cache --save-dev

npm install gulp-concat --save-dev

npm install gulp-imagemin --save-dev

npm install gulp-jshint --save-dev

npm install gulp-livereload --save-dev

npm install gulp-minify-css --save-dev

npm install gulp-notify --save-dev

npm install gulp-plumber --save-dev

npm install gulp-rename --save-dev

npm install gulp-replace --save-dev

npm install gulp-strip-debug --save-dev

npm install gulp-uglify --save-dev

npm install imagemin-pngquant --save-dev

npm install del --save-dev

2.2 Gulp配置

模块安装完成后,在项目根目录下创建 gulpfile.js 代码文件。

Gulp常用API

-- gulp.src(globs [,options]):产生数据流。匹配glob或glob数组的文件,返回Vinyl-fs类型的stream,可通过管道(pipe)传递给插件

-- gulp.dest(path [,options]):作为管道的输出写入文件,同时输出将继续输出。多次调用dest将多次输出到多个目录,目录不存在则创建

-- gulp.task(name [,deps], fn):指定任务名及任务函数来定义任务。default为Gulp默认执行的任务。

-- gulp.watch(glob [, opts], tasks) 或者 gulp.watch(glob [, opts, cb]):监视文件变化执行某些操作,返回可分发change事件的EventEmitter对象。

以下为压缩css的任务的配置文件

//Gulpfile.jsvar gulp = require("gulp"),

    mincss = require("gulp-minify-css"),

    del = require("del");var stream = gulp.src("css/*.css"); //定义压缩的文件,返回stream//压缩前先清除文件夹里面的内容

gulp.task("clean", function (callback) {

    del(["css/min"], callback);

});

gulp.task("mincss", function () {

    return stream

        .pipe(gulp.dest("css/min")) //输出文件夹

        .pipe(mincss()); //执行压缩

});

gulp.task("default", ["clean"], function () {

    gulp.start("mincss");//clear任务执行时,执行压缩。start方法可传入多个任务参数,表依次执行

});

Gulp API的使用方法详见:http://www.gulpjs.com.cn/docs/api。方法调用的基本流程是 gulp.src() -> gulp.dest() -> task()。

2.3 Gulp运行

1) 运行方式1:Gulp命令行方式执行

项目根目录,执行gulp命令,命令格式:gulp <task> <othertask>,未指定任务名,执行所有任务。

2) 运行方式2:开发工具IDE方式执行

1> WebStorm

打开项目代码,右键点击 Gulpfile.js 文件 -> 点击Show Gulp Tasks菜单项 -> 出现Gulp任务列表 -> 右键选中其中一个任务项 Run -> 完成执行。(若Gulp列表出现警告,未列出任务,则需要点击警告设置Gulp的NodeJS和Gulp安装路径)

2> SublimeText

SublimeText默认没有安装Gulp,参看SublimeText中插件支持的安装方法在Package Control中安装插件"Gulp"。

安装完成后 -> 快捷键ctrl+shift+p(或Tools -> Command Palette)运行命令行 -> 选中Gulp命令 -> 选中任务 -> 完成执行。

3. 构建工具小结

作为一个工具,核心的需求应该是让开发者花最少的时间学习使用,并为开发者节省更多的时间,解放重复的手工劳动。这就要求一个理想的自动化构建工具应满足 简单,易用,易扩展,易维护,高性能,多平台运行,可靠,可测试等要求。其架构设计应满足的功能需求与非功能性需求如下图所示。

Grunt与Gulp都比较完善的构建工具,但是各自有自己的特点:

Grunt

-- 插件较丰富

-- 易用,常见任务都有插件

-- Grunt及插件的选项较多,使用复杂

Gulp

-- 配置较少,使用简单

-- 利用Node.js流,不需要往磁盘写中间文件,速度更快

-- 易于学习,API较少

P.S.还有文章的下半部分,周五再跟大家见面哟~

如果文章觉得不错,动动小手分享给小伙伴吧

--------------------------------------------------------------------------

原文作者:腾讯工程师龙付成。

来源:腾讯内部KM论坛。

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2018-09-26,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 腾讯NEXT学位 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
云开发 CLI 工具
云开发 CLI 工具(Cloudbase CLI Devtools,CCLID)是云开发官方指定的 CLI 工具,可以帮助开发者快速构建 Serverless 应用。CLI 工具提供能力包括文件储存的管理、云函数的部署、模板项目的创建、HTTP Service、静态网站托管等,您可以专注于编码,无需在平台中切换各类配置。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档