nodejs之常用第三方模块

第三方模块

第三方模块是 Node.js 中没有的，而是其他开发者写好的、我们可以直接使用的模块，第三方模块通常由多个文件组成，放在一个文件夹中，又称为包。

第三方模块有两种存在方式：

• 以 js 文件存在提供实现功能的 API 接口
• 以命令行形式存在，辅助项目开发

Node.js 中的第三方模块通常存在 NPM 中：NPM官网

Node.js 内置了 npm 来对 NPM 官网中的内容进行安装，在终端中输入：npm -v 可以查看当前 npm 的版本。

• 安装模块命令：npm install module_name
• 卸载模块命令：npm uninstall module_name

nodemon 工具

nodemon 是一个命令行工具，用来替代 node 命令执行 js 文件，在之前的执行中。
如果使用 node 命令执行 js 文件，需要 ctrl+c 结束之后重新 node *** 来运行，当使用了 nodemon 允许 js 文件时，运行之后不会结束，而是监听当前文件中的保存操作，一旦保存，便重新执行当前 js 文件。

这对于做服务端的 Node.js 来说节省了开发人员每次 ctrl+c 结束运行、重新运行的时间。

安装命令如下：npm install nodemon -g，-g 表示全局安装。

在 nodemon 执行一个文件之后，会一直监听用户的保存操作。直到按下 ctrl+c 结束。

nrm 工具

nrm 也是一个命令行工具，可以快速切换 npm 的下载地址。

• 安装：npm install nrm -g
• 查询下载地址：nrm ls

安装 nrm 之后使用 nrm ls 查询下载地址可能会出现下面的错误：

nrm : 无法加载文件 C:\Users\hc\AppData\Roaming\npm\nrm.ps1 ，因为在此系统上禁止运行脚本，
这时右键 win 标，打开 PowerShell（管理员），输入如下指令：

set-ExecutionPolicy RemoteSigned

y

再次执行 nrm ls，结果如下：

* npm -------- https://registry.npmjs.org/
  yarn ------- https://registry.yarnpkg.com/
  cnpm ------- http://r.cnpmjs.org/
  taobao ----- https://registry.npm.taobao.org/
  nj --------- https://registry.nodejitsu.com/
  npmMirror -- https://skimdb.npmjs.com/registry/
  edunpm ----- http://registry.enpmjs.org/

例如想要使用淘宝的 cnpm，输入 nrm use taobao 结果如下：

   Registry has been set to: https://registry.npm.taobao.org/
   

再次执行 nrm ls 结果如下：

  npm -------- https://registry.npmjs.org/
  yarn ------- https://registry.yarnpkg.com/
  cnpm ------- http://r.cnpmjs.org/
* taobao ----- https://registry.npm.taobao.org/
  nj --------- https://registry.nodejitsu.com/
  npmMirror -- https://skimdb.npmjs.com/registry/
  edunpm ----- http://registry.enpmjs.org/

taobao 被选中

Gulp 模块

Gulp 的用处：

• HTML、CSS、JS 文件压缩合并
• 语法转换（ES6 -> ES5）
• 公共文件抽离
• 修改文件浏览器自动刷新

安装 Gulp

如果要使用 Gulp，需要以下步骤：

• 使用 npm install gulp 下载 gulp 库文件
• 在项目根目录下建立 gulpfile.js 文件
• 重构文件夹结构 src/dist，src 用来存放源代码，dist 用来存放编译后的文件
• 在 gulpfile.js 文件中编写任务
• 在命令行工具中执行 gulp 任务

另外，还需要下载 Gulp 的 cli 执行工具，使用 npm install gulp-cli -g 来安装

这里必须要使用全局安装，否则使用 gulp 执行任务时，系统找不到 gulp 指令。

Gulp 中提供的方法

• gulp.task()：建立 gulp 任务
• gulp.src()：获取任务要处理的文件。可以处理多个文件，需要传入一个数组，数组中的元素可以是要修改的各个文件的名称和路径
• gulp.dest()：输出文件的路径
• gulp.watch()：监控文件的变化
• pipe()：dest() 方法需要写在该方法中，下面插件中的操作也需要写在该方法中

我们需要在 gulpfile.js 文件中编写 gulp 任务。如下代码所示：

const gulp = require('gulp')

gulp.task('first', ()=>{

    gulp.src('./src/HTML/index.html')
        .pipe(gulp.dest('./dist/css'))
    console.log('gilp的 first 任务执行成功！！！')
})

上述代码使用 gulp.task 建立了 gulp 任务，该方法接受两个参数，第一个参数是 gulp 任务名称，第二个参数为回调函数，在 task 方法内部创建该 gulp 任务所需的操作。

需要注意代码第 6 行，使用 src 获取了原目录之后，需要使用 pipe 方法，也就是说：所有对生成文件的操作，均需要在 pipe 方法中进行，然后在 pipe 方法中使用 dest 方法设置输出目录。

在项目的根目录中打开终端，输入如下指令：gulp first，表示执行 gulpfile.js 中的 first 任务，输出如下：

[18:40:33] Using gulpfile E:\Git_Code\ricardo\Node.js\Gulp\gulpfile.js
[18:40:33] Starting 'first'...
gilp的 first 任务执行成功！！！
[18:40:33] The following tasks did not complete: first
[18:40:33] Did you forget to signal async completion?

查看 dist 文件夹中自动创建了 css 文件夹。

gulp 插件

原生 gulp 中仅仅提供了五个方法，如果需要使用 gulp 完成更复杂的操作，需要使用插件来实现，常见的插件如下“

• gulp-htmlmin：压缩 html
• gulp-csso：压缩 css
• gulp-babel：JavaScript 语法转化
• gulp-less：less 语法转化
• gulp-uglify：压缩 JavaScript
• gulp-file-include：公共文件包含
• browsersync：浏览器实时同步

压缩 HTML

压缩 html 需要使用 gulp-htmlmin 插件，NPM-gulp-htmlmin 可以使用 npm install gulp-htmlmin 进行安装。

如下代码所示：

const gulp = require('gulp')
const gulp_htmlmin = require('gulp-htmlmin')

gulp.task('first', ()=>{

    gulp.src('./src/HTML/index.html')

        // collapseWhitespace 合并空格和换行
        .pipe(gulp_htmlmin({ collapseWhitespace: true }))
        .pipe(gulp.dest('./dist/html'))
    console.log('gilp的 first 任务执行成功！！！')
})

在终端中输入：gulp first 结果如下所示：

[21:09:32] Using gulpfile E:\Git_Code\ricardo\Node.js\Gulp\gulpfile.js
[21:09:32] Starting 'first'...
gilp的 first 任务执行成功！！！
[21:09:32] The following tasks did not complete: first
[21:09:32] Did you forget to signal async completion?

打开 dist 下面的 html 目录，发现 index.html 文件无任何空格和换行。

提取 html 公共代码

可以使用 gulp-file-include 插件对 html 代码中公共的部分进行提取。使代码变得易于维护。 对于公共部分的修改只需要修改公共部分即可。

可以使用 npm install gulp-file-include 对该插件进行安装。

插件地址：gulp-file-include

如果要提取公共部分的代码，需要新建一个 html 文件，该文件不需要基本的 html 结构，只需要书写另外 html 文件中的公共部分。如下 html 文件：

public.html 文件：

<div>这是公共部分</div>

下面有两个 html 文件，需要上面文件的公共部分：

index1.html 文件：

<body>

@@include('./common/public.html')
<p>这是 index1 的私有部分</p>

</body>

需要注意代码第 3 行，使用了 @@include 语法，表示在当前位置引入公共代码，代码文件为括号中的路径。

index2.html 文件：

<body>

<p>这是 index2 的私有部分</p>
@@include('./common/public.html')

</body>

gulpfile.js 文件：

const gulp = require('gulp')
const gulp_htmlmin = require('gulp-htmlmin')
const gulp_file_include = require('gulp-file-include')
gulp.task('first', ()=>{

    gulp.src('./src/*.html')

        .pipe(gulp_file_include())
        .pipe(gulp.dest('./dist/html'))
    
    console.log('gilp的 first 任务执行成功！！！')
})

在终端中输入 gulp first 命令，会在 dist 目录下的 html 文件夹中生成两个 html 文件，格式如下：

生成的 index1.html：

<body>

<div>这是公共部分</div>

<p>这是 index1 的私有部分</p>

</body>

生成的 index2.html：

<body>

<p>这是 index2 的私有部分</p>

<div>这是公共部分</div>

</body>

发现之前的 @@include() 部分变成了公共代码。

压缩 CSS

压缩 css 需要使用 gulp-csso 插件，安装命令 npm install gulp-csso。

插件地址：gulp-csso

gulpfile.js 文件：

const gulp = require('gulp')
const csso = require('gulp-csso')
gulp.task('css_min', ()=>{
    gulp.src('./src/CSS/index.css')
        .pipe(csso())
        .pipe(gulp.dest('./dist/css'))
})

在终端中输入 gulp css_min，执行成功之后在 dist 目录下的 css 文件新增了 index.css 文件。

less 语法转 css 语法

gulp-less 插件可以实现 less 语法转换为 css 语法，安装命令 npm install gulp-less。

插件地址：gulp-less

test.less 文件：

header{
  width: 100px;
  height: 100px;
  .box{
    margin: 0 auto;
    background-color: #9A0000;
  }
}

gulpfile.js 文件：

const gulp = require('gulp')
const less = require('gulp-less')
// less_css
gulp.task('less_css', ()=>{
    gulp.src('./src/CSS/test.less')
        .pipe(less())
        .pipe(gulp.dest('./dist/css'))
})

在终端中输入 gulp less，在 dist 目录中的 css 目录下发现生成了 test.css 文件，格式如下：

header {
  width: 100px;
  height: 100px;
}
header .box {
  margin: 0 auto;
  background-color: #9A0000;
}

less 文件成功转为 css 文件。

压缩 JavaScript

需要使用 gulp-uglify，安装命令 npm install gulp-uglify。

插件地址：gulp-uglify

gulpfile.js 文件：

const gulp = require('gulp')
const uglify = require('gulp-uglify')
gulp.task('js_min', ()=>{
    gulp.src('./src/JS/*.js')
        .pipe(babel({
            presets: ['@babel/env']
        }))
        .pipe(uglify())
        .pipe(gulp.dest('./dist/js'))
})

在终端中输入 gulp js_min 将压缩后的 js 代码保存到了 dist 目录下的 js 文件夹中。

ES6 转 ES5

需要使用 gulp-babel 插件，安装命令 npm install gulp-babel @babel/core @babel/preset-env

插件地址：gulp-babel

gulpfile.js 文件：

const gulp = require('gulp')
const babel = require('gulp-babel')
gulp.task('es6_es5', ()=>{
    gulp.src('./src/JS/*.js')
        .pipe(babel({
            presets: ['@babel/env']
        }))
        .pipe(gulp.dest('./dist/js'))
})

在终端中输入 gulp es6_es5 将 es5 代码生成到当前 dist 目录下 js 文件夹中。

构建 Gulp 任务

在上面笔记中依次书写了 html、css、js 任务，如果我们想要执行这里的所有任务可以定义一个 default 任务，该任务依次执行上述任务，并且如果 gulpfile.js 文件中如果存在 default 任务，那么只需要在终端中输入 gulp 会默认执行 default 任务。

如下代码所示：

gulp.task('default',  ['first', 'css_min', 'less_css', 'es6_es5', 'js_min'])

需要注意的是，上述方法仅仅适用于 gulp 4- 版本，可以在终端中输入 gulp -v 来查看当前的 gulp 版本。

如果你使用的是 4+ 版本，需要将 gulpfile.js 文件改成下面的样子：

gulp.task('default',  gulp.parallel('first', 'css_min', 'less_css', 'es6_es5', 'js_min', function() {
    // Do something after a, b, and c are finished.
}))

在终端中输入 gulp 输出如下：

[22:54:44] Using gulpfile E:\Git_Code\ricardo\Node.js\Gulp\gulpfile.js
[22:54:44] Starting 'default'...
[22:54:44] Starting 'first'...
[22:54:44] Starting 'css_min'...
[22:54:44] Starting 'less_css'...
[22:54:44] Starting 'es6_es5'...
[22:54:44] Starting 'js_min'...
[22:54:44] Starting '<anonymous>'...
gilp的 first 任务执行成功！！！
[22:54:45] The following tasks did not complete: default, first, css_min, less_css, es6_es5, js_min, <anonymous>
[22:54:45] Did you forget to signal async completion?

详见 gulp default任务报错 Task function must be specified - 优快云