JS在使用时存在两大问题:文件依赖和命名冲突
在复用某些js文件时,模块化使文件不再依赖,抽离某一模块不会影响整体,文件与文件之间半封闭,同名变量可以在不同文件间共存。
一、Node.js中模块化开发规范
- Node.js规定一个JS文件就是一个模块,模块内部定义的变量和函数默认情况下在外部无法得到;
- 模块内部可以用exports对象进行成员导出,使用require方法导入其他模块。
1.1模块成员导出
//a.js文件
//在模块内部定义变量
let version = 1.0;
const sayHi = name =>`您好,$(name)`;
//向模块外部导出数据
exports.version = version;
exports.sayHi = sayHi;
1.2模块成员的导入
//b.js文件
//在b.js模块中导入模块a
let a = require('./b.js');
//输出b模块中的version变量
console.log(a.version);
//输出b模块中的sayHi方法并输出其返回值
console.log(a.sayHi('黑马讲师'));
示例
//a.js
const add = (n1, n2) => n1 + n2;
exports.add = add;
//b.js
const a = require('./03.module-a.js');
console.log(a.add(10, 20));
1.3另一种导入方法
exports是module.exports的别名(地址引用关系),如果两个值不同,导出对象最终以module.exports为准
示例
//a.js文件
const greeting = name => `hello ${name}`;
module.exports.greeting = greeting;
//b.js文件
const a = require('./04.module.exports.js');
console.log(a.greeting('zhangsan'));
二、系统模块
2.1 什么是系统模块
- Node运行环境提供的API,因为这些API都是以模块化的方式进行开发的,所以我们又称Node运行环境提供的API为系统模块
2.2 系统模块fs 文件操作
- f:file文件,s:system系统,文件操作系统
const fs = require('fs');
2.2.1 读取文件内容(带中括号的是可选参数)
fs.reaFile('文件路径/文件名称' 【,'文件编码'】,callback);
示例
//1.通过模块的名字fs对模块进行引用
const fs = require('fs');
//2.通过模块内部的readFile读取文件内容
fs.readFile('./新建文本文档.txt', 'utf8', (err, doc) => {
//如果文件读取出错 err是一个对象 包含错误信息
//如果文件读取正确 err是null
//doc是文件读取的结果
console.log(err);
console.log(doc);
});
2.2.2 写入文件内容
fs.writeFile('文件路径/文件名称','数据',callback);
示例(没有写入的txt会自动新建一个txt文件)
const fs = require('fs');
fs.writeFile('./demo.txt', '即将要写入的内容', err => {
if (err != null) {
console.log(err);
return;
}
console.log('文件内容写入成功');
})
2.2.3 系统模块path 路径操作
为什么要进行路径拼接
1.不同操作系统的路径分隔符不统一
2./public/uploads/avatar
3.Windows上是\ /
4.Linux上是/路径拼接语法
path.join('路径', '路径', ...)
//导入path模块
const path = require('path');
//路径拼接
let finialPath = path.join('itcast','a','b','c.css');
//输出结果itcast\a\c\c.css
console.log(finialPath);
2.2.4 相对路径VS绝对路径
- 大多数情况下使用绝对路径,因为相对路径有时候相对的是命令行工具的当前工作目录;
- 在读取文件或者设置文件路径时都会选择绝对路径
- 可以使用_dirname获取当前文件所在的绝对路径,可以得到绝对路径之后再通过路径拼接拼接上文件名
示例
const fs = require('fs');
const path = require('path');
console.log(__dirname);
console.log(path.join(__dirname, 'hellonode.js'));
fs.readFile(path.join(__dirname, 'hellonode.js'), 'utf8', (err, doc) => {
console.log(err)
console.log(doc)
});
三、第三方模块
3.1 什么是第三方模块
由于第三方模块通常都由多个文件组成并且被放置在一个文件夹中,所以又名为包。
第三方模块有两种形式:
- 以js文件的形式存在,提供实现项目具体功能的API接口。
npmjs.com:第三方模块的存储和分发仓库
3.2 获取第三方模块
npm(node package manager): node的第三方模块管理工具
- 下载:npm install 模块名称
- 卸载:npm uninstall 模块名称
全局安装与本地安装
- 命令行工具:全局安装
- 库文件:本地安装
3.3 第三方模块 nodemon
nodemon是一个命令行工具,用以辅助项目开发
在Node.js中,每次修改文件都要在命令行工具中重新执行该文件
使用步骤
- 1.使用npm install nodemon -g 进行全局安装
- 2.在命令行工具中使用nodemon命令代替node命令执行文件
nodemon模式下ctrl+c退出
3.4 第三方模块 nrm
nrm(npm registry manager):npm下载地址切换工具
npm默认的下载地址在国外,国内下载速度慢
使用步骤:
- 1.使用npm install nrm -g 下载它
- 2.查询可用下载地址列表nrm Is
-
3.切换npm下载地址nrm use 下载地址名称
图中,前面带星号的即是当前的默认下载地址,使用nrm use taobao
即可更改默认地址到taobao
3.5 第三方模块 Gulp
基于node平台开发的前端构建工具
将机械化操作编写成任务,想要执行机械化操作时执行一个命令行命令任务就能自动执行了
3.5.1 Gulp能做什么
- 项目上线,HTML、CSS、JS文件压缩合并
- 语法转换(es6、less...)【浏览器无法识别less语法】
3.5.2 Gulp使用
- 1.使用npm install gulp下载gulp库文件
- 2.在项目根目录下建立gulpfile.js文件【注:此js文件名是固定的】
- 3.重构项目的文件夹结构src目录放置源代码文件,新建dist目录放置构建后的文件
- 4.在gulpfile.js文件中编写任务
- 5.在命令行工具中执行gulp任务
3.5.3 Gulp中提供的方法
- gulp.src():获取任务要处理的文件
- gulp.dest():输出文件 必须与pipe联合使用
- gulp.task():建立gulp任务 task的第一个参数是gulp的任务名称,第二个参数是回调函数,自动执行
- gulp.watch():监控文件的变化
const gulp = require('gulp');
//使用gulp.task()方法建立任务
gulp.task('first',()=>{
//获取要处理的文件
gulp.src('./src/css/base.css')
//将处理后的文件输出到dist目录
.pipe(gulp.dest('./dist/css'));
));
安装gulp命令行工具
npm install gulp-cli -g
安装以后可以使用类似node的功能:gulp
示例
gulp的文件拷贝操作,gulp的first任务将./src/css/base.css下的base.css文件复制到了dist文件夹下的css文件夹
//引用gulp模块
const gulp = require('gulp');
//使用gulp.task建立任务
//1.任务的名称
//2.任务的回调函数
gulp.task('first', done => {
console.log('第一个gulp任务');i
//1.使用gulp.src获取要处理的文件
gulp.src('./src/css/base.css')
//gulp可以创建不存在的文件
.pipe(gulp.dest('dist/css'));
done();
});
3.6 Gulp插件
- gulp-htmlmin:html文件压缩
- gulp-csso:压缩css
- gulp-babel:JavaScript语法转化
- gulp-less:less语法转化
- gulp-uglify:压缩混淆JavaScript
- gulp-file-include:公共文件包含
- browsersync:浏览器实时同步