当前位置： 首页 > news >正文

自定义模块和第三方模块，cnmp

news 来源：原创 2024/9/29 22:21:35

目录

1.模块化简介

（1） 传统开发项目结构 的 缺陷

（2）模块化

（3）模块化的优点

2.Common.js模块化规则

3.模块的分类

4.自定义模块

5.第三方模块

npm和包

npm的相关命令

npm 生成package.json

6.配置cnpm

7.各种模块的加载机制

 

1.模块化简介

（1） 传统开发项目结构 的 缺陷

  • 不利于后续维护 和 二次开发（不好管理，项目结构混乱）

（2）模块化

  • 按照一定的规则 将js代码功能进行封装

（3）模块化的优点

  • 规范化：由于所有模块 都按照指定的规则进行封装 因此 可以做到格式上的统一

  • 代码复用高

  • 易维护：如果某一个模块除了问题 就只会影响到使用该模块的功能 不影响其他功能 而且 解决问题的时候 也方便定位

2.Common.js模块化规则

  • 这个模块化规则 是node中 使用的规则

    • 模块js文件中 通过exports/module.exports 暴露数据/变量

    • 在哪个js文件中 需要使用这些数据 就在哪个js文件中 引入该模块 即可 require

3.模块的分类

  • 内置模块

  • 自定义模块（见上一篇）

  • 第三方模块

4.自定义模块

  • 自定义模块 就是我们自己封装 模块js文件

    //1.编写模块js代码
//封装函数 通过函数编写各种功能
let fn1 = ()=>{....};
let fn2 = ()=>{....};
....
//2.将功能函数 暴露出去
//我们可以通过module.exports将数据暴露出去 
//module.exports本身是一个 对象  我们可以通过给他添加属性和方法的方式 将数据暴露出去
//本质上 模块js文件 暴露的 就是module.exports
module.exports.fn1 = fn1
module.exports.fn2 = fn2
...

//我们也可以专门暴露某一个指定数据
//单个暴露
//本质上 模块js文件 暴露的 就是module.exports
module.exports = 要暴露的数据


//exports
//我们还可以使用 exports 来暴露模块数据 但是 这种方式只能批量暴露 不能单个暴露
//批量暴露 和 module.exports的暴露方式相同
//就是将 要暴露的数据 作为属性或方法 添加给exports 即可
exports.fn1 = fn1;
exports.fn2 = fn2;
....
//exports 本质是一个变量  let exports = module.exports
//module.exports本质上是一个对象  因此 exports 是由 module.exports直接赋值的 因此二者会互相影响
//因此 我们给exports添加属性 就相当于 给 module.exports 添加属性


//exports不能像module.exports一样 单个暴露数据
//因为 exports是一个变量 其值为 module.exports
//let exports = module.exports
//因此 如果想像module.exports一样单个暴露数据  就会写作：exports = 要暴露的数据
//这样写 exports 就和 module.exports毫无关系了 因此也就暴露不了了

  • 模块暴露数据的方式有三种

    • 单个暴露——一种

      • module.exports = 要暴露的数据

    • 批量暴露——两种

      • module.exports.属性名/方法名 = 要暴露的数据

      • exports.属性名/方法名 = 要暴露的数据

  • 引入模块js中暴露的数据的方式 两种

    • let 变量 = require("模块名/路径")

    • let {变量名1，变量名2，...} = require("...")

 

5.第三方模块

npm和包

  • npm：node package manager node的包管理工具

    • 我们如果想使用第三方模块 需要单独对模块进行下载和安装 下载安装的操作 就由npm来完成

    • npm 已经内置到了 node安装包中 因此 我们安装node之后 就会捆绑安装npm

    • 在cmd命令行中 我们可以通过 npm -v命令 检测我们安装的npm的版本

  • npm的作用

    • 1.下载并安装第三方模块包

    • 2.管理本地的模块包

  • 我们下载第三方模块包 都是从 npm官网进行下载——npm

npm的相关命令

  • 下载并安装第三方模块——npm install 模块包名 / npm i 包名 默认安装方式 安装的就是产品依赖

  • 下载并安装指定版本的模块——npm i 包名 @版本号

  • 下载开发依赖—— npm install 包名 --save-dev / npm i 包名 -D

  • 下载产品依赖—— npm install 包名 --save / npm i 包名 -S

  • 注意：当我们在项目文件夹中 第一次安装第三方模块包的时候 就会自动生成一个文件夹——node_modules 和 一个文件 package-lock.json

    • node_modules文件夹：用来存放 我们下载安装的模块包 以及 其所依赖的模块包

    • package-lock.json文件：用来 记录我们下载安装过的 模块包 的相关信息

  • 卸载第三方模块包：npm uninstall 模块包名 / npm r 包名

  • 全局安装：npm i 包名 -g

    • 全局安装的模块包 在任何路径下 都可以使用

    • 非全局安装的模块包 只能在自己的项目文件夹中使用

    • 下面 我们以 nodemon模块 来演示

      • nodemon模块 是 node代码运行的热更新 工具

      • 1.在cmd中 输入 npm i nodemon -g

      • 2.全局安装的模块包 会保存在 C:\Users\Administrator\AppData\Roaming\npm\node_modules

      • 3.我们需要先检查一下 环境变量 如果环境变量Path中 有上述值，我们就可以直接使用了 如果没有 需要我们自己写入

        • 控制面板--->系统--->高级系统设置--->环境变量--->配置Administrator的Path变量

        • 就是将C:\Users\Administrator\AppData\Roaming\npm\node_modules 添加到path中即可

        • 注意：path中各个路径之间 要使用 分号隔开

        • C:\Users\Administrator\AppData\Roaming\npm;C:\Users\Administrator\AppData\Roaming\npm\node_modules

      • 4.测试 能不能在任意文件夹 使用nodemon

      • nodemon的用法

        • 在执行js文件的时候 我们可以使用nodemon命令——nodemon 文件名

        • 这样执行的js文件 会实现 热更新、

      • 在cmd命令行工具中 结束命令的快捷键 是 ctrl+c

  • 全局卸载：npm r 包名 -g

    • 卸载的是 C:\Users\Administrator\AppData\Roaming\npm\node_modules中的模块包

npm 生成package.json

  • 生成命令：npm init / npm init -y

    • npm init : 需要我们手动进行确认

    • npm init -y：自动生成 不需要确认 所有参数都是用默认值

  • 当我们执行 npm init命令后 会要求我们确认以下信息

    • package name: 默认值为当前项目文件夹名

      • 注意：不能设置为中文

    • version：版本号 默认 1.0.0

    • description：项目描述信息

    • entry point：入口文件 可以自行设置

    • test command：测试命令 可以手动配置 我们不在这里配置

    • git repository：git远程仓库地址

    • keywords：关键词

    • author：作者

    • license：协议

  • //生成好的package.json 内容如下
{
  "name": "allens-program",//项目包名
  "version": "1.0.0",//项目版本号
  "description": "this is allen's project",//项目描述信息
  "main": "01-test.js",//项目入口文件
  "dependencies": {
    "trim": "^1.0.1"//当前项目中 安装的 模块包
  },
  "devDependencies": {},//当前项目中 安装的 开发依赖 模块包
  "scripts": {//scripts属性中 存放的是 当前项目中 所有可以使用的命令 这些命令的用法为：npm run 命令名
      //但是 如果我们配置命令名为start 的命令 则可以直接写 npm start
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "allen",//作者
  "license": "ISC"//协议
}

  • 注意：json文件的编写规则

    • 在json文件的对象中 属性名 必须加 双引号

    • 数组和对象 最后一个成员 后面都不能加 逗号

    • 一个json文件中 只能写一个数据

    • json文件中不能写注释

单独说明

  • scripts：用来配置 项目中的快捷命令 我们可以通过配置快捷命令的方式来实现代码的快速开发

    •   "scripts": {//scripts属性中 存放的是 当前项目中 所有可以使用的命令 这些命令的用法为：npm run 命令名
      //但是 如果我们配置命令名为start 的命令 则可以直接写 npm start
    

6.配置cnpm

作用：cnpm 可以在网速不好的时候 帮助我们下载第三方模块 更快捷

  • 原因：npm下载模块 是从境外服务器上 因此 速度慢 cnpm 下载模块 是从 国内服务器（淘宝镜像上） 因此速度更快

  • 如果网速不好的时候 简易配置cnpm

  • 配置命令

  • 配置cnpm：npm install -g cnpm@指定版本 --registry=https://registry.npm.taobao.org

    • 注意：如果是nodev12版本 需要使用6版本的 cnpm 版本如果出问题 会导致报错 如果是最新稳定版node 就可以使用最新版本的cnpm

    • 配置npm的下载源：npm config set registry https://registry.npm.taobao.org

  • cnpm命令 和 npm命令 完全相同 只是将npm 改为了 cnpm

7.各种模块的加载机制

  • 内置模块包的加载机制

    • 内置模块的优先级最高 会优先加载

    • 具体体现

      • let fs = require("fs");
//如果我们这时 下载了一个第三方模块 也叫 fs 这里引入的fs模块 就一定是 内置的fs模块

  • 自定义模块的加载机制

    • 自定义模块的引入：let 变量 = require("相对路径")

    • 使用require()加载自定义模块时，必须指定以./或../开头 如果没有指定./或../这样的路径标识符，则Node.js会把它当作内置模块或第三方模块进行加载。

      • //假设自定义模块 就写在当前文件夹中
let 变量名 = require("./模块名")

    • 自定义模块不要放在node_modules中。

      • 注意：我们在编写node代码的时候 不要动node_modules文件夹

    • 在引入自定义模块的时候 可以省略其后缀名

      • 原因：如果我们省略了后缀名 node会执行如下操作

        • 1.默认给我们补充.js后缀名 进行查找 如果找到了 就引入 如果没找到

        • 2.就继续给我们重新替换后缀名为.json 继续进行查找 如果找到了，就引入json文件 如果还没找到

        • 就报错 cannot find module "xxx"

  • 第三方模块加载机制

    • 1.先在当前文件夹的node_modules文件夹中 查找第三方模块 如果找到 就直接引入并使用

    • 2.就向上一级父文件夹中的node_modules文件夹中 查找模块 如果有 就直接引入 如果还没有 就继续向上一级父文件夹查找 一直查找到 根目录 如果有就可以引入 如果到根目录还没有

    • 3.去环境变量中 配置过的路径中 查找其中的node_modules文件夹 如果有模块 就可以引入 如果还没有 就报错cannot find module "xxx"

相关文章：

  • 【正点原子I.MX6U-MINI应用篇】3、Framebuffer应用编程，操作屏幕
  • 区间预测 | MATLAB实现GRU门控循环单元分位数回归多输入单输出
  • 大学网上课程查题系统搭建使用-公众号使用
  • 若依前后端分离版入门
  • DRV8812芯片被国产激光打印机驱动芯片TMI8262取代
  • 三十三、《大数据项目实战之用户行为分析》Spark SQL读写MySQL
  • 负载开关、高侧开关、低侧开关等
  • 【LeetCode】146、LRU 缓存【中等】
  • 【JavaWeb项目】基于WebSocket的Web聊天室
  • File对象转MultipartFile 如何new出高仿MultipartFile对象
  • VScode配置运行C/C++、python，及快捷键配置
  • 【threejs】可视化大屏酷炫3D地图附源码
  • 安路FPGA学习备忘录
  • 目标检测算法——YOLOv5改进之结合MobileOne结构
  • Python之“诗词大会”游戏
  • hexo+github搭建个人博客
  • 分享一款快速APP功能测试工具
  • 【个人向】《HTTP图解》阅后小结
  • Effective Java 笔记（一）
  • JS基础篇--通过JS生成由字母与数字组合的随机字符串
  • Laravel深入学习6 - 应用体系结构：解耦事件处理器
  • leetcode98. Validate Binary Search Tree
  • Redis提升并发能力 | 从0开始构建SpringCloud微服务(2)
  • Twitter赢在开放，三年创造奇迹
  • 构造函数（constructor）与原型链（prototype）关系
  • 关键词挖掘技术哪家强（一）基于node.js技术开发一个关键字查询工具
  • 官方新出的 Kotlin 扩展库 KTX，到底帮你干了什么？
  • 力扣(LeetCode)56
  • 每天一个设计模式之命令模式
  • 前端js -- this指向总结。
  • 前端工程化（Gulp、Webpack）-webpack
  • 数据科学 第 3 章 11 字符串处理
  • 思考 CSS 架构
  • 探索 JS 中的模块化
  • 我从编程教室毕业
  • 小程序测试方案初探
  • 小试R空间处理新库sf
  • 【运维趟坑回忆录 开篇】初入初创, 一脸懵
  • ​直流电和交流电有什么区别为什么这个时候又要变成直流电呢？交流转换到直流（整流器）直流变交流（逆变器）​
  • #define
  • #pragma once
  • $.ajax中的eval及dataType
  • $emit传递多个参数_PPC和MIPS指令集下二进制代码中函数参数个数的识别方法
  • （175）FPGA门控时钟技术
  • (Forward) Music Player: From UI Proposal to Code
  • （二）JAVA使用POI操作excel
  • （二）springcloud实战之config配置中心
  • （亲测有效）推荐2024最新的免费漫画软件app，无广告，聚合全网资源！
  • (十五)使用Nexus创建Maven私服
  • .md即markdown文件的基本常用编写语法
  • .NET Core中Emit的使用
  • .NET Framework与.NET Framework SDK有什么不同？
  • .NET/C# 使窗口永不获得焦点
  • .NET编程——利用C#调用海康机器人工业相机SDK实现回调取图与软触发取图【含免费源码】
  • .Net各种迷惑命名解释