笔记--Node.js模块化开发

1. Node.js模块化开发

1.1 javascript开发弊端

javascript在使用时存在两大问题：文件依赖和命名冲突。

1.2 生活中的模块化开发

1.3 软件中的模块化开发

一个功能就是一个模块，多个模块可以组成完整应用，抽离一个模块不会影响其他功能的运行。

1.4 Node.js中模块化开发规范

- Node.js规定一个javascript文件就是一个模块，模块内部定义的变量和函数默认情况下在外部无法得到
- 模块内部可以使用exports对象进行成员导出，使用require方法导入其他模块。

1.5 模块成员导出

// a.js
// 在模块内部定义变量
let version = 1.0;
// 在模块内部定义方法
const sayHi = function (named){
    return ('你好，' + named);
}
// 向模块外部导出数据
exports.version = version;
exports.sayHi = sayHi;

1.6 模块成员的导入

// b.js
// 在b.js模块中导入模块a
let a = require('./b.js');
// 输出b模块中的version变量
console.log(a.version);
// 调用b模块中的sayHi方法，并输出其返回值
console.log(a.sayHi('岁月'));
// 导入模块时可以省略后缀

1.7 模块成员导出的另一种方式

module.export.version = version;
module.exports.sayHi = sayHi;

exports是module.exports的别名(地址引用关系)，导出对象最终以module.exports为准。

// a.js
const greeting = name => 'hello, ' + name;

module.exports.greeting = greeting;

// b.js
const a = require('./a.js');
console.log(a.greeting('zhangsan'));

1.8 模块导出两种方式的练习与区别

// a.js
const greeting = name => 'hello, ' + name;
const x = 100;
exports.x = x;
module.exports.greeting = greeting;
// 当exports对象和module.exports对象指向的不是同一对象时，以module.exports为准
module.exports = {
    name: 'zhangsan'
}

exports = {
    age: 20
}


// b.js
const a = require('./a.js');
console.log(a);

2. 系统模块

2.1 什么是系统模块

Node运行环境提供的API，因为这些API都是以模块化的方式进行开发的，所以我们又称Node运行环境提供的API为系统模块。

2.2 系统模块fs文件操作

f：file文件，s：system系统，文件操作系统。
const  fs  =  require('fs');
读取文件内容：
fs.reaFile('文件路径/文件名称' [, '文件编码'], callback);

// 读取文件语法示例

// 1. 通过模块名字fs对模块进行引用
const fs = require('fs');
// 2. 通过模块内部的readFile读取文件内容
fs.readFile('../server/app.js', 'utf-8', (err, doc) => {
    // 如果文件读取发生错误，参数err的值为错误对象，否则err的值为null
    // doc参数为文件内容
    if (err == null){
        // 在控制台中输出文件内容
        console.log(doc);
    } else{
        console.log(err);
    }
});

// 写入文件内容

const fs = require('fs');
// fs.writeFile('文件路径/文件名称', '数据', callback);

const content = '<h1>正在使用fs.writeFile写入文件内容</h3>';
fs.writeFile('./demo.html', 'content', err => {
    if (err != null) {
        console.log(err);
        return;
    }
    console.log('文件写入成功');
})

2.3 系统模块path路径操作

为什么要进行路径拼接：
- 不同操作系统的路径分隔符不统一
- /public/upload/avatar
- Window上是\ /
- Linux 上是/

2.4 路径拼接语法

// path.join('路径', '路径', ...)

// 导入path模块
const path = require('path');
// 路径拼接
let finialPath = path.join('itcast', 'a', 'c.css');
// 输出结果itcast\a\b\c.css
console.log(finialPath);

2.5 相对路径VS绝对路径

- 大多数情况下使用绝对路径，因为相对路径有时候相对的是命令行工具的当前工作目录
- 在读取文件或者设置文件路径时都会选择绝对路径

const fs = require('fs');
const path = require('path');

// __dirname总是指向被执行 js 文件的绝对路径
console.log(__dirname);
console.log(path.join(__dirname, 'a.js'));

fs.readFile(path.join(__dirname,'a.js'), 'utf-8', (err, doc) => {
    console.log(err);
    console.log(doc);
});

3. 第三方模块

3.1 什么是第三方模块

别人写好的，具有特定功能的，我们直接使用的模块即第三方模块。由于第三方模块通常都是由多个文件组成并且
被设置在一个文件中，所以又称为包。

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

3.2 获取第三方模块

npmks.com：第三方模块的存储和分发仓库

npm (node package manager)：node的第三方模块管理工具
- 下载：npm  install 模块名称
- 卸载：npm  uninstall  package模块名称
全局安装与本地安装：
	- 命令行工具：全局安装
	- 库文件：本地安装

3.3 第三方模块 nodemon

nodemon是一个命令行工具，用以辅助项目开发。
在node.js中，每次修改文件都要在命令行工具中重新执行该文件，非常繁琐。

使用步骤：
1. 使用npm  install  nodemon  -g 下载它
2. 在命令行工具中用nodemon命令代替node命令执行文件

3.4 第三方模块 nrm

3.5 第三方模块 Gulp

官网：https://www.gulpjs.com.cn/

基于node平台开发的前端构建工具
将机械化操作编写成任务，想要执行机械化操作时执行一个命令行命令任务就能自动执行了
用机器代替手工，提高开发效率。

3.6 Gulp能做什么

- 项目上线，HTML，CSS，JS文件压缩合并
- 语法转换(es6, less...)
- 公共文件抽离
- 修改文件浏览器自动刷新

3.7 Gulp使用

1. 使用npm  install  gulp下载gulp库文件
2. 在项目根目录下建立gulpfile.js文件】
3. 重构项目的文件夹结构src目录放置源代码文件，dist 录放置构建后的文件。
4. 在gulpfile.js文件中编写任务
5. 在命令行工具中执行gulp任务

3.8 Gulp中提供的方法

- gulp.src()：获取任务要处理的文件
- gulp.dest()：输出文件
- gulp.task()：建立gulp任务
- gulp.watch()：监控文件变化

3.9 Gulp插件

- gulp-htmlmin：html文件压缩
- gulp-csso：压缩CSS
- gulp-babel：javascript语法转化
- gulp-less：less语法转化
- gulp-uglify：压缩混淆javascript
- gulp-fine-include：公共文件包含
- browsersync：浏览器实时同步

// 引用gulp模块
const { doesNotThrow } = require('assert');
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', ()=>{
    console.log('我们人生中的第一个gulp任务执行了');
    // 1. 使用gulp.src获取要处理的文件
    gulp.src('./src/zhuye.html')
        .pipe(gulp.dest('dist/html'));
}) 

// html任务
// 1. html文件中代码的压缩操作
// 2. 抽取html文件中的公共代码
gulp.task('htmlmin', done => {
    gulp.src('./src/*.html')
        // 压缩html文件中的代码
        .pipe(fileinclude())
        .pipe(htmlmin({ collapseWhitespace: true }))
        .pipe(gulp.dest('dist'));
        done();
  });

// CSS任务
// 1. less语法转换
// 2. css代码压缩
gulp.task('cssmin', done => {
    // 选择CSS目录下的所有Less文件以及css文件
    gulp.src(['./src/css/*.less', './src/css/*.css'])
        // 将less语法转换为CSS语法
        .pipe(less())
        // 将CSS代码进行压缩
        .pipe(csso())
        // 将处理的结果进行输出
        .pipe(gulp.dest('dist/css'));
    done();
})

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

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

// 构建任务 完成多项任务
gulp.task('default', gulp.series('htmlmin', 'cssmin', 'jsmin', 'copy', done => {
  done();
}));


// 不要Gulp3的方式指定依赖任务，需要使用gulp.series和gulp.parallel，
// 因为gulp任务现在只有两个参数
// gulp.series：按照顺序执行
// gulp.parallel：可以并行计算
gulp.task('default', gulp.series('htmlmin', 'cssmin', 'jsmin', 'copy', done => {
    done();
}));

gulp.task('default', gulp.parallel('htmlmin', 'cssmin', 'jsmin', 'copy', done => {
    done();
}));
// 或者这样：
gulp.task('my-tasks', gulp.series('a', gulp.parallel('styles', 'scripts', 'images'), 'b', 'c', () => {
    // Do something after a, b, and c are finished.
}))
  

运行：

4. Node.js中模块加载机制

4.1 模块查找规则-当模块拥有路径但没有后缀时

require('./find.js');
require('./find');
1. require 方法根据模块路径查找模块，如果是完整路径，直接引入模块。
2. 如果模块后缀省略，先找同名JS文件再找同名JS文件夹。
3. 如果找到了同名文件夹，找文件夹中的index.js
4. 如果文件夹中没有index.js就会去当前文件夹中的package.js文件中查找main选项中的入口文件。
5. 如果找指定的入口文件不存在或者没有指定入口文件就会报错，模块没有被找到。

4.2 模块查找规则-当模块没有路径且没有后缀时

require('find');
1. Node.js 会假设它是系统模块
2. Node.js 会去node_module文件夹中
3. 首先看是否有该名字的JS文件
4. 再看是否有该名字的文件夹
5. 如果是文件夹看里面是否有index.js
6. 如果没有index.js查看该文件夹中的package.json中的main选项确定模块入口文件
7. 否则找不到报错

5. package.json 文件

5.1 node_modules文件夹的问题

1. 文件夹以及文件过多过碎，当我们将项目整体拷贝给别人的时候，传输速度会很慢很慢。
2. 复杂的模块依赖关系需要被记录，确保模块的版本和当前保持一致，否则会导致当前项目运行报错

5.2 package.json文件的作用

项目描述文件，记录了当前项目信息，例如项目名称，版本，作者，github地址，当前项目依赖了那些第三方模块等。
使用npm init -y 命令生成。

package.json文件解决文件夹过碎的问题，根据里面dependencies选项下载第三方模块。

5.3 项目依赖

- 在项目的开发阶段和线上运营阶段都需要依赖的第三方包，称为项目依赖。
- 使用npm install 包名命令下载的文件会默认被添加到package.json文件的dependencies字段中。

{
    "dependencies": {
        "jquery": "^3.3.1"
    }
}

5.4 开发依赖

- 在项目的开发阶段需要依赖，线上运营阶段不需要依赖的第三方包，称为开发依赖。
- 使用npm install 包名 --save-dev命令将包添加到package.json文件的devDependencies字段中。

{
    "devDependencies": {
        "gulp": "^3.9.1"
    }
}

项目运行依赖：

只安装这里面的：

开发依赖：

安装所有的：

5.5 package-lock.json文件的作用

- 锁定包的版本，确保再次下载时不会因为包版本不同而产生问题。
- 加快下载速度，因为该文件中已经记录了项目所依赖第三方包的树状结构和包的下载地址，重新安装时只
需下载即可，不需要做额外的工作。
script 选项：命令别名