初识Node和模块化

admin管理员组

文章数量:1655803

课程介绍

• HTML + CSS （做网页）
• JS基础 （JS基础语法、变量、数据类型、函数、流程控制、运算符…）
• WebAPIs（使得JavaScript有能力操作页面元素）
• JS高级（了解原型、各种内置方法、箭头函数、解构赋值…）
• Ajax（能够发送请求，和服务器有交互、Promise异步处理、事件循环）
• Git（难学，首次使用终端窗口，代码版本记录、多人协作工具）
• 数据可视化（对Ajax知识的综合应用，echarts图表，增强编程能力）
• 项目前置课（查漏补缺的课，散乱的知识点比较多，对项目做准备）
  • 第1天：初识Node（了解Node是什么？能够干什么？简单的用一下；）
  • 第2天：包管理器（npm 、yarn）
  • 第3天：ES6模块化、webpack
    

终端软件

介绍

可以执行命令的窗口，叫做终端软件
作为程序员，开发时，都会大量使用命令（计算机系统相关命令，Git相关命令、Node命令等等）
所以，就必须了解终端软件的使用。而且，系统不同，终端软件也不同

已经用过的终端软件

安装Git之后，鼠标右键，打开 “Git Bash Here”，打开的这个黑窗口就是一个终端软件。
在里面可以执行Git命令，（建议大家在这个窗口中，只写Git命令）

系统内置终端软件

• Windows
  • cmd
    • 在文件夹地址栏的位置，输入cmd，回车即可打开
  • powershell
    • 在文件夹空白处，按住Shift，鼠标右键，选择“在此处打开powershell窗口”
• Mac
  • 终端（建议安装 超级右键Lite）+ oh my zsh（终端美化工具）
  • 也可以选择安装 hyper 或者 iterm2 这样的终端软件。

这些终端软件中，也可以执行我们学习过的Git命令。

vscode中的终端（可选）

vscode中的终端，使用的也是系统内置的终端。没什么新鲜的，只不过把界面集成到了vscode中而已。

• 点击vscode菜单栏（最上面一栏）中的“终端”，即可新建一个终端窗口。（不建议）
• 或者在侧边栏的文件上，鼠标右键，新建终端（建议）
• 或者按快捷键 Ctrl + ~ 打开关闭终端（建议）

喜欢就用，不喜欢就算了。

cd命令

作为前端开发者，最常用的系统命令就是 cd 命令

• c 是 change 的意思，切换的意思
• d 是 directory 的意思，目录的意思

所以 cd 命令的作用是切换终端中的路径

• cd / 切换到根目录
• cd .. 切换到上层目录 （重点）
• cd xxx 切换到 xxx 目录 （重点）
  

终端使用技巧

• 按 ↑ 找到曾经执行过的命令。按 ↓ 相反。
• 按 ESC 清除当前一行
• 按 tab 键，可以自动补全命令。
• clear命令用于清屏。（cmd中使用cls命令清屏）
  

回看浏览器中的JS

浏览器中的JavaScript的组成部分

• 
  

为什么JavaScript 可以在浏览器中被执行

浏览器内核

• 浏览器内核 包括 CSS解析引擎，包括 JS解析引擎
• 目前，JS解析引擎基本上从内核中独立出来了
• 所以，平时所说的浏览器内核一般和CSS有关系
• 浏览器内置js解析引擎

不同的浏览器使用不同的 JavaScript 解析引擎:

• Chrome 浏览器 => V8
• Firefox 浏览器=> OdinMonkey(奥丁猴)
• Safri 浏览器=> JSCore
• IE 浏览器=> Chakra(查克拉)
• etc…

其中，Chrome 浏览器的 V8 解析引擎性能最好!

浏览器中的 JavaScript 运行环境

• 运行环境指的是代码正常运行所需的必要条件。
• V8 引擎负责解析和执行 JavaScript 代码。
• 内置 API 是由运行环境提供的特殊接口，只能在所属的运行环境中被调用。

目前为止，浏览器是我们已知的唯一一个JS的运行环境。
思考：假设有一个软件，它的运行环境中，有API方法提供，也包括 JS 解析引擎，是否也可以执行JS代码呢？

Node.js简介

什么是 Node.js

Node.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine.
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。
通俗的理解：Node.js 为 JavaScript 代码的正常运行，提供的必要的环境。
Node.js 的官网地址: https://nodejs/zh-cn/

Node.js中的JavaScript运行环境

注意：

• 浏览器是 JavaScript 的前端运行环境。（浏览器是客户端安装的软件）
• Node.js 是 JavaScript 的后端运行环境。（正常情况下，Nodejs要安装到服务器上）
• Node.js 中无法调用 DOM 和 BOM 等 浏览器内置 API。

总结起来：

1. Node是JS的另一个运行环境。
2. 在Node环境中，可以运行ECMAScript语法，但不能运行 WebAPI的语法。
   

Node.js可以做什么

Node.js 是一门后端语言，它的出现，使得JavaScript有了做后端开发的能力。
Node.js 作为一个 JavaScript 的运行环境，仅仅提供了基础的功能和 API。
然而，基于 Node.js 提供的这些基础功能，很多强大 的工具和框架如雨后春笋，层出不穷
所以学会了 Node.js ，可以让前端程序员胜任更多的工作和岗位！
具体来说：

• 基于 Express/Koa 框架(http://www.expressjs/)，可以快速构建 Web 应用
• 基于 Electron 框架(https://electronjs/)，可以构建跨平台的桌面应用（vscode就是用node开发的）
• 基于 restify 框架(http://restify/)，可以快速构建 API 接口项目
• 读写和操作数据库、创建实用的命令行工具辅助前端开发
• etc…

总之，Node.js 是大前端时代的“大宝剑”，有了 Node.js 这个超级 buff 的加持，前端程序员的行业竞争力会越来越强！

Node.js环境安装

下载安装

如果希望通过 Node.js 来运行 Javascript 代码，则必须在计算机上安装 Node.js 环境才行。
安装包可以从 Node.js 的官网首页直接下载，进入到 Node.js 的官网首页，点 击绿色的按钮，下载所需的版本后，双击直接安装即可。
进入官网（中文），可以看到如下两个版本：

• LTS 为长期稳定版，对于追求稳定性的企业级项目来说，推荐安装 LTS 版本。
• Current 为新特性尝鲜版，对于热衷于尝试新特性的用户来说，推荐安装 Current 版本的 Node.js。但是，Current 版本 中可能存在隐藏的 Bug 或安全性漏洞，因此不推荐在企业级项目中使用 Current 版本的 Node.js。

建议使用 长期支持版

查看已安装的Node.js的版本号

打开终端（黑窗口，或者蓝窗口），在终端输入命令 node –v 后，按下回车键，即可查看已安装的 Node.js 的版本号。

如果你能够看到版本号，说明你已经安装成功了。

Node环境中运行JS代码

终端窗口运行（了解）

此种方式，类似于浏览器调试工具的“Console”面板，只适合运行少量的测试代码，所以了解即可。
操作步骤：

• 打开任意终端，直接输入 node 命令并回车
• 执行你的JS代码，按回车表示执行
• 按两次“Ctrl+C”退出。
  

使用node命令执行JS文件（掌握）

此种方式，比较常用。可以运行写到 “xx.js” 里面的JS代码，可以运行JS文件中的代码。
操作步骤：

• 打开终端
• 注意终端的路径，注意在此路径中，是否能找到你的js文件。
• 输入 “node 要执行的js文件”回车表示运行
• 执行文件的时候，需要保证 node xxx.js 这种格式
• node只能运行JS代码（也就是不要 node xxx.html）

可能的问题：

• 如果终端中出现 >，按两次“Ctrl+C”退出
• 不能使用node运行html、css等等代码，因为node只是JS的运行环境。
• 不能在node环境中运行WebAPI的代码，比如 document，因为 document是浏览器环境的API。
• JS文件名，不能叫做 node.js，特殊记忆。
  

模块化介绍

什么是模块化

模块化，就是把一个大的文件拆分成若干小文件，而且还能把小文件通过特定的语法组合到一起的实现过程。
比如手机、电脑…等等几乎所有，都是模块化的设计，拿电脑来说，可以把电脑拆分成显示器、键盘、硬盘、内存等一个一个的小模块，当然也能够组装到一起。

优点

模块化的优势：

• 更利于维护（比如电脑屏幕坏了，只换屏幕就可以了；比如想升级显卡，只换显卡就行了）；
• 更好的复用性（比如有一块移动硬盘或U盘，大家都能用）

Node中，规定每个JS文件都是一个小模块。一个项目由许许多多的小模块（JS文件）组合而成。
Node中模块化的优势：

• 更利于维护（比如，项目需要对登录模块升级，则不会影响其他模块）
• 更好的复用性（比如有一个公共的函数，封装起来。其他所有JS文件都能使用这个函数）
  

自定义模块

我们创建的每个JS文件都是一个自定义模块，并且具有模块作用域，也就是在一个模块中创建的变量、常量、函数等等一切，都只能在当前模块中使用。

• 共享（导出/暴露）内容给其他模块用，需要使用 module.exports 导出内容。
• 其他模块，如果需要使用上述模块导出的内容，可以使用 require() 加载

示例：
functions.js – 导出内容

// 这是我的函数库
function aa() {
  console.log(111)
}

function bb() {
  console.log(222)
}

// aa、bb，默认只能在functions.js中使用
// aa、bb，属于当前这个模块
// 如果想把aa、bb给其他模块使用，则需要先”分享”
// 【分享】，也叫做【导出】、或者【暴露】
// 语法：module.exports = 导出的内容
// module.exports = {} // 每个模块，默认导出空对象
module.exports = { aa, bb }

index.js  – 导入内容

// 怎么在这里调用 functions.js 中的函数？？？

// 想使用其他js文件中的函数，需要导入
// 导入的语法，也是一行代码
// 导入的语法：1. 必须带路径，即使是 ./ 也不能省略； 2. 可以省略后缀
let obj = require('./functions')
// console.log(obj)
obj.aa()
obj.bb()

一个模块导出什么，另一个模块加载后，就会得到什么。
就比如，我给你三个苹果，你只能得到三个苹果，不可能得到其他的。

内置模块

内置模块是Node.js 平台自带的一套基本的 API(功能模块)。也叫做核心模块。
下面介绍几个内置模块。
注意，加载内置模块，不能写路径，这是和加载自定义模块不一样的。

path模块

• path 是 Node 本身提供的 API，专门用来处理路径。
• http://nodejs/api/path.html
• 使用
  • 加载模块

// 使用核心模块之前，首先加载核心模块
let path = require('path');
// 或者
const path = require('path');

• 调用path模块中的方法，来处理相应的问题，下面列举path模块中的几个方法
  | 方法 | 作用 |
  | — | — |
  | path.basename(path[, ext]) | 返回 path 的最后一部分(文件名) |
  | path.dirname(path) | 返回目录名 |
  | path.extname(path) | 返回路径中文件的扩展名(包含.) |
  | path.format(pathObject) | 将一个对象格式化为一个路径字符串 |
  | path.join([…paths]) | 拼接路径 |
  | path.parse(path) | 把路径字符串解析成对象的格式 |
  | path.resolve([…paths]) | 基于当前工作目录拼接路径 |

// 我现在要使用官方提供的 path 模块

// 用法一：先加载模块，得到对象；  然后再 ”对象.方法()”
// let path = require('path') // 导入内置模块，直接写模块名
// // console.log(path) //  { resolve: ..., join: ...., basename: ...., extname: ....., ..... }
// console.log(path.join('a', 'b', 'c', 'index.js')) // a/b/c/index.js

// 用法二：先加载模块，得到对象； 直接把需要的方法解构出来；最后直接使用方法即可
let { join } = require('path')
// node官方提供的join方法，作用是拼接几部分路径
// console.log(join('a', 'b', 'c')) // a/b/c
// console.log(join('a', 'b', '../c', 'index.js')) // a/c/index.js

// console.log(__dirname) // node中的一个全局变量，表示当前js文件的绝对路径（不包括文件名部分）

// 拼接一下，得到db.js的绝对路径
console.log(join(__dirname, 'index.js'))
// D:/147-148-金燕龙/项目前置课-01/课堂代码/index.js

这里有用的代码，就一行：
join(__dirname, 'xxx')

fs模块

• fs，即 file system，文件系统，该模块可以实现对 文件、文件夹的操作
• http://nodejs/api/fs.html
• 使用
  • 加载模块

// 引入模块，引入模块的时候，可以使用var、let，但是建议使用const，因为我们不希望它改变
const fs = require('fs');

• 调用fs模块的方法，下面列举fs模块中的常用方法
  | API | 作用 | 备注 |
  | — | — | — |
  | fs.access(path, callback) | 判断路径是否存在 | |
  | fs.appendFile(file, data, callback) | 向文件中追加内容 | |
  | fs.copyFile(src, callback) | 复制文件 | |
  | fs.mkdir(path, callback) | 创建目录 | |
  | fs.readDir(path, callback) | 读取目录列表 | |
  | fs.rename(oldPath, newPath, callback) | 重命名文件/目录 | |
  | fs.rmdir(path, callback) | 删除目录 | 只能删除空目录 |
  | fs.stat(path, callback) | 获取文件/目录信息 | |
  | fs.unlink(path, callback) | 删除文件 | |
  | fs.watch(filename[, options][, listener]) | 监视文件/目录 | |
  | fs.watchFile(filename[, options], listener) | 监视文件 | |
  | … 一大堆 | | |

// fs -- file system 文件系统
// fs 模块处理的问题，都和文件、文件夹相关
// 比如：获取某个文件里面的内容
// 比如：把一些内容放到某个文件中
// 比如：创建文件
// 比如：创建文件夹
// 比如：读取文件夹里面的全部文件
// 比如：删除文件、文件夹
// 比如：监视文件的变化
// .......

// 我们学习两个方法：
// 1. readFile() ---- 异步读取文件（获取文件里面的内容）
// 2. writeFile() --- 异步写入文件（把内容添加到文件里面）
// 首先，加载fs模块，并把我们需要的 两个方法解构出来
let { readFile, writeFile } = require('fs')

// ------------------------------ readFile -----------------------------
// 作用：读取文件（获取文件里面的内容）
// 语法：
/**
 * readFile('文件路径', '可选的utf-8', (err, data) => {
 *   err表示错误信息（如果读取发生了错误【err=错误对象】；如果没有错误【err=null】）
 *   data表示读取的结果
 * })
 */
// readFile('05.txt', 'utf-8', (err, data) => {
//   // throw专门用于抛出错误，可以理解为输出错误；遇到throw语句还会终止代码的执行，有return的特点
//   if (err) throw err
//   console.log(data)
// })

// --------------------------- writeFile ------------------------------
// 作用：写入文件（向文件中，添加内容）
// 语法：
/**
 * writeFile('文件', '字符串内容', err => {
 *   有错误发生【err=错误对象】； 没有错误【err=null】
 * })
 */
// 特点：
// 1. 如果文件不存在，会自动创建文件（但是不会递归创建）
// 2. 如果文件存在，并且里面有内容；写入的新内容会把原来的内容覆盖

writeFile('06.txt', '1234567890', err => {
  if (err) throw err
  console.log('写入成功')
})

第三方模块

非node自带的模块。也不是自定义的模块。
是别人写的模块，然后发布到npm网站，我们可以使用npm工具来下载安装别人写的模块。
第三方模块，都是在node核心模块的基础之上，封装了一下，实现了很多非常方便快速简洁的方法。
目前，npm网站收录了超过 195 万个第三方模块。

如果你想实现一个功能。那么请搜索第三方模块，没有做不到的事情，只有你搜不到。
不用担心学不完的问题，常用的包不超过100个。

npm介绍

npm（node package manage）node 包 管理器。管理node包的工具。
包是什么？包就是模块。（包约等于模块，一个包可以包括一个或多个模块）

• 包可以理解为模块
• 管理node包的工具，就是 管理模块的工具。所以npm是管理模块的工具
• 内置、自定义模块无需管理，这里的模块指的是第三方模块
• 结论：npm 是 管理(下载、卸载、发布…)第三方模块的工具

npm这个工具，在安装 node 的时候，就已经安装到你的计算机中了。
命令行中执行： npm -v ，如果看到版本号，说明安装成功了。

npm初始化

安装本地模块，需要使用npm工具初始化。

npm init -y
# 或
npm init
# 然后一路回车

初始化之后，会在项目目录中生成 package.json 的文件，这个文件会自动记录下载了哪些第三方模块。
注意事项：

• package name 默认使用当前文件夹 当做 包的名字
• package name 不能有中文
• package name 不能有特殊符号
• package name 不能和需要安装的第三方模块同名

总结：

• **代码文件夹没有中文、没有特殊符号，那么 ****npm init -y**
• 代码文件夹有中文或特殊符号，那么 **npm init** ，回车后，修改 package name，然后再一路回车
  

安装卸载第三方模块的命令

初始化之后，就可以在当前文件夹中安装第三方模块了

建议在安装第三方模块之前，先执行如下命令。
下面的命令只需要执行一次即可（不管以后重启vscode还是重启电脑，都不需要执行第二次）
此命令会将下载地址修改为国内下载，加载下载速度
npm config set registry https://registry.npm.taobao

下载安装第三方模块

# 正常的下载安装
npm install 模块名

# 简写install为i
npm i 模块名

# 一次性安装多个模块
npm i 模块名 模块名 模块名

卸载模块

npm uninstall 模块名
npm un 模块名
npm un 模块名 模块名 模块名

上课可以用这些包来练习： jquery、dayjs、echarts、axios、form-value

关于本地模块的说明

• 下载安装的模块，存放在当前文件夹的 node_modules 文件夹中
• 同时还会生成一个记录下载的文件 package-lock.json（不重要、知道有它即可）
• 并且，我们**下载的包名、版本会记录到 ****package.json**中
• 下载的模块，在哪里可以使用
  • 在当前文件夹
  • 在当前文件夹的子文件夹
  • 在当前文件夹的子文件夹的子文件夹
  • …
  • 翻过来讲，当查找一个模块的时候，会在当前文件夹的 node_modules 文件夹查找，如果找不到，则去上层文件夹的node_modules文件夹中查找，…依次类推。

重要：代码文件夹不能有中文；代码文件夹不能和模块名同名。

总结：

• **下载的包有哪些，可以查看 package.json **
• 下载的包，只能在当前代码文件夹，及其后代文件夹中使用
  

怎样使用第三方模块

• 和使用内置模块一样，需要使用 require 加载模块
• 调用模块提供的方法完成工作
• 不用担心不会用，好的第三方模块都会用使用文档或者官方网站的。
• 有些模块没有官网，去 github 查找模块的使用文档，或者百度。
  

演示 dayjs 模块 的使用

• dayjs 和 moment 都是时间日期处理模块，功能相似
• dayjs 体积更小

https://dayjs.fenxianglu/

// dayjs 是一个专门处理时间日期的模块
// 使用模块之前，必须加载
const dayjs = require('dayjs');
// 将当前时间，转成 “年-月-日 时:分:秒” 的格式
dayjs().format("YYYY-MM-DD HH:mm:ss")
// 将一个其他时间格式，转成 “年-月-日 时:分:秒” 的格式
dayjs(1318781876406).format('YYYY-MM-DD HH:mm:ss');   // 2011-10-17 00:17:56

总结：

1. npm init （如果已经初始化过，则不需要重复初始化）
2. npm i dayjs （安装模块）
3. 代码中导入模块 const dayjs = require('dayjs')
4. 使用 console.log(dayjs().format('YYYY-MM-DD HH:mm:ss'))
   

总结模块的分类

• 自定义模块
  • NodeJS中，创建的JS文件都是自定义模块。（也就是处处皆模块）
  • 需要自己通过 module.exports = 内容 导出
  • 需要自己通过 let 变量 = require('**./**文件名') 导入 （注意路径不能丢）
• 内置模块（核心模块）
  • 安装Node之后，自带了很多内置模块。我们可以直接加载使用他们 。
  • 官方已经导出，我们只需要导入即可：let 变量 = require('**模块名**') （直接写模块名）
• 第三方模块
  • 其他人编写的模块，发布到 npm 网站 上，我们可以下载使用。
  • 别人已经导出，我们只需要导入即可：let 变量 = require('**模块名**') （直接写模块名）

本文标签： node