node.js模块化规范

最新推荐文章于 2024-05-10 10:54:48 发布

种一棵树吧

最新推荐文章于 2024-05-10 10:54:48 发布

阅读量382

点赞数 1

文章标签： node.js javascript 前端服务器

本文链接：https://blog.csdn.net/m0_68359121/article/details/125491262

版权

(截图代码如果没显示原因就是CSDN的pc端版本bug,后续会用手机更新博客!!!)

01-模块化规范介绍

1.什么叫模块化？（模块 == js文件）
- 一个js文件可以引入另一个js文件中的数据, 这种开发方式就叫做模块化开发
2.模块化开发好处？
- （1）将功能分离出来
  - 一个js文件只负责处理一个功能，这样做的好处是业务逻辑清晰，便于维护
- （2）按需导入
  - 用到哪一个功能，就导入哪一个js文件。模块化开发是渐进式框架的共同特征。
- （3）避免变量污染
  - 一个js文件(模块),都是一个独立的作用域。互不干扰，不用考虑变量名冲突问题。

了解一下前端模块化开发的历程

ES6之前： js语言本身不支持模块化开发，一般需要通过第三方工具来实现模块化开发。

例如：sea.js. SeaJS - A Module Loader for the Web require.js. RequireJS

ES6 ： ES6新增了模块化开发语法（今天第四个部分语法，vue框架必须要使用的语法）

Nodejs : Nodejs本身也支持模块化开发，但是和前端的ES6有一些细微的区别。（本小节主要学习nodejs自带的模块化语法，对于后期学习不是特别重要。但是要想今后自己写一些npm框架，就必须要掌握nodejs模块化语法）

1.2-模块化语法规范介绍

任何一个语法，都需要遵循一定的规范。不同的平台需要遵循的规范不同。一般情况下，模块化语法规范主要有三种。
- CommonJS 规范：nodejs 默认支持的
  - 文档：CommonJS规范 -- JavaScript 标准参考教程（alpha）
- ES6规范：前端的ES6语法支持的规范
  - 文档：ES6 入门教程
- CMD 和 AMD 模块化规范： ES6语法之前的模块化语法规范，现在已经几乎不用了

1.3-CommonJS规范实现模块化语法

CommonJS规范只有两句话
- 1.模块必须要使用 require() 导入
- 2.模块必须要使用 module.exports 导出
  - 这两个语法都是nodejs环境自带的全局语法

exports与module.exports区别
- (1)如果分不清两者区别,就使用 module.exports
- (2)exports不能去修改堆地址，只能往堆地址里面加数据
  - 错误写法： exports = { name:'张三' }
    - 这样写是修改堆地址
  - 正确写法: exports.name = '张三'
    - 这样写没有修改堆地址，而是往堆地址中加数据

1.导出模块语法一般放在js文件最底部，且只需要执行一次即可
2.开发中,并不需要把模块化中所有的变量全部都导出，只需要暴露别人需要用的变量即可

1.4-模块缓存机制

1.当一个模块第一次会加载时，nodejs会执行里面的js代码，并且导出模块
2.nodejs会将导出的模块放入缓存中
3.当重复导入一个模块的时候，nodejs会先从缓存中读取模块。如果缓存中有，就从缓存读取。缓存没有重复步骤1

1.5-nodejs三种模块及require()加载原理

1.nodejs有三种模块
- 第一种：核心模块、内置模块
  - nodejs作者写的，这些模块js文件会随着安装nodejs的时候一起安装。因此我们可以直接使用，而无需下载。
    - 例如： fs 、path、http都是核心模块
- 第二种：第三方模块
  - npm官网上面的模块，这些都是大佬写的模块。需要下载后使用
    - 例如： express、cors、bod-parser
- 第三种：自定义模块
  - 我们自己写的js文件

2.require('文件路径')加载原理
- (1)自定义模块：必须要写文件路径， require()会得到这个模块里面的 module.exports 对象
- (2)第三方模块：写模块名。 nodejs会自动从你的node_module文件夹里面去找这个模块的名字，然后执行模块里面的index.js代码，得到里面的module.exports
  - 如果当前目录没有module.exports就会从上级目录找，以此类推。一直找到你的磁盘根目录。还找不到就会报错提示模块不存在（有点类似于变量作用域就近原则）
- (3)核心模块：写模块名。 nodejs会自动从你的node安装包路径里面去找。

==02-npm包管理工具==

npm命令大全	简写	描述
npm init --yes	npm init -y	初始化包,生成package文件
npm install 包名	npm i 包名	下载包到node_module目录(默认下载最新版本)
npm install 包名 -g	npm i 包名 -g	安装全局包
npm install 包名@版本号	npm i 包名@版本号	下载指定版本的包到node_module目录
npm uninstall 包名		删除本地包
npm uninstall 包名 -g		删除全局包
npm install 包名 --save-dev	npm i 包名 --save-d	安装开发依赖包(默认安装都是生产依赖)
npm config set registry https://registry.npm.taobao.org/		切换镜像源
npm config list		查询镜像源
npm -v		查看npm版本
where node		查看node安装目录
where node		查看npm安装目录
npm root -g		查看npm区全局包安装目录
npm list -g --deptch		查看电脑装了哪些全局包
npm install npm -g		更新你电脑的npm版本

1.1-npm介绍

npm有两种含义 :

第一种: 包管理工具node package manager

第二种：npm网站代码托管平台

1.npm
- 全称node package manager
- 官方推出的包管理工具
- 不需要额外安装，安装node之后自带
- 因为服务器不在国内，所以有时候安装特别慢，甚至无法成功
2.npm
- 类似于gitthub,是一个全球免费的代码托管平台
- 与github不同点
  - github : 支持任何编程语言，任何平台
  - npmjs : 只为nodejs服务

1.2-npm使用流程

初始化、安装、导入使用

1.初始化：在当前nodejs项目中执行终端命名: npm init -y
- 作用：生成一个pachage.json文件，帮你记录当前项目安装了哪些第三方模块及对应的版本号
2.安装：在当前nodejs项目中执行终端命名: npm install 模块名
- 安装之后，你的项目目录会新增两个文件node_modules与package-lock.json
  - node_modules:npm会自动将所有的第三方模块放入这个文件夹中。类似于前端的lib文件夹
  - package-lock.json：npm会自动记录第三方模块的下载地址，下一次安装或更新的时候直接从这个地址下载，速度更快(只是影响以后更新速度，不影响开发)
  - package.json:帮你记录当前项目安装了哪些第三方模块及对应的版本号
3.注意点：
- (1)使用npm文件夹路径不能有中文
- (2) 如果网速很慢导致无法安装第三方模块，建议更改npm镜像源为淘宝服务器
  - npm config set registry https://registry.npm.taobao.org/
  - 查看当前npm得镜像源：npm config list

1.2.1- `npm init -y`原理

1.作用：快速初始化包,创建package.json文件
2.package.json文件 : 项目中用到了哪些依赖包，以及包名、版本号
- 只要你下载了包,这个文件就会记录你下载哪些包，和下载的版本

1.2.2-`npm i 包名` 原理

1.访问npm服务器
2.从npm服务器搜索包
3.搜索到之后,找包的仓库地址
4.下载包到你目录的node_module文件
5.会把包地址放入package.lock.json文件，用于更新提高速度

默认情况下，所有包都会自动下载最新版本.如果想下载指定版本，就可以使用命令

npm i 包名@版本号

1.2.3-npm包三个组成部分详解

1.package.json : 记录项目所有下载过的依赖包及对应的版本号
- 相当于下载记录
2.node_module : 存放包源文件的目录
- 相当于下载文件夹
3.package.lock.json : 记录所有的依赖包的下载地址和版本
- 相当于网页收藏夹
- 作用：提高更新包的效率（第一次下载包之后，npm会把每一个包的下载地址存在package.lock.json文件中。下一次下载的时候，无需从npm搜索，而是直接从上一次地址去下载）

1.3-全局包与本地包

1.本地包: npm i 包名
- 在哪里执行命令，就在哪个文件夹安装
- 只对这个文件夹生效
2.全局包: npm i 包名 -g
- 无论在哪里执行命令，都会装到你的C盘根目录
- 对整个操作系统生效，任何时候都能使用
  - 例如: npm i nodemon -g
3.小经验
- 本地包一般是用于做项目开发的，主要是导入写代码的
- 全局包一般是工具类（像vscode插件一样），主要是为你开发提供工具遍历的
  - nodejs里面的nodemon
  - vue里面的vue/cli

1.4-开发依赖与生产依赖

1.下载包的时候，有两种选择：开发依赖与生产依赖
- 默认情况下，我们所有的包都会选择生产依赖

2.什么是开发依赖，什么是生产依赖
- 开发依赖：只在开发的时候会用到，到了生产（上线）环境用不上
- 生产依赖：上线之后也需要使用
- 举个例子：比如房子装修
  - 开发依赖：装修的时候需要用到工具。铲子、尺子、水泥、木材
  - 生产依赖：装修完了需要用到：水泥、木材
    - 其中铲子、尺子只会在开发的时候用到，生产的时候用不上。就可以放入开发依赖

3.如何选择生产依赖还是开发依赖
- 不纠结，一般包的官网会有命令。你按它的CV就可以了
  - gulp-htmlmin。这个工具是用来把html代码进行压缩的（去掉空格，换行等），我们需要在开发时使用它，而项目一旦上线，我们就不再需要它了。，因此将它归类为"开发依赖"。
  - axios。在开发时参与源码编写，在发布上线的生产环境中也是需要它的。不仅在开发环境编写代码时要依赖它、线上环境也要依赖它，因此将它归类为"生产依赖"。

==04-ES6官方模块化规范(vue需要使用)==

vue将每一个组件看作是一个独立的模块（类似于nodejs中的）模块化，而组件导入import和导出exports其实使用的是ES6新增的模块化语法.

es6官网模块化语法：ES6 入门教程

谷歌浏览器测试ES6的模块化语法
- 浏览器输入：chrome://flags/
- 打开开关
- 必须要使用live-server插件运行index才可以

1.1-默认导入导出

1.2-按需导入导出

知识点验收

export default可以写多次吗?
1. 不可以，只能写一次

export default 和export可以写在同一个文件中吗?

可以，但是要分开导入。实际开发中不建议同时使用

export let name = '张三'
export let age = 18
export let sayHi = function(){
    console.log(666);
} 

let sex = '男'
export default sex;

import {name as a,age as b,sayHi as c} from "./goods.js"
import sex from "./goods.js"

导入通过export导出的模块,名字有要求吗?
1. 有要求，如果是export导出，默认导入变量名要与导出的一致
2. 如果是export default，则变量名可以随便写
如果要给export导出的模块起别名,使用哪个关键字?
1. as