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:浏览器实时同步
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,482评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,377评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,762评论 0 342
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,273评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,289评论 5 373
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,046评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,351评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,988评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,476评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,948评论 2 324
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,064评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,712评论 4 323
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,261评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,264评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,486评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,511评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,802评论 2 345

推荐阅读更多精彩内容