模块加载及第三方包
1. Node.js模块化开发
1.1 JavaScript开发弊端
JavaScript在使用时存在两大问题，文件依赖和命名冲突
1.2 生活中的模块化开发
1.3 软件中的模块化开发
一个功能就是一个模块，多个模块可以组成完整应用，抽离一个模块不会影响其他功能的运行。
1.4 Node.js中模块化开发规范
●Node.js规定一个JavaScript文件就是一个模块，模块内部定义的变量和函数默认情况下在外部无法得到
●模块内部可以使用exports对象进行成员导出，使用require方法导入其他模块
1.5 模块成员导出和导入
//03.module-a.js
const add =(n1,n2)=>n1+n2;
//向模块外部导出数据
exports.add =add;//第一个add为exports的属性(名称),第二个add为上面的变量
//03.module-b.js
// const a =require('./03.module-a.js');
// 在b.js模块中导入模块a
const a =require('./03.module-a');//导入模块时后缀.js可以省略
//调用b模块中的add函数,并传入参数
console.log(a.add(10,20));
1.6 模块成员导出的另一种方式
module.exports.version = version;
module.exports.sayHi = sayHi;
exports是module.exports的别名(地址引用关系)，导出对象最终以module.exports为准
//04.module.exports.js
const greeting = name => `hello ${name}`;
const x = 100;
exports.x = x;
module.exports.greeting = greeting;
// 当exports对象和moudle.exports对象指向的不是同一个对象时 以module.exports为准
module.exports = {
name: 'zhangsan'
}
exports = {
age: 20
}
//04.require.js
const a = require('./04.module.exports.js');
// console.log(a.greeting('zhangsan'));
console.log(a);
2. 系统模块
2.1 什么是系统模块
系统模块就是Node运行环境提供的API. 因为这些API都是以模块化的方式进行开发的, 所以我们又称Node运行环境提供的API为系统模块
2.2 fs文件操作模块
f：file 文件 ，s：system 系统，fs文件操作系统
引用文件操作系统模块
const fs = require('fs');
读取文件内容
fs.readFile(filename,[encoding],[callback(err,data)])
filename（必选），表示要读取的文件名。
encoding（可选），表示文件的字符编码。
callback 是回调函数，用于接收文件的内容。
Node.js 异步编程的直接体现就是回调，回调函数在完成任务后就会被调用，Node 使用了大量的回调函数，Node 所有 API 都支持回调函数。上面fs.readFile读取内容的操作就使用了回调函数。
Node 应用程序是如何工作的？
在 Node 应用程序中，执行异步操作的函数将回调函数作为最后一个参数， 回调函数将接收错误对象作为第一个参数。
例如：创建一个 input.txt ,文件内容如下：
加油啊
//main.js
var fs = require("fs");
fs.readFile('input.txt', function (err, data) {
if (err){
console.log(err.stack);
return;
}
console.log(data.toString());
});
console.log("程序执行完毕");
以上程序中 fs.readFile() 是异步函数用于读取文件。 如果在读取文件过程中发生错误，错误 err 对象就会输出错误信息。
如果没发生错误，readFile 跳过 err 对象的输出，文件内容就通过回调函数输出。
写入文件内容
fs.writeFile('文件路径/文件名称', '数据', callback);
//06.writeFile.js
const fs = require('fs');
fs.writeFile('./demo.txt', '即将要写入的内容', err => {
//demo.txt原本没有,它自己自动生成的
if (err != null) {
console.log(err);
return;
}
console.log('文件内容写入成功');
})
2.3 path 路径操作模块
为什么要进行路径拼接 ?不同操作系统的路径分隔符不统一,Windows 上是 \ /,Linux 上是 /
2.4 路径拼接语法
path.join('路径', '路径', ...)
//07.path.js
// 引入路径拼接path模块
const path = require('path');
// 路径拼接
const finalPath = path.join('itcast', 'a', 'b', 'c.css');
// 输出结果 itcast\a\b\c.css
console.log(finalPath);
2.5 相对路径VS绝对路径
绝对路径:从根目录为起点到你所在的目录；
相对路径:从一个目录为起点到你所在的目录
例如：
┍ A文件夹
C -|
┕ B文件夹
绝对路径： C:\A文件夹
相对路径（如果你在B文件夹时）： …\B文件夹 （‘…\’向上一级意思）
●大多数情况下使用绝对路径，因为相对路径有时候相对的是命令行工具的当前工作目录
●在读取文件或者设置文件路径时都会选择绝对路径
●使用__dirname获取当前文件所在的绝对路径 (前面是双下划线)
//08.relativeOrAbsolute.js
const fs = require('fs');
const path = require('path');
console.log(__dirname);//获取当前文件所在的绝对路径
console.log(path.join(__dirname, '01.helloworld.js')); //路径拼接
fs.readFile(path.join(__dirname, '01.helloworld.js'), 'utf8', (err, doc) => {
console.log(err);
console.log(doc);
})
3. 第三方模块
3.1 什么是第三方模块
别人写好的、具有特定功能的、我们能直接使用的模块即第三方模块，由于第三方模块通常都是由多个文件组成并且被放置在一个文件夹中，所以又名包
第三方模块有两种存在形式:
●以js文件的形式存在，提供实现项目具体功能的API接口。
●以命令行工具形式存在，辅助项目开发
3.2 获取第三方模块
npmjs.com：第三方模块的存储和分发仓库
npm (node package manager) ： node的第三方模块管理工具
下载：npm install 模块名称 (install简写为i)
卸载：npm unintall 模块名称 (uninstall简写为uni)
i 是install 的简写
全局安装与本地安装
●全局安装 ：npm i module_name -g
●本地安装 ：npm i module_name
全局安装是将npm包安装在你的node安装目录下的node_modules文件夹中。
本地安装时将npm包安装在你当前项目下的node_modules文件夹中。
查看所有全局安装的模块：npm list -g
在全局更新模块：npm update module_name -g （本地更新不加g）
3.3 第三方模块 nodemon
nodemon是一个命令行工具，用以辅助项目开发。
在Node.js中，每次修改文件都要在命令行工具中重新执行该文件，非常繁琐。
作用:监控文件的保存操作,当文件发生保存操作时,就会重新执行该文件 Ctrl+c终止操作
使用步骤:
1.使用npm install nodemon –g 下载它
2.在命令行工具中用nodemon命令替代node命令执行文件
3.4 第三方模块 nrm
nrm ( npm registry manager )：npm下载地址切换工具
npm默认的下载地址在国外，国内下载速度慢
使用步骤:
1.使用npm install nrm –g 下载它
2.查询可用下载地址列表 nrm ls
3.切换npm下载地址 nrm use 下载地址名称 nrm use taobao
3.5 第三方模块 Gulp
1.gulp是基于node平台开发的前端自动化构建工具
将机械化操作编写成任务, 想要执行机械化操作时执行一个命令行命令任务就能自动执行了
用机器代替手工，提高开发效率。
2.gulp能做什么?
●项目上线，HTML、CSS、JS文件压缩合并
●语法转换（es6、less …）
●公共文件抽离
●修改文件浏览器自动刷新
3.6 Gulp使用
1.使用npm install gulp下载gulp库文件
2.在项目根目录下建立gulpfile.js文件
3.重构项目的文件夹结构 src目录放置源代码文件 dist目录放置构建后文件
4.在gulpfile.js文件中编写任务.
5.在命令行工具中执行gulp任务
3.7 Gulp中提供的方法
●gulp.src()：获取任务要处理的文件
●gulp.dest()：输出文件
●gulp.task()：建立gulp任务
●gulp.watch()：监控文件的变化
//gulpfile.js
// 引用gulp模块
const gulp = require('gulp');
// 使用gulp.task建立任务
// 参数1.任务的名称
// 参数2.任务的回调函数
gulp.task('first', () => {
console.log('我们人生中的第一个gulp任务执行了');
// 1.使用gulp.src获取要处理的文件
gulp.src('./src/css/base.css')
.pipe(gulp.dest('dist/css'));//dist下面会自动创建css文件
});
安装gulp插件执行代码 npm i gulp-cli -g gulp+任务的名称执行任务
3.8 Gulp插件
●gulp-htmlmin ：html文件压缩
●gulp-csso ：压缩css
●gulp-babel ：JavaScript语法转化
●gulp-less: less语法转化
●gulp-uglify ：压缩混淆JavaScript
●gulp-file-include 公共文件包含
●browsersync 浏览器实时同步
Gulp中插件的使用 第一步:下载插件 第二步:引入插件 第三步:调用插件
html任务
// html任务
// 1.html文件中代码的压缩操作 gulp-htmlmin
// 2.抽取html文件中的公共代码 gulp-file-include
// 引用gulp模块
const gulp =require('gulp');
const htmlmin =require('gulp-htmlmin')
const fileinclude =require('gulp-file-include')
gulp.task('htmlmin', () => {
gulp.src('./src/*.html')//所有的html文件
.pipe(fileinclude())//抽取html文件中的公共代码
// 压缩html文件中的代码
.pipe(htmlmin({ collapseWhitespace: true }))
.pipe(gulp.dest('dist'));
});
然后在article.html中删除头部框架 在相应的位置加上@@include('./common/header.html'),会发现下面被压缩的代码中有头部框架
css任务
// 引用gulp模块
const gulp =require('gulp');
const less =require('gulp-less');
const csso =require('gulp-csso');
// css任务
// 1.less语法转换 gulp-less
// 2.css代码压缩 gulp-csso
gulp.task('cssmin', () => {
// 选择css目录下的所有less文件以及css文件
gulp.src(['./src/css/*.less', './src/css/*.css'])
// 将less语法转换为css语法
.pipe(less())
// 将css代码进行压缩
.pipe(csso())
// 将处理的结果进行输出
.pipe(gulp.dest('dist/css'))
});
js任务
安装带@的包需要加""
// 引用gulp模块
const gulp =require('gulp');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
// js任务
// 1.es6代码转换 npm install gulp-babel "@babel/core" "@babel/preset-env"
// 2.代码压缩 gulp-uglify
gulp.task('jsmin', () => {
gulp.src('./src/js/*.js')
.pipe(babel({
// 它可以判断当前代码的运行环境 将代码转换为当前运行环境所支持的代码
presets: ['@babel/env']
}))
.pipe(uglify())
.pipe(gulp.dest('dist/js'))
});
复制文件夹
// 引用gulp模块
const gulp =require('gulp');
// 复制文件夹
gulp.task('copy', () => {
gulp.src('./src/images/*')
.pipe(gulp.dest('dist/images'));
gulp.src('./src/lib/*')
.pipe(gulp.dest('dist/lib'))
});
4. package.json文件
4.1 node_modules文件夹的问题
1.文件夹以及文件过多过碎，当我们将项目整体拷贝给别人的时候,传输速度会很慢很慢. 我们不需要将这个文件夹拷贝给别人 只需npm install 它会根据package.json记录的第三方库来进行下载
2.复杂的模块依赖关系需要被记录，确保模块的版本和当前保持一致，否则会导致当前项目运行报错
4.2 package.json文件的作用
项目描述文件，记录了当前项目信息，例如项目名称、版本、作者、github地址、当前项目依赖了哪些第三方模块等。
使用npm init -y命令生成package.json。
package.json中scripts的作用:
在scripts选项中存储的是命令的别名,当我们频繁执行的命令比较长时,就可以给它起一个别名,然后npm run 别名 运行
4.3 项目依赖和开发依赖
在项目的开发阶段和线上运营阶段，都需要依赖的第三方包，称为项目依赖（生产环境依赖）。使用npm install 包名 命令下载的文件会默认被添加到 package.json 文件的 dependencies 字段中,项目必要的组件，状态管理，路由管理等就放在项目依赖里面，如 vue ,react 等(生产环境和开发环境都需要)。
在项目的开发阶段需要依赖，线上运营阶段不需要依赖的第三方包，称为开发依赖。使用npm install 包名 --save-dev(或-D)命令将包添加到package.json文件的devDependencies字段中，渲染，样式转换等可以只放在开发依赖里面，例如 gulp ，babel，webpack 一般都是辅助工具代码检测
package.json的dependencies对应生产环境依赖，devdependencies是开发环境依赖
4.4 package-lock.json文件的作用
●锁定包的版本，确保再次下载时不会因为包版本不同而产生问题
●加快下载速度，因为该文件中已经记录了项目所依赖第三方包的树状结构和包的下载地址，重新安装时只需下载即可，不需要做额外的工作
5. Node.js中模块加载机制
5.1 模块查找规则-当模块拥有路径但没有后缀时
require('./find.js');
require('./find');
1.require方法根据模块路径查找模块，如果是完整路径，直接引入模块。
2.如果模块后缀省略，先找同名JS文件再找同名JS文件夹
3.如果找到了同名文件夹，找文件夹中的index.js
4.如果文件夹中没有index.js就会去当前文件夹中的package.json文件中查找main选项中的入口文件
5.如果找指定的入口文件不存在或者没有指定入口文件就会报错，模块没有被找到
5.2 模块查找规则-当模块没有路径且没有后缀时
require('find');
1.Node.js会假设它是系统模块
2.Node.js会去node_modules文件夹中
3.首先看是否有该名字的JS文件
4.再看是否有该名字的文件夹
5.如果是文件夹看里面是否有index.js
6.如果没有index.js查看该文件夹中的package.json中的main选项确定模块入口文件
7.否则找不到报错
1844
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
