持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情 ​

今天主要学习node.js的一些基础知识

模块化开发

它能解决JavaScript的弊端，JavaScript在使用的时候存在两大问题，文件依赖和命名冲突

文件依赖举例来说，你想要引用一个js文件，但发现没效果，一顿分析后发现，这个js文件又引了另一个js文件，以此继续套娃。过程太繁琐了，会有想辞职的冲动！

命名冲突会导致代码覆盖的问题。、

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

模块化开发规范

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

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

举个加法的例子：

创建一个A模块（a.js）

这里先定义了一个加法，通过exports.属性名=属性值 进行导出

const add =(a,b)=>a+b;
exports.add=add; 

创建B模块（b.js）用require方法对依赖模块进行导入，tips:这里文件后缀是可以省略的

const a=require('./a')
console.log(a.add(10,20));

导出还有另一种方式

//a.js
const app = fuck => `Hello ${fuck}`;//此处看不懂就去学es6，`${xxx}`是模板字符串
module.exports.app=app

const app=require('./a');

console.log(app.app('dongson'));
//b.js

exports和module.exports看似没有区别但实际上module.exports是可以重新赋值而exports不能重新赋值，此时输出会变成{name:'HandsomeRider},exports和module.exports指向不同对象，无论如何都以module.exports为准。

const app = fuck => `Hello ${fuck}`;
module.exports.app={
  name:'HandsomeRider!'
}

系统模块

系统模块就是Node运行环境提供的API，因为这些API都是以模块化的方式进行开发的，也可称Node运行环境提供的API为系统模块

系统模块fs文件操作

f:file文件，s:system系统，文件操作系统

引用方式

const fs =require('fs')

读取文件内容

fs.readFile('文件路径/名称‘,‘文件编码’,(callback)={}

示例

const fs=require('fs');
fs.readFile('./input.txt','utf8',(err,doc)=>{
  if(err==null){ 
    console.log(doc);
  }
})

写入文件内容

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

fs.writeFile('./fuck.txt','没事写我干啥！',err =>{
  if(err!=null){
    console.log(err);
    return
  }
  console.log('ok');
})

系统模块path路径操作

path模块是针对硬盘路径进行操作

这里主要是路径拼接api

为什么要进行路径拼接？

原因在于不同操作系统的路径分隔符不统一

举例来说：/public/uploads/aa

WIndow上可以采用\ /

Linux上是/

路径拼接语法

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

const path = require('path');
const finalpath=path.join('public','uploads','aa');
console.log(finalpath);
//我用的是Windows系统所以输出结果是：public\uploads\aa

相对路径和绝对路径

大多数情况下使用绝对路径，因为相对路径有时候相对的是命令行工具的当前工作目录

在读取文件或者设置文件路径时都会选择绝对路径

使用__dirname获取当前文件绝对路径

tips:如果文件读取失败err是个对象，成功是null

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

但命令行当前工作目录和文件所在的工作目录不在一起时

​编辑

 会报错

怎么解决勒？

答案很明显用路径拼接,用__dirname获取绝对路径在进行拼接，

const fs =require('fs');
const path =require('path');
console.log(__dirname);
console.log(__dirname,'a.js');
fs.readFile(path.join(__dirname,'a.js'),'utf8',(err,doc)=>{
  console.log(err);
  console.log(doc);
})
//结果是C:\Users\Administrator\Desktop\student
//C:\Users\Administrator\Desktop\student a.js
//null
//const app = fuck => `Hello ${fuck}`;
//module.exports.app={
//  name:'HandsomeRider!'
//}

总的来说，当前命令行工作目录不会影响读取文件的目录，一般来绝对路径是比较安全的

细心的人其实会发现require用的是相对路径，但它比较特殊，require方法的相对路径，相对的就是当前文件。

第三方模块nodemon

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

在Node.js中，每次修改文件都要在命令行工具中重新执行该文件，很麻烦！

nodemon解决了这个问题，它会检测代码更改自动重启

要取消操作时，输入ctl+c

使用步骤

1.使用npm install nodemon-g下载 这里的-g是全局就是global

2.在命令行工具用nodemon命令替代node

第三方模块nrm

nrm:npm下载地址切换工具

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

使用步骤

1.使用npm install nrm -g下载

2.查询可用下载地址列表nrm ls

3.切换npm下载地址nrm use 下载地址名称

第三方模块Gulp

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

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

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

Gulp能做什么

项目上线，HTML、CSS、JS文件压缩合并重命名

语法转换(es6,less...)

公共文件抽离

修改文件浏览器自动刷新

Gulp使用

1.使用npm install gulp下载gulp库文件（注意当前要下载gulp库文件，因为库文件都是本地安装，只有当前项目可用，所以不需要加-g）

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.src获取要处理的文件
  gulp.src('./src/css/base.css')
//将处理后的文件输出到dist目录
  .pipe(gulp.dest('dist/css'));
});
//pipe本身有管道的意思，但在当前代码中它代表处理的意思，需要将处理的代码放进pipe中

怎么运行gulp文件呢？

 首先要安装npm install gulp-cli -g

安装成功后，通过gulp 任务名即可运行

Gulp坑点注意！！！！

这里我在运行代码的时候，报了这两个错误，因为不影响结果，我就忽略了，但是在我执行全部任务时问题出现了，无法执行全部任务

The following tasks did not complete

Did you forget to signal async completion?

原因是

因为任务可能包含异步代码，所以必须在任务完成执行时发出信号（“异步完成”）。
在“Gulp3.x”中，你可以不做这个就离开。如果您没有显式地发出异步完成的信号，那么Gulp只会假定您的任务是同步的，并且一旦您的任务函数返回，它就完成了。Gulp4.x在这方面更严格。你必须明确地发出任务完成的信号。

解决的方法是：
调用回调函数

​编辑

Gulp插件

gulp-htmlmin:html文件压缩

gulp-csso:压缩css

gulp-babel:JavaScript语法转化

gulp-uglify:less语法转化

gulp-file-include公共文件包含

browsersync浏览器实时同步

gulp-htmlmin

npm install --save gulp-htmlmin

//html任务
//1.html文件中代码的压缩操作 
//2.抽取html文件中的公共代码
//下载插件npm install gulp-htmlmin
//const htmlmin=require('gulp-htmlmin');
const fileinclude=require('gulp-file-include');
gulp.task('htmlmin',()=>{
  gulp.src('./src/*.html')
  .pipe(fileinclude())
  //压缩html文件中的代码
      .pipe(htmlmin({collapseWhitespace:true}))
      .pipe(gulp.dest('dist'));
});

gulp-csso

npm install gulp-less

转换代码

//gulpfile.js
//css任务
//1.less语法转换
//2.css代码压缩
gulp.task('cssmin',()=>{
  gulp.src('./src/css/*.less')
  .pipe(less())
  .pipe(gulp.dest('dist/css'))
})
//a.less
//写上以下代码
.headers{
  width:100px;
  .logo{
    height:200px;
    background-color: red;
  }
}

npm install gulp-csso

css代码压缩

//css任务
//1.less语法转换
//2.css代码压缩
const csso =require('gulp-csso');
gulp.task('cssmin',()=>{
  gulp.src(['./src/css/*.less','./src/css/*.css'])
  //将less语法转换为css语法
  .pipe(less())
  //将处理结果进行输出
  .pipe(csso())
  .pipe(gulp.dest('dist/css'))
})

gulp-babel

npm install --save-dev gulp-babel @babel/core @babel/preset-env

gulp-uglify

npm install --save-dev gulp-uglify

//js任务
//1.es6代码转换
//2.代码压缩
gulp.task('jsmin',()=>{
  gulp.src('./src/js/*.js')
    .pipe(babel({
      //它可以判断当前代码的运行环境，将代码转换为当前运行环境所支持的代码
      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'))
})

执行全部任务

​编辑

package.json文件

node_modules文件夹的问题

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

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

package,json文件的作用

项目描述文件，记录了当前项目信息，例如项目名称、版本、作者、github地址、当前项目依赖了哪些第三方模块等。使用npm init -y命令生成

项目依赖

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

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

开发依赖

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

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

项目依赖和开发依赖进行区分的好处在于可以让我们在不同运行环境下，下载不同的依赖

npm install会下载全部依赖

如果你只想要项目运行依赖是可以使用npm install --production

package-lock.json文件的作用

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

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

packpage.json文件中别名的作用

当我们要执行的命令比较长的时候，就可以把长命令写在package.json的scripts中

​编辑

\

​