Node 第三方模块
什么是第三方模块
别人写好的，具有特定功能的，能直接使用的模块叫第三方模块
- 第三方模块有两种存在形式
- 以 js 文件的形式存在，提供实现项目的具体功能的 API 接口
- 以命令行工具形式存在，辅助项目开发
获取第三方模块
- npmjs.com 是第三方模块的存储和分发仓库，去此网站查找相关模块
- npm(node package maneger)- Node 的第三方模块管理工具
- 下载
npm install 模块名称 - 卸载
npm uninstall 模块名称 -
-g代表全局安装，否则是本地安装 - 命令行工具推荐全局安装，库文件本地安装
- 下载
第三方模块 nrm
nrm 是 npm 的下载地址切换工具
使用方法
- 使用
npm install nrm -g安装在全局中 - 查询可用下载地址列表
nrm ls - 切换下载地址
nrm use 下载地址名称
第三方模块 nodemon
nodemon 是一个命令行工具，每次在文件保存后会自动运行代码
使用方法
- 使用
npm install nodemon -g安装在全局中 - 在命令行运行代码时，使用
nodemon来代替node即可，如：nodemon a.js
第三方模块 Gulp
- Gulp 是基于 Node 平台开发的前端构建工具
- 将机械化的操作编写成任务，在命令行输入相关的任务名称就能执行机械化操作
Gulp 能做什么
- HTML, CSS, JS 文件的压缩和合并
- 语法转换 (ES6, LESS)
- 公共文件抽离
- 修改文件浏览器自动刷新
Gulp 的使用
- 执行 gulp 任务首先要安装
gulp-cli, 安装在全局npm install gulp-cli -g - 安装 Gulp：
npm install gulp - 在项目根目录新建
gulpfile.js文件 - 重构项目目录结构
src放源代码文件，dist放置构建后的文件 - 在
gulpfile.js文件中编写任务 - 在命令行工具中执行
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 文件夹的问题
- 文件夹和文件过多，传输速度慢
- 复杂的模块依赖关系需要记录，保证版本需要被记录，保证版本的一致性
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 文件的作用
- 锁定模块的版本，避免下载最新的模块而出现问题
- 记录了模块的下载地址，重新安装会直接下载，不会在做其它额外的操作，加快了下载速度
模块查找规则
当模块有路径但是没有后缀时，模块的查找规则
require('./find')
- 如果没有后缀，先找同名的 js 文件，再找同名的文件夹
- 如果找到文件夹，找文件夹中的
index.js文件 - 如果文件夹中没有
index.js文件，会去find文件夹下的package.json文件中main字段中的入口文件 - 如果指定的入口文件不存在或者没有指定的入口文件就会报错，模块未找到
当模块没有路径也没有模块后缀只有模块名称，模块的查找规则
require('find')
- Node.js 会假设它是系统模块
- 如果没有，会去
node_modules文件夹中找同名的 js 文件 - 如果没有，会去
node_modules文件夹中找同名的文件夹 - 如果有文件夹，会去文件夹中找
index.js - 如果文件夹中没有
index.js, 会去查看该文件夹下的package.json文件中main字段中的入口文件 - 如果指定的入口文件不存在或者没有指定的入口文件就会报错，模块未找到
