02 node.js模块化开发

1. Node.js模块化开发

1.1 js开发弊端

js在使用中存在两大问题，文件依赖和命名冲突

1.2 软件中的模块化开发

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

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

Node.js规定一个js文件就是一个模块，模块内部定义的变量和函数默认情况下载外部无法得到

模块内部可以使用exports对象进行成员导出，使用require导入其他模块

1.4 模块成员导出

B模块使用A模块加法函数

A模块

const add = (n1, n2) => n1 + n2

// 导出
exports.add = add

B模块

// 导入A模块
a = require('./03module-a')

console.log(a);

console.log(a.add(10, 20));

以上皆是js文件，导入模块时文件后缀可以去掉

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

A模块

const greeting = name => `hello ${name}`
module.exports.greeting = greeting

B模块

const a = require('./05module.exports')
console.log(a.greeting('水井'));

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

1.6 模块导出两种方式的联系与区别

exports

module.exports

都指向同一片空间
当exports对象与module.exports 对象指向不是同一个对象时
module.exports为准

A模块

const greeting = name => `hello ${name}`
const x = 100
exports.x = x
module.exports.greeting = greeting
// 当exports对象与module.exports 对象指向不是同一个对象时
// module.exports为准
module.exports = {
    name: 'shuijin'
}
exports = {
    ages: 20
}

B模块

const a = require('./05module.exports')

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

})

写入文件内容

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

演示读取内容

// 1.通过模块的名字fs对模块进行引用
const fs = require('fs')

fs.writeFile('./demo.txt', "被写入的内容", err => {
        if (err != null) {
            console.log(err);
            return
        }
        console.log('写入成功');

    }) // 没有这个文件就会创建

2.3 系统模块path 路径操作##

为什么要进行路径拼接

不同操作系统的路径分隔符不统一
/public/uploads/avatar
windows上是 \ /
linux上是 /

2.4 路径拼接语法

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

演示

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

2.5 相对路径vs绝对路径

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

演示

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

// fs.readFile('./01helloworld.js', 'utf8', (err, doc) => {
//     console.log(err);
//     console.log(doc);
// })
console.log(__dirname);
console.log(path.join(__dirname, '01helloworld.js'));

// 拼接后的
fs.readFile(path.join(__dirname, '01helloworld.js'), 'utf8', (err, doc) => {
    console.log(err);
    console.log(doc);

})

3.第三方模块

3.1 什么是第三方模块

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

第三方模块有两种存在形式

1.以js文件的形式存在，提供实现项目具体功能的API接口

2.以命令行根据形式存在，辅助项目开发

3.2 获取第三方模块

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

下载：npm install 模块名称
卸载：npm unintall package 模块名称

本地安装与全局安装

命令行工具：全局安装
库文件:本地安装

3.3 第三方模块 nodemon

nodemon是一个命令行工具，用以辅助项目开发。

在Node.js中，每次修改文件都要在命令行工具中重新执行该文件，非常繁琐。

使用npm install -g nodemon 下载它
在命令行工具中用nodemon命令替代node命令执行文件（被执行文件如果更新了会自动再次调用）

如果遇到了以下提示信息 nodemon : 无法加载文件

用管理员权限打开powershell

输入 set-ExecutionPolicy RemoteSigned 选择 Y or A

3.4 第三方模块nrm

nrm ( npm registry manager )：npm下载地址切换工具

npm默认的下载地址在国外，国内下载速度慢

使用npm install nrm –g 下载它
查询可用下载地址列表 nrm ls
切换npm下载地址 nrm use 下载地址名称

3.5 Gulp 前端构建工具

基于node平台开发的前端构建工具

将机械化操作编写成任务, 想要执行机械化操作时执行一个命令行命令任务就能自动执行了

用机器代替手工，提高开发效率。

3.6 Gulp能做什么

项目上线，HTML、CSS、JS文件压缩合并
语法转换（ES6、less）
公共文件抽离
修改文件，浏览器自动刷新

3.7 Gulp 使用

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

3.8 Gulp中提供的方法

gulp.src()：获取任务要处理的文件

gulp.dest()：输出文件

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

执行 gulp 函数名

3.9 Gulp插件

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

构建gulp任务

// 引用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');
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/css/base.css')

    // 将处理后的文件输出到dist目录
    .pipe(gulp.dest('dist/css'))
})

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


})

// css任务
// 1. css文件中代码压缩操作
// 2. less语法转换
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任务
// 1.es6代码转换
// 2.代码压缩
gulp.task('jsmin', () => {
    gulp.src(['./src/js/*.js'])
        .pipe(babel({
            // @babel/env  判断当前代码运行环境，将代码转换为运行环境所支持的代码
            presets: ['@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'])

遇到报错

name: 'AssertionError [ERR_ASSERTION]',
code: 'ERR_ASSERTION',

版本问题 4.后的版本不太稳定

解决办法卸载gulp 安装

npm uninstall  gulp  

npm install gulp@3.9.1

运行 gulp default 成功

4.package.json文件

4.1 node_modules文件夹的问题

文件夹以及文件过多过碎，当我们将项目整体拷贝给别人的时候,，传输速度会很慢很慢.

复杂的模块依赖关系需要被记录，确保模块的版本和当前保持一致，否则会导致当前项目运行报错

4.2 package.json文件的作用

项目描述文件，记录了当前项目信息，例如项目名称、版本、作者、github地址、当前项目依赖了哪些第三方模块等。

使用npm init -y命令生成。

{
  "name": "description",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
// 安装的包
  "dependencies": {
    "formidable": "^1.2.2",
    "mime": "^2.4.6"
  }
}

node_modules过大的时候传输给别人只需要一个package.json
运行命令 npm install 会根据package.json 下载需要的包

npm install 会把项目依赖以及开发依赖都下载下来

4.3 项目依赖

这个命令专门下载package.json记录的项目依赖包

npm install --production

在项目的开发阶段和线上运营阶段，都需要依赖的第三方包，称为项目依赖

使用npm install 包名命令下载的文件会默认被添加到 package.json 文件的 dependencies 字段中

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

4.4 开发依赖

在项目的开发阶段需要依赖，线上运营阶段不需要依赖的第三方包，称为开发依赖

使用npm install 包名 --save-dev命令将包添加到package.json文件的devDependencies字段中

4.5 package-lock.json 文件

锁定包的版本，确保再次下载时不会因为包版本不同而产生问题

加快下载速度，因为该文件中已经记录了项目所依赖第三方包的树状结构和包的下载地址，重新安装时只需下载即可，不需要做额外的工作

5. Node.js中模块的加载机制

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

require('./find.js');

require('./find');

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

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

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

posted @ 2020-06-11 15:56 xujing123 阅读(169) 评论(0) 编辑收藏举报

刷新页面返回顶部

xujing123

很多文章我都更新在语雀了 https://www.yuque.com/changan-zrbx2