你总得懂点 Node.js

小小霜
969 阅读7分钟

这是我参与11月更文挑战的第10天，活动详情查看：2021最后一次更文挑战

node 概念

node 是基于 Chrome V8 引擎的 JavaScript 代码运行环境，全局对象是 globle，在 node 环境下使用 node 命令执行后缀为.js 的文件即可

模块化开发

javasript 使用存在文件依赖和命名冲突的问题，因而要使用模块化开发，模块化开发的含义是一个功能就是一个模块多个模块可以组成完整的应用，抽离一个模块不会影响其他模块的运行。node.js 规定一个 JavaScript 就是一个模块，模块内部定义的变量和函数外部无法得到，需要使用 exports 对象进行成员导出，require 方法导入其他模块。

模块的导入导出

导出

  • exports
  • module.exports 两者之间的关系: module.exports 是真正的接口 exports 是一个辅助工具 如果 module.exports 为空，那么所有的 exports 属性和方法都赋值 module.exports 如果 module.exports 具有任何方法和属性，则 exports 会被忽略

导入

  • require

模块

  • 核心模块:node 自带的模块加载速度快

http 模块

url 模块

  • parse 获取地址信息
  • resolve 追加或替换地址
  • formal 根据地址信息获得原 url 信息

fs 文件管理

  • fs.stats 检测是文件还是文档

    • isDirctory() 是否文档
    • isFile() 是否文件

  • fs.mkdir 创建文档

  • fs.writeFile 创建写入文件

  • fs.appendFile 追加文件

  • fs.readdFile 读取文件

  • fs.readdir 读取文档

  • fs.rename 重命名或者剪切

  • fs.rmdir 删除文档

  • fs.unlink 删除文件

  • fs.createReadStream 读取流

    • on 读取

  • fs.createWriteStream 写入流

    • write 写入
    • end 写完
    • on 完成

path 模块

  • path join() 拼接模块
  • __dirname 当前文件的绝对路径

文件模块

用户自己编写的模块，动态加载运行速度相对较慢

模块的加载机制

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

常用的第三方包

第三方模块：别人已经写好的，具有特定功能的，我们可以下载直接使用的模块，通常是有多个文件组合在一起放置自在一个文件夹中，又名包。 有两种存在形式，以 js 文件的形式存在，提供项目具体的 api 接口。 以命令行工具存在，辅助项目开发。 npmjs.com 第三方模块存储和分发厂库

npm：node 的第三方模块管理工具

下载：npm install/i 模块名 卸载：npm uninstall package 模块名 命令行工具：全局安装-g 可在计算机任何一个地方使用它 库文件：本地安装

nodemon：命令行工具辅助项目开发

下载：npm install -g nodemon 命令行工具用 nodemon 命令替代 node 命令执行文件 自动监听文件是否更新，如果更新就自动执行。

nrm ：下载地址切换工具

下载：npm install nrm -g 查询下载地址：nrm ls 切换下载地址：nrm use 下载地址名 一般都是用淘宝镜像来安装 npm install -g cnpm --registry=registry.npm.taobao.org

Glup ：基于 node 的前端构建工具

作用：将机械化的操作编写成任务，想要执行这些任务时，可以用一个命令任务就自动执行了，提高开发效率。 具体应用：项目上线，HTML CSS JS 文件的压缩合并。 语法转换 es6 less 之类的 公共文件抽离 修改文件浏览器自动刷新 使用：npm install gulp 下载 gulp 库文件，在项目根目录下建立 gulpfile.js 文件，用 src 目录放置源文件，dist 目录放置构建后文件，在 gulpfile.js 文件中编写任务，在命令行工具执行 gulp 任务

const gulp = require('gulp');
//  复制文件夹
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 中提供的方法
  • gulp.src():获取任务要处理的文件
  • gulp.dest() 输出文件
  • gulp.task() 建立 gulp 任务
  • gulp.watach() 监控文件的变化
  • .pope() 放置要处理的文件
gulp 插件

插件网址：www.npmjs.com 插件用法：下载 如：npm install gulp-htmlmin 引用：如：require gulp-htmlmin 调用:npm install gulp-cil -g  安装 gulp 的命令行工具 在文件名为.glupfile.js 里面编写任务，相同路径下建立 src 文件夹存放源文件，在 dist 目录下存放修改后的文件

gulp-htmlmin html 文件的压缩

gulp-file-include 公共文件包含 先把公共部分提取到一个单独的文件里，再把需要引入公共部分的地方写上 @@include ('公共文件的路径') gulp-csso 压缩 css

const less = require('gulp-less');
const csso = require('gulp-csso');
// css 任务
// 1.less 语法转换
// 2.css 代码压缩
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'))
});

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

gulp-file-include 公共文件包含 先把公共部分提取到一个单独的文件里，再把需要引入公共部分的地方写上 @@include ('公共文件的路径') gulp-csso 压缩 css

const less = require('gulp-less');
const csso = require('gulp-csso');
// css 任务
// 1.less 语法转换
// 2.css 代码压缩
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'))
});

gullp-less less 语法转换 gulp-bable js 语法转换

const babel = require('gulp-babel');
const uglify = require('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-uglify 压缩混淆 js browsersync 浏览器实时同步

gullp-less less 语法转换 gulp-bable js 语法转换

const babel = require('gulp-babel');
const uglify = require('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-uglify 压缩混淆 js browsersync 浏览器实时同步

package.json 文件

作用：项目描述文件，记录当前项目信息，可使用 npm init -yes/y 命令生成。

node_modules 文件夹的问题

Node 规范将模块文件都放在 node_modules 这个目录 但是如果文件夹和文件过多过碎，我们要把整体文件夹拷贝给别人的时候传输速度会很慢。 复杂的模块依赖关系需要被记录，确保模块的版本和当前保持一致以免运行报错。

项目依赖

项目开发和运营上线都需要依赖的第三方包，使用 npm install 包名下载的文件会默认添加到 package.js 文件的 dependencies 字段中

  • dependencies: npm install 下载

开发依赖

项目开发阶段需要的依赖，线上运营不需要的第三方包，称为开发依赖 使用 npm install 包名 --save-dev/-D 命令将包添加到 devDependencies 字段中

  • devDependencies: npm install --production 下载

package-lock.js 文件的作用

锁定包的版本，确保再次下载时不会因为包版本不同而产生问题 加快下载速度，因为该文件中已经记录了项目所依赖第三方包的树状结构和包的下载地址，重新安装时只需下载即可，不需要做额外的工作

CommonJS

commonJS 是为 js 的表现制定规范，因为 js 没有模块化系统，标准库较少，缺乏包管理工具，CommonJS 应运而生，它希望 js 可以在任何地方运行而不只是浏览器中，从而达到一些后端语言具有开发大型应用的能力。 commonJS 与 Node.js 的关系：CommonJS 时模块化的标准，Node.js 是 CommonJS（模块化）的实现

CommonJS 应用

  • 服务器端 js 的应用程序 Node.js
  • 命令行工具
  • 桌面图形应用程序
avatar
文章
阅读
粉丝