Node.js与Webpack笔记(一)

这里使用的16.19.0版本,官网和github没找到,去黑马2023年课程里找

篇幅较大会卡,此篇幅不写Webpack部分,留着下一篇

初识 

1.什么是Node.js?

  1. Node.js 是一个独立的 JavaScript 运行环境,能独立执行 JS 代码,因为这个特点,它可以用来编写服务器后端的应用程序

  2. Node.js 作用除了编写后端应用程序,也可以对前端代码进行压缩,转译,整合等等,提高前端开发和运行效率

  3. Node.js 基于Chrome V8 引擎封装,独立执行 JS 代码,但是语法和浏览器环境的 V8 有所不同,没有 document 和 window 但是都支持 ECMAScript 标准的代码语法

  4. 想要得到 Node.js 需要把这个软件安装到电脑

  5. Node.js没有图形化界面,使用CMD命令行工具

2.什么是前端工程化?

前端工程化:开发项目直到现在,过程中集成的所有工具和技术

Node.js是前端工程化的基础(因为Node.js可以主动读取前端代码内容)

对前端代码进行优化,集成各种提高前端开发效率的工具等

3.Node.js为什么能执行JS代码?

4.Node.js对V8引擎封装后 与 原浏览器内核有什么区别?

Node.js环境没有DOM和BOM

下载与安装

1.官网地址(LTS为长期支持版,CURRENT为刚发行版):

Node.js — Previous Releases (nodejs.org)

2.github地址

GitHub - nodejs/Release: Node.js Release Working Group


3.安装 与 验证安装


也可以在VSCode集成cmd终端验证

可以配置默认终端

注意:选择cmd而不是powershell

powershell是win10新出的工具,默认不允许使用自定义的脚本命令

运行我的第一个Node.js脚本

1.Hello Node.js

2.默认位置

默认位置为当前文件夹

三个模块

1.什么是模块?

  1. 模块:类似插件,封装了方法和属性供我们使用

2.fs模块 -读写本机文件

  • 找不到文件会自动创建,但不会创建文件夹
  • 寻找路径的起点在开启cmd终端的文件夹
  • 读取的内容封装在data属性中,是buffer缓冲流

仔细看,注意路径


3.path模块-路径处理

作用:获得绝对路径

问题引出:写相对路径有什么问题吗?

  • 如上图,文件夹03开启的cmd命令行工具,执行文件夹03下的index.js脚本,读取文件夹03的父文件夹下(根目录)文件text.txt,此时没有任何问题
  • 某一天根目录开启的cmd,执行03/index.js,此时的相对路径就出问题了,所以这里必须使用绝对路径
解决方法

path模块内置变量 __dirname 配合 Node.js的path.join()

  • __dirname:动态获取当前项目根目录的绝对路径,而不是什么开启cmd的文件夹目录
  • 第二个参数写剩余文件路径
  • path.join(): 按照所在本机系统的分隔符作为定界符来链接你传入的路径(例如:将\转化为//)

4.案例:简单压缩前端页面

需求:将原HTML文件内的回车符(\n)、换行符(\r)

运行测试页面是否能成功运行

5.URL统一资源定位符

1.URL是什么?有什么用?

(URL 是统一资源定位符,简称网址,用于访问网络上的资源)

2.端口号的作用?

标记区分服务器里不同的服务程序,值为(0-65535 之间的任意整数)

3.http默认端口号?

http 协议,默认访问的是 80 端口

注意:0-1023 和一些特定的端口号被占用,我们自己编写服务程序请避开使用

4.Web服务是什么?

一个程序,用于提供网上信息浏览功能

提供数据和网页资源等等功能,其他它的功能远不止于此


 6.http模块-创建Web服务

基于 Node.js 环境,使用内置 http 模块,创建 Web 服务程序

需求:引入 http 模块,使用相关语法,创建 Web 服务程序,响应返回给请求方一句提示 ‘hello,world’

  1. 步骤:

    1. 引入 http 模块,创建 Web 服务对象

    2. 监听 request 请求事件,对本次请求,做一些响应处理

    3. 启动 Web 服务监听对应端口号

    4. 运行本服务在终端进程中,用浏览器发起请求

如何关闭Node.js的http模块创建web服务

关闭浏览器和关掉cmd都不会终止服务

第一种办法,cmd界面可以【Ctrl + C】关闭node

第二种办法,server.close()关闭

const http = require('http');
const server = http.createServer();

server.on('request', (req, res) =>{
    res.setHeader('Content-Type', 'text/plain;charset=utf-8');
    res.end('欢迎使用 Node.js 和 http 模块创建的Web服务');
});

server.listen(3000, () =>{
    console.log('Web 服务启动成功了');
});

function closeServer(){
    console.log('正在关闭服务...');
    server.close();
    console.log('关闭服务成功');
};

setTimeout(() =>{
    closeServer();
}, 20000);//20秒关闭web服务

Node.js 模块化

在 Node.js 中每个文件都被当做是一个独立的模块

模块内定义的变量和函数都是独立作用域的

因为 Node.js 在执行模块代码时,将使用如下所示的函数封装器对其进行封装

而且项目是由多个模块组成的,每个模块之间都是独立的,而且提高模块代码复用性,按需加载,独立作用域

但是因为模块内的属性和函数都是私有的,如果对外使用,需要使用标准语法导出和导入才可以,而这个标准叫 CommonJS 标准(CommonJS规范 -- JavaScript 标准参考教程(alpha) (ruanyifeng.com)),接下来我们在一个需求中,体验下模块化导出和导入语法的使用

CommonJS 标准:一般应用在 Node.js 项目环境中

ECMAScript 标准:一般应用在前端工程化项目

1.CommonJS导入导出语法

需求:定义 utils.js 模块,封装基地址和求数组总和的函数,导入到 test.js 使用查看效果

工具类utils.js

module.exports导出还必须写最下面

这是CommonJS语法

测试类test.js

调用test.js

2.ECMAScript默认导入导出语法

吗的气死我了,搞那么多规范,还要一个个学

CommonJS 规范是 Node.js 环境中默认的,后来官方推出 ECMAScript 标准语法,我们接下来在一个需求中,体验下这个标准中默认导出和导入的语法要如何使用

需求:定义 utils.js 模块,封装基地址和求数组总和的函数,导入到 test.js 使用查看效果

Node.js默认不支持,新建package.json文件,添加一句代码开启ECMAScript规范

工具类utils.js

测试类test.js

3.ECMAScript命名导入导出语法

需求:定义 utils.js 模块,封装基地址和求数组总和的函数,导入到 test.js 使用查看效果

切记,别忘了package.json

一个一个导出,注意属性名


4.如何选择?

按需加载:使用命名导入导出

全部加载:使用默认导入导出

5.包

  • 包:将模块、代码或者其他资料整合成一个文件夹,这个文件夹就叫包
  • 包分类:
    • 项目包:主要用于编写项目和业务逻辑
    • 软件包:封装工具和方法进行使用
  • 包要求:根目录中,必须有【package.json】文件(记录包的清单信息)
  • 包使用:在引入一个包文件夹到代码中,默认引入的是包文件节下的 index.js 模块文件里导出的对象,如果没有 index.js 文件,则会引入 package.json 里 main 属性指定的文件模块导出的对象

arr.js

/**
 * 目标:封装数组常用的方法
 */
// 数组求和函数
const getArraySum = arr => arr.reduce((sum, item) => sum += item, 0)

module.exports = {
  getArraySum
}

str.js

/**
 * 目标:封装校验用户名和密码长度的函数
 * 要求:用户名最少 8 位,密码最少为 6 位
 */

const checkUserName = username => {
  return username.length >= 8
}

const checkPassWord = password => {
  return password.length >= 6
}

module.exports = {
  checkUser: checkUserName,
  checkPwd: checkPassWord
}

index.js

/**
 * 本文件是,utils 工具包的唯一出口
 * 作用:把所有工具模块方法集中起来,统一向外暴露
 */
const { getArraySum } = require('./lib/arr.js')
const { checkUser, checkPwd } = require('./lib/str.js')

// 统一导出所有函数
module.exports = {
  getArraySum,
  checkUser,
  checkPwd
}

 package.json

{
  "name": "cz_utils",
  "version": "1.0.0",
  "description": "一个数组和字符串常用工具方法的包",
  "main": "index.js",
  "author": "itheima",
  "license": "MIT"
}

server.js

/**
 * 目标:导入 utils 软件包,使用里面封装的工具函数
 */
const obj = require('./utils')
console.log(obj)
const result = obj.getArraySum([10, 20, 30])
console.log(result)

6.NPM包管理器

npm 简介链接: 软件包管理器,用于下载和管理 Node.js 环境中的软件包

NPM 包管理器简介 (nodejs.cn)

使用步骤

1.初始化清单文件: npm init -y (得到 package.json 文件,有则跳过此命令)

注意 -y 就是所有选项用默认值,所在文件夹不要有中文/特殊符号,建议英文和数字组成,因为 npm 包名限制建议用英文和数字或者下划线中划线

2.下载软件包:npm i 软件包名称

当前项目下的 node_modules 中,并记录在 package.json 中

NPM安装项目中所有依赖

1.我们拿到了一个别人编写的项目,但是没有 node_modules,项目能否正确运行?

不能,因为缺少了项目需要的依赖软件包,比如要使用 dayjs 和 lodash 但是你项目里没有这个对应的源码,项目会报错的

2.拿别人的项目为何不给我 node_modules?

因为每个人在自己的本机使用 npm 下载,要比磁盘间传递要快(npm 有缓存在本机)

3.如何得到项目需要的所有依赖软件包呢?

直接在项目目录下,运行终端命令:npm i 即可安装 package.json 里记录的所有包和对应版本到本项目中的 node_modules

4.当前项目中只有 package.json 没有 node_modules 怎么办?

当前项目目录下,打开终端,执行 npm i 安装所有依赖软件包


NPM全局软件包 -nodemon
  1. 软件包区别:

    • 本地软件包:当前项目内使用,封装属性和方法,存在于 node_modules

    • 全局软件包:本机所有项目使用,封装命令和工具,存在于系统设置的位置

  2. nodemon 作用:替代 node 命令,检测代码更改,自动重启程序

  3. 使用:

    1. 安装:npm i nodemon -g (-g 代表安装到全局环境中)

    2. 运行:nodemon 待执行的目标 js 文件

nodemon 是一个可以在修改文件时自动重启 node 的工具

nodemon是一个命令行工具,用以辅助项目开发,其作用是检查文件的保存操作,每次文件修改保存之时,都会在命令行中自动执行文件

当您使用Nodemon启动 node.js 应用程序时它将监视任何更改并自动重新启动服务器,从而提高您的工作效率。

使用方法

在控制台输入:

nodemon app.js

替代本来的启动方式:

node app.js

就可以使用 nodemon 启动文件,这样在修改文件的时候就会自动重启。

在NPM脚本使用

一般都是在npm脚本中使用,作为开发环境的配置

... 
 "scripts": {
    "dev":"nodemon app.js"
  },
...

7.Node.js常用命令

下一篇: 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/430154.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

基于机器学习的曲面拟合方法

随着科技的不断发展,机器学习成为了最近最热门的技术之一,也被广泛应用于各个领域。其中,基于机器学习的曲面拟合方法也备受研究者们的关注。曲面拟合是三维模型处理中的重要技术,其目的是用一组数据点拟合出平滑的曲面&#xff0…

STM32启动过程及反汇编

STM32从Flash启动的过程,主要是从上电复位到main函数的过程,主要有以下步骤: 1.初始化堆栈指针 SP_initial_sp,初始化 PC 指针Reset_Handler 2.初始化中断向量表 3.配置系统时钟 4.调用 C 库函数_main 初始化用户堆栈&#xf…

【软件测试】Postman中变量的使用

Postman中可设置的变量类型有全局变量,环境变量,集合变量,数据变量及局部变量。区别则是各变量作用域不同,全局变量适用于所有集合,环境变量适用于当前所选环境(所有集合中均可使用不同环境变量&#xff09…

常用通讯协议的理解

一、通讯的一些基本认知 1、什么是异步或同步通信 异步通信在发送字符时,所发送的字符之间的时间间隔可以是任意的。发送端可以在任意时刻开始发送字符,因此必须在每一个字符的开始和结束的地方加上标志,即加上开始位和停止位,以…

通义千问1.5(Qwen1.5)大语言模型在PAI-QuickStart的微调与部署实践

作者:汪诚愚(熊兮)、高一鸿(子洪)、黄俊(临在) Qwen1.5(通义千问1.5)是阿里云最近推出的开源大型语言模型系列。作为“通义千问”1.0系列的进阶版,该模型推出…

为什么 Java 中只有值传递?

为什么 Java 中只有值传递? 开始之前,我们先来搞懂下面这两个概念: 形参&实参值传递&引用传递 形参&实参 方法的定义可能会用到 参数(有参的方法),参数在程序语言中分为: 实参…

TCP和UDP可以使用同一个端口号吗?

TCP和UDP可以使用同一个端口号吗? 首先说答案:可以。怎么理解呢? 我想这个问题要从计算机网络通信谈起,学过计算机网络的同学,可能都还记得7层或者4层网络模型,TCP/UDP属于其中的传输层协议,在…

一个完整的Flutter项目的基本构成

目录 1.页面跳转2.本地数据库和读取2.1 在pubspec.yaml中添加数据库框架依赖2.2 创建db.dart 初始化数据库并创建表2.3 安装JsonToDart插件2.4 创建实体类 user_bean.dart2.5 增删改查: 3.网络请求数据解析UI渲染 本篇主要总结下一个完整的Flutter项目有哪些基本构成…

STM32基础--初识 STM32

什么是 STM32 对于STM32,从字面意思上来理解,ST是意法半导体,M是Microelectronics的缩写,其中32表示的是32位,那么整合起来理解就是:STM32就是指的ST公司开发的32位微控制器。在如今的32位控制器中&#x…

mq基础类设计

消息队列就是把阻塞队列这样的数据结构单独提取成一个程序独立进行部署。——>实现生产者消费者模型。 但是阻塞队列是在一个进程内部进行的; 消息队列是在进程与进程之间进行实现的, 解耦合:就是在分布式系统中,A服务器调用B…

Window系统搭建feishu-chatgpt企业AI机器人并实现无公网ip远程连接

文章目录 前言环境列表1.飞书设置2.克隆feishu-chatgpt项目3.配置config.yaml文件4.运行feishu-chatgpt项目5.安装cpolar内网穿透6.固定公网地址7.机器人权限配置8.创建版本9.创建测试企业10. 机器人测试 前言 在飞书中创建chatGPT机器人并且对话,在下面操作步骤中…

偶现bug如何分析和处理?

测试中比较郁闷的一件事就是遇到偶现bug。测个10次~20次才难得出来一次,甚至有时几天才会出现一次,真的去复现的时候又不记得自己执行了哪些步骤。所以遇到这样的问题都是比较头疼的。 举个例子: 打开一个论坛,有一个在线人数的信…

在Mac上安装nginx+rtmp 本地服务器

需要使用终端命令,如果没有Homebrew,要安装Homebrew,执行: ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 一、安装Nginx 1、先clone Nginx项目到本地: brew tap de…

云计算,用价格让利换创新空间?

文 | 智能相对论 作者 | 李源 ECS(云服务器)最高降36%、OSS(对象存储)最高降55%、RDS(云数据库)最高降40%…… 阿里云惊人的降幅,一次性把国内云计算厂商的价格战推到了白热化阶段。 这次能…

【C语言】linux内核napi_gro_receive

一、注释 // napi_gro_receive是网络设备接口的一个函数,它被NAPI(New API)网络轮询机制使用,用于接收和处理接收到的数据包。 // 这个函数通过通用接收分组(GRO,Generic Receive Offload)技术…

java数据结构与算法刷题-----LeetCode687. 最长同值路径

java数据结构与算法刷题目录(剑指Offer、LeetCode、ACM)-----主目录-----持续更新(进不去说明我没写完):https://blog.csdn.net/grd_java/article/details/123063846 文章目录 1. 深度优先,用下面的儿子判断2. 深度优先&#xff0…

UE4 Niagara 关卡3.4官方案例解析

Texture sampling is only supported on the GPU at the moment.(纹理采样目前仅在GPU上受支持) 效果:textures can be referenced within GPU particle systems。this demo maps a texture to a grid of particles(纹理可以在GPU粒子系统中被引用这个演…

【3GPP】【核心网】【5G】5G核心网协议解析(二)(超详细)

5G UE 附着过程 UE AMF ----------------- 注册请求(Registration Request) ----------------------> <--------------- 鉴权请求(Authentication Request) ------…

折线图实现柱状阴影背景的demo

这个是一个由官网的基础折线图实现的流程&#xff0c;将涉及到的知识点附上个人浅薄的见解&#xff0c;源码在最后&#xff0c;需要的可自取。 折线图 成果展示代码注解参数backgroundColordataZoomlegendtitlexAxisyAxisgridseries 源码 成果展示 官网的基础折线图&#xff…

BetterDisplay Pro for Mac v2.0.11激活版:屏幕显示优化专家

BetterDisplay Pro是一款由waydabber开发的Mac平台上的显示器校准软件&#xff0c;可以帮助用户调整显示器的颜色和亮度&#xff0c;以获得更加真实、清晰和舒适的视觉体验。 软件下载&#xff1a;BetterDisplay Pro for Mac v2.0.11激活版下载 &#x1f50d; 精准校准&#xf…