• Node 第三方模块
  • 什么是第三方模块
  • 获取第三方模块
  • 第三方模块 nrm
  • 第三方模块 nodemon
  • 第三方模块 Gulp
    • Gulp 能做什么
    • Gulp 的使用
    • Gulp 部分插件
    • 示列代码
  • package.json 文件
    • node_modules 文件夹的问题
    • package.json 文件的作用
  • 项目依赖与开发依赖
  • package-lock.json 文件的作用
  • 模块查找规则
    • 当模块有路径但是没有后缀时，模块的查找规则
    • 当模块没有路径也没有模块后缀只有模块名称，模块的查找规则

Node 第三方模块

什么是第三方模块

别人写好的，具有特定功能的，能直接使用的模块叫第三方模块

• 第三方模块有两种存在形式
  1. 以 js 文件的形式存在，提供实现项目的具体功能的 API 接口
  2. 以命令行工具形式存在，辅助项目开发

获取第三方模块

• npmjs.com 是第三方模块的存储和分发仓库，去此网站查找相关模块
• npm(node package maneger)- Node 的第三方模块管理工具
  • 下载 npm install 模块名称
  • 卸载 npm uninstall 模块名称
  • -g 代表全局安装，否则是本地安装
  • 命令行工具推荐全局安装，库文件本地安装

第三方模块 nrm

nrm 是 npm 的下载地址切换工具

使用方法

1. 使用 npm install nrm -g 安装在全局中
2. 查询可用下载地址列表 nrm ls
3. 切换下载地址 nrm use 下载地址名称

第三方模块 nodemon

nodemon 是一个命令行工具，每次在文件保存后会自动运行代码

使用方法

1. 使用 npm install nodemon -g 安装在全局中
2. 在命令行运行代码时，使用 nodemon 来代替 node 即可，如：nodemon a.js

第三方模块 Gulp

• Gulp 是基于 Node 平台开发的前端构建工具
• 将机械化的操作编写成任务，在命令行输入相关的任务名称就能执行机械化操作

Gulp 能做什么

• HTML, CSS, JS 文件的压缩和合并
• 语法转换 (ES6, LESS)
• 公共文件抽离
• 修改文件浏览器自动刷新

Gulp 的使用

1. 执行 gulp 任务首先要安装 gulp-cli, 安装在全局 npm install gulp-cli -g
2. 安装 Gulp：npm install gulp
3. 在项目根目录新建 gulpfile.js文件
4. 重构项目目录结构 src放源代码文件，dist放置构建后的文件
5. 在gulpfile.js文件中编写任务
6. 在命令行工具中执行gulp任务

Gulp 部分插件

• gulp-cli 执行 gulp 任务需要的
• gulp-htmlmin html 文件压缩
• gulp-csso 压缩 css
• gulp-babel Js 语法转化
• gulp-less less 语法转化
• gulp-uglify 压缩混淆 js 代码
• gulp-file-include 公共文件包含
• browsersync 浏览器实时同步

示列代码

/**
* gulp.src(); 获取要处理的文件
* gulp.dest(); 输出文件
* gulp.task(); 建立gulp任务
* gulp.watch(); 监控文件变化
*/
const gulp = require('gulp');
const htmlmin = require('gulp-htmlmin');
const fileinclude = require('gulp-file-include');
const less = require('gulp-less');
const csso = require('gulp-csso');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');

// 使用 gulp.task() 建立任务
// 1. 任务的名称
// 2. 任务的回调函数
gulp.task('first', function () {
    // 1. 使用 gulp.src获取要处理的文件
    gulp.src('./src/菲林计算.html')
        // 在 .pipe写后续要处理的代码
        .pipe(gulp.dest('dist/html'))
});

// html任务
// 1. html 文件中代码的压缩操作
// 2. 抽取html文件中的公共代码
gulp.task('htmlmin', () => {
    gulp.src('./src/*.html')
        // 抽取html文件中的公共代码
        // 需要先将公共代码放置在单独的文件夹
        // 使用 @@include('./common/header.html') 标记当前公共代码的位置
        .pipe(fileinclude())
        // 压缩html文件中的代码
        .pipe(htmlmin({ collapseWhitespace: true }))
        // 输出代码
        .pipe(gulp.dest('dist'))
});

// css任务
// 1. less 语法转换
// 2. css 压缩
gulp.task('cssmin', () => {
    gulp.src(['./src/css/*.less', './src/css/*.css'])
        // less 转换为 css
        .pipe(less())
        // 压缩 css
        .pipe(csso())
        .pipe(gulp.dest('dist/css'))
});

// javascript 任务
// 1. ES6 代码转换
// 2. 代码压缩
gulp.task('jsmin', () => {
    gulp.src('./src/js/*.js')
        .pipe(babel({
            // 可以判断当前代码的运行环境, 将代码转化为当前环境支持的代码
            presets: ['@babel/env']
        }))
        // 压缩代码
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'))
});

// 复制文件夹任务
gulp.task('copy', () => {
    gulp.src('./src/images/*')
        .pipe(gulp.dest('dist/images'));

    gulp.src('./src/lib/*')
        .pipe(gulp.dest('dist/lib'));
});

// 构建任务
// 当执行default任务的时候,依次执行下面任务
// 在gulp3中使用一下代码, 传递任务数组,依次执行
// gulp.task('default', ['htmlmin', 'cssmin', 'jsmin', 'copy']);

// 在gulp4中使用以下代码, 通过函数 parallel, 将要执行的任务名称传递
gulp.task('default', gulp.parallel('htmlmin', 'cssmin', 'jsmin', 'copy', function(){
    console.log('ok!')
}));

package.json 文件

node_modules 文件夹的问题

1. 文件夹和文件过多，传输速度慢
2. 复杂的模块依赖关系需要记录，保证版本需要被记录，保证版本的一致性

package.json 文件的作用

项目描述文件，记录当前项目信息，使用 npm init 生成，加上 -y 表示使用默认值

项目依赖与开发依赖

• 项目依赖

  • 本地开发或者线上运行都需要的第三方模块 如 jQuery, 叫项目依赖
  • 使用 npm install moduleName 安装，moduleName 会添加到 package.json 文件中的 dependencies字段中

• 开发依赖

  • 本地开发需要的依赖，但是线上运行不需要的依赖 如gulp, 叫开发依赖
  • 使用 npm install moduleName --save-dev 安装，moduleName 会添加到 package.json 文件中的 devDependencies字段中

• 不同环境安装不同的依赖

  • 线下开发环境使用 npm install 下载所有的模块 (dependencies + devDependencies的都下载）
  • 线上运行环境使用 npm install --production 下载线上运行需要的模块

package-lock.json 文件的作用

1. 锁定模块的版本，避免下载最新的模块而出现问题
2. 记录了模块的下载地址，重新安装会直接下载，不会在做其它额外的操作，加快了下载速度

模块查找规则

当模块有路径但是没有后缀时，模块的查找规则

require('./find')

1. 如果没有后缀，先找同名的 js 文件，再找同名的文件夹
2. 如果找到文件夹，找文件夹中的index.js文件
3. 如果文件夹中没有 index.js 文件，会去 find 文件夹下的 package.json 文件中 main 字段中的入口文件
4. 如果指定的入口文件不存在或者没有指定的入口文件就会报错，模块未找到

当模块没有路径也没有模块后缀只有模块名称，模块的查找规则

require('find')

1. Node.js 会假设它是系统模块
2. 如果没有，会去 node_modules 文件夹中找同名的 js 文件
3. 如果没有，会去 node_modules 文件夹中找同名的文件夹
4. 如果有文件夹，会去文件夹中找 index.js
5. 如果文件夹中没有 index.js, 会去查看该文件夹下的 package.json 文件中 main 字段中的入口文件
6. 如果指定的入口文件不存在或者没有指定的入口文件就会报错，模块未找到