模块加载及包

Node.js模块化开发

1.1JavaScript开发弊端

JavaScript在使用时存在俩大问题,文件依赖和命名冲突。

1.2 软件中的模块化开发

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

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

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

1.4 模块成员导出
//a.js
const add = (n1, n2) => n1 + n2;
exports.add = add;
1.5 模块成员导入
//b.js
// const a = require('./a.js')
//导入模块时后缀可以省略
const a = require('./a')
console.log(a.add(10, 20));
1.6 模块成员导出的另一种方式
//a.js
const greeting = name => `hello ${name}`;
module.exports.greeting = greeting;
//b.js
const a = require('./a')
console.log(a.greeting('张三'));

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

Node.js系统模块

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('./b.js', 'utf8', (err, doc) => {
    //如果文件读取出错err是一个对象包含错误信息
    //如果文件读取正确 err是null
    //doc 是文件读取的结果
    console.log(err);
    console.log(doc);
});

写入文件内容

//语法
//fs.writeFile('文件路径/文件名称'.'数据',callback);
//实例
const fs = require('fs');
fs.writeFile('./demo.txt', '即将要写入的内容', err => {
    if (err != null) {
        console.log(err);
        return;
    }
    console.log('文件内容写入成功');
})

系统模块

系统模块path路径操作

为什么要进行路径拼接
● 不同操作系统的路径分隔符不同意
● /public/uploads/avatar
● Windows上是\ /
● Linux上是 /
路径拼接语法

path.join('路径','路径',...)
//导入path模块
const path = require('path');
//路径拼接
const finalPath = path.join('public', 'uploads', 'avatar');
console.log(finalPath);
//输出结果public\uploads\avatar

相对路径vs绝对路径
● 大多数情况下使用绝对路径,因为相对路径由时候相对的是命令行工具的当前工作目录。
● 在读取文件或者设置文件路径时都会选择绝对路径。
● 使用__dirname获取当前文件所在的绝对路径

const fs = require('fs');
const path = require('path');
console.log(__dirname);
console.log(path.join(__dirname, 'b.js'));
fs.readFile(path.join(__dirname, 'b.js'), 'utf8', (err, doc) => {
    console.log(err);
    console.log(doc);
})

第三方模块

1.1什么是第三方模块

被人写好的,具有特定功能的、能直接使用的模块即第三方模块,由于第三方模块通常都是由多个文件组成并且被防止再一个文件夹中,所以又名包。
第三方模块有俩种存在形式:
● 以js文件的形式存在,提供实现项目具体功能的API接口。
● 以命令行工具形式存在,辅助项目开发。
获取第三方模块
npmjs.com:第三方模块的存储和分发仓库
获取第三方模块
npm:node的第三方模块管理工具
● 下载:npm install 模块名称
npm install formidable
● 卸载:npm uninstall package 模块名称
npm uninstall formidable
全局安装与本地安装
● 命令行工具:全局安装
● 库文件:本地安装
第三方模块 nodemon
nodemon是一个命令行工具,用以辅助项目开发。
在Node.js中,每次修改文件都要在命令行工具中重新执行改文件,非常繁琐
使用步骤
1、使用npm install nodemon -g下载
2、在命令行工具中用nodemon命令替代node命令执行文件
3、Ctrl+c进行终止
第三方模块nrm
nrm:npm下载地址切换工具
使用步骤:
1、使用npm install nrm -g下载
2、查询可用下载地址列表 nrm ls
3、切换npm下载地址nrm use taobao
第三方模块Gulp
基于node平台开发的前端构建工具
将机械化操作编写成任务,想要执行机械化操作时执行一个命令行命令任务就能自动执行
用机器代替手工,提高开发效率
Gulp能做什么
● 项目上线,HTML、CSS、JS文件压缩合并
● 语法转换(es6、less)
● 公共文件抽离
● 修改文件浏览器自动刷新
Gulp使用
1、使用npm install gulp下载gulp库文件
2、在项目根目录下建立gulpfile.js文件
3、重构项目的文件夹结构src目录放置源代码文件dist目录放置构建后文件
4、在gulpfile.js文件中编写任务
5、在命令行工具中执行gulp任务
Gulp中提供的方法
● gulp.src():获取任务要处理的文件
● gulp.dest():输出文件
● gulp.task():建立gulp任务
● gulp.watch():监控文件的变化

//引用gulp模块
const gulp = require('gulp');
//使用gulp.task建立任务
//1、任务的名称
//2、任务的回调函数
gulp.task('first', () => {
    console.log('我们人生中的第一个gulp任务执行了');
    //使用gulp.src获取要处理的文件
    // gulp.src('.src/css/base/css')
    //     .pipe(gulp.dest('dist/css'))

});

命令行:
1、npm install gulp-cli -g //全局安装gulp
2、gulp first //执行
Gulp插件
● gulp-htmlmin:html文件压缩
安装命令:npm install gulp-htmlmin
执行命令:gulp htmlmin
● gulp-csso:压缩css
● gulp-babel:JavaScript语法转化
● gulp-less:less语法转化
● gulp-uglify:压缩混淆JavaScript
● gulp-file-include公共文件包含
● browsersync浏览器实时同步

//引用gulp模块
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')
    //使用gulp.task建立任务
    //1、任务的名称
    //2、任务的回调函数
gulp.task('first', () => {
    console.log('我们人生中的第一个gulp任务执行了');
    //使用gulp.src获取要处理的文件
    gulp.src('.src/css/base/css')
        .pipe(gulp.dest('dist/css'))

});
//html任务
//1、html文件中代码的压缩操作
// 抽取html文件中的公共代码
gulp.task('htmlmin', () => {
    gulp.src('./src/*.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(gulp.dest('dist/css'))
        //将处理的结果进行输出
        .pipe(gulp.dest('dist/css'))
});
// js任务
// es6代码转换
// 代码压缩
gulp.task('jsmin', () => {
    gulp.src('./src/js/*.js')
        .pipe(bable({
            //可以判断当前代码的运行环境 将代码转换为当前运行环境所支持的代码
            press: ['@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'))
});
//构建任务  让以上文件同时执行
gulp.task('default', ['htmlmin', 'cssmin', 'jsmin', 'copy']);
//同时执行命令:gulp default 或gulp

package.json文件

package.jon文件的作用
项目描述文件,记录了当前项目信息,例如项目名称、版本、作者、GitHub地址、当前项目依赖了那些第三方模块等。
使用npm init-y命令生成。
使用npm install 进行下载
执行命令:npm install formidable mime
使用npm install进行同步
开发依赖
● 在项目的开发阶段需要依赖,线上运营阶段不需要依赖的第三方包,称为开发依赖
● 使用npm install包名–save–dev命令将包添加到package.json文件的devDependencies字段中
命令:
下载:npm install gulp --save–dev
package-lock.json文件的作用
● 锁定包的版本,确保再次下载时不会因为包版本不同而产生问题
● 加速下载速度,因为该文件中已经记录了项目所依赖第三方包的树状结构和包的下载地址,重新安装时只需下载即可,不需要做额外的工作

Node.js中模块加载机制

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

require('./find.js')
require('./find')

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

require('find')

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值