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:浏览器实时同步

你可能感兴趣的:(Node.js模块化开发)