Node.js模块化开发

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 下载地址名称

  
  687a39a911bdb9115c2bcf9c247fdb9.png

图中，前面带星号的即是当前的默认下载地址，使用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：浏览器实时同步