Node.js与Webpack笔记(一)

news/2024/7/27 8:57:10/文章来源:https://blog.csdn.net/lklalmq/article/details/136377671

这里使用的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

补充:js代码可以省略.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的作用

调用 npm init 来初始化 package.json,它是 NodeJS 约定的用来存放项目的信息和配置等信息的文件,包描述文件,就像产品的说明书一样

最有用的应该是dependencies选项,可以用来帮助我们保存第三方包的依赖信息。
如果node_modules删除了也不用担心,只需要在控制面板中npm install就会自动把package.json中的dependencies中所有的依赖项全部都下载回来。

建议每个项目的根目录下都有一个package.json文件
建议执行npm install 包名的时候都加上–save选项,目的是用来保存依赖信息


  • 包:将模块、代码或者其他资料整合成一个文件夹,这个文件夹就叫包
  • 包分类:
    • 项目包:主要用于编写项目和业务逻辑
    • 软件包:封装工具和方法进行使用
  • 包要求:根目录中,必须有【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是什么?
  • NPM的全称是Node Package Manager,是随同NodeJS一起安装的包管理和分发工具,它很方便让JavaScript开发者下载、安装、上传以及管理已经安装的包。

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"},
...
NPM部分命令的缩写

 npm install 和 npm i 是一样
 --save 和 -S 是一样
 --save-dev 和 -D 是一样的

区别:

-S, --save 安装包信息将加入到dependencies(生产阶段的依赖,也就是项目运行时的依赖,就是程序上线后仍然需要依赖)

-D, --save-dev 安装包信息将加入到devDependencies(开发阶段的依赖,就是我们在开发过程中需要的依赖,只在开发阶段起作业的)

7.Node.js常用命令

下一篇: 

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

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

相关文章

2024_01蓝桥杯STEMA 考试 Scratch 中级试卷解析​​​​​​​

2024_01蓝桥杯STEMA 考试 Scratch 中级试卷解析一、选择题第一题、运行下列哪段程序后,蜜蜂会向上移动?(C ) 第二题、运行以下程序,输入下列哪个数后,角色会说“未通过”?( D) A. 90 B. 85 C. 60 D. 58第三题、运行以下程序后,n 的值为(B )。 A. 17 B…

Python教程,python从入门到精通 第1天 温习笔记

1.1 字面量 1.2 注释 1.3 变量 1.4 数据类型 1.5 数据类型转换 1.6 标识符 1.7 运算符 1.8 字符串的三种定义方式 1.9 字符串拼接 1.10 字符串格式化 1.11 掌握格式化字符串的过程中做数字的精度控制 1.12 掌握快速字符串格式化的方式 1.13 字符串格式化-表达式的格…

IDEA启动项目读取nacos乱码导致启动失败

新安装的2023社区版IDEA,启动项目报错。 forest: interceptors: - com.gdsz.b2b.frontend.api.Interceptors.ApiInterceptor org.yaml.snakeyaml.error.YAMLException: java.nio.charset.MalformedInputException: Input length 1 at org.yaml.snakeyaml.reader.S…

PostgreSQL容器安装

docker中的centos7中安装 选择对应的版本然后在容器中的centos7中执行下面命令 但是启动容器的时候需要注意 开启端口映射开启特权模式启动init进程 docker run -itd --name centos-postgresql -p 5433:5432 --privilegedtrue centos:centos7 /usr/sbin/init 启动然后进入后先…

Flutter Gradle下载失败的解决方案

Flutter Gradle可能会由于网络原因下载失败,这个时候我们可以首先下载Gradle,然后再进行配置。具体步骤如下: 第一步:下载对应版本的gradle 可以通过下面地址下载,也可以百度里面搜对应的版本 【极速下载】gradle各版本快速下载地…

JVM运行时数据区——堆

文章目录 1、堆的核心概述1.1、JVM实例与堆内存的对应关系1.2、堆与栈的关系1.3、JVM堆空间划分 2、设置堆内存大小与内存溢出2.1、设置堆内存大小2.2、内存溢出案例 3、新生代与老年代4、图解对象分配过程5、Minor GC、Major GC、Full GC5.1、GC的分类5.2、分代式GC策略的触发…

JAVA实战开源项目:生活废品回收系统(Vue+SpringBoot)

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、研究内容三、界面展示3.1 登录注册3.2 资源类型&资源品类模块3.3 回收机构模块3.4 资源求购/出售/交易单模块3.5 客服咨询模块 四、免责说明 一、摘要 1.1 项目介绍 生活废品回收系统是可持续发展的解决方案,旨在鼓…

egg如何写单元测试

优秀的代码需要有单元测试进行质量保证,每个测试用例都给应用的稳定性提供了一层保障。 测试目录结构 我们约定 test 目录为存放所有测试脚本的目录,测试所使用到的 fixtures 和相关辅助脚本都应该放在此目录下。 测试文件的目录和我们需要测试的文件目…

es集群的详细搭建过程

目录 一、VM配置二、集群搭建三、集群配置 一、VM配置 VM的安装 VMware Workstation 15 Pro的安装与破解 VM新建虚拟机 VM新建虚拟机 二、集群搭建 打开新建好的服务器,node1,使用xshell远程连接 下载es:https://www.elastic.co/cn/down…

wpf总结特点和控件通用属性

界面开发中winform开发应用程序比较方便快捷,但不够灵活,程序体积大,wpf可以解决这些问题,Windows Presentation Foundation (简称 WPF),WPF是微软Windows UI框架,.NET Framework 3.0的一部分。统一的编程模…

LInux-多线程基础概念

文章目录 前言预备页表详解缺页中断页表的映射 一、多线程是什么?轻量级进程 二、Pthread库pthread_create 前言 从本章的多线程开始,我们开始进入Linux系统的尾声,所以,在学习多线程的过程中,我们也会逐步对之前的内…

【C++】list模拟实现+反向迭代器

list模拟实现 list定义list用法list iterator的使用begin() end()rbegin()rend() reverse()sort()merge()unique()remove()splice() list模拟实现struct和class的区别list三个类模板默认成员函数构造函数拷贝构造函数赋值运算符重载析构函数 数据修改操作push_back()push_fron…

手机卡丢失了怎么办?挂失与补办全攻略来了

现在人人都离不开手机,手机改变了我们的生活,但是有时我们可能会遇到手机卡丢失或被盗的情况。这时,及时挂失并补办新的手机卡至关重要,以确保个人信息安全和通信畅通。这里小编将为您提供详细的手机卡挂失与补办流程指南&#xf…

C++ · 代码笔记3 · 引用

目录 前言011引用初探_引用与普通变量012引用初探_引用作为函数参数013引用初探_引用作为函数返回值014引用初探_引用返回局部函数造成的错误015引用初探_多级引用020引用与指针递增的区别030const与引用040使用const限定的函数形参引用 前言 本笔记所涉及到的编程环境与 《C …

基于Golang客户端实现Nacos服务注册发现和配置管理

基于Golang客户端实现Nacos服务注册发现和配置管理 背景 最近需要把Golang实现的一个web项目集成到基于Spring Cloud Alibaba的微服务体系中,走Spring Cloud Gateway网关路由实现统一的鉴权入口。 软件版本 组件名称组件版本Nacos2.2.0Go1.21.0Ginv1.9.1Nacos-s…

Elasticsearch:向量相似度计算 - 可笑的速度

作者:Chris Hegarty 任何向量数据库的核心都是距离函数,它确定两个向量的接近程度。 这些距离函数在索引和搜索期间执行多次。 当合并段或在图表中导航最近邻居时,大部分执行时间都花在比较向量的相似性上。 对这些距离函数进行微观优化是值…

MySQL 的基础操作

数据库的基础操作 1. 库操作2. 表的操作3. 数据类型 数据库是现代应用程序中至关重要的组成部分,通过数据库管理系统(DBMS)存储和管理数据。 1. 库操作 创建数据库 创建数据库是开始使用数据库的第一步。下面是一些常见的创建数据库的示例&a…

Redis与 Memcache区别

Redis与 Memcache区别 1 , Redis 和 Memcache 都是将数据存放在内存中,都是内存数据库。不过 Memcache 还可用于缓存 其他东西,例如图片、视频等等。 2 , Memcache 仅支持key-value结构的数据类型,Redis不仅仅支持简单的key-value类型的数据&…

【Vue】探究 Vue 2 与 Vue 3 生命周期:变化与延续

💗💗💗欢迎来到我的博客,你将找到有关如何使用技术解决问题的文章,也会找到某个技术的学习路线。无论你是何种职业,我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章,也欢…

springboot245科研项目验收管理系统

科研项目验收管理系统 摘 要 使用旧方法对科研项目信息进行系统化管理已经不再让人们信赖了,把现在的网络信息技术运用在科研项目信息的管理上面可以解决许多信息管理上面的难题,比如处理数据时间很长,数据存在错误不能及时纠正等问题。这次…