前端工程化05-初始前端工程化Node基本介绍安装配置基础知识

news2024/11/23 23:05:47

6、初始前端工程化

6.1、工程化概述

虽然前几篇我的目录标题写的前端工程化,但是那些东西并不属于前端工程化的内容,更倾向于是js、jq当中的东西,下面我们将接触真正的前端工程化。

前端工程化开发其实现在是离不开一个东西的,这个东西就是Node.js,早期角度来说这个东西一般是来做服务器开发的,目前的话已经不在局限于服务器开发了,现在整个前端开发过程中,已经完全离不开node.js了,特别是我们node.js帮我们管理了一些包工具npm/yarn/cnpm/npx/pnpm

pnpm在最近一年刚刚流行起来,这个包的历史是比较久远的,但是在最近一两年的时候才变的特别流行,22年几个月的时候势
头很猛,包括像Vue的源码里面,

他现在也切换到了pnpm``pnpm真的非常好用

nodejs包管理工具、node当中的基础知识、node当中模块化的使用、webpack打包器–>Vue Cli/React Cli,git源代码管理工具(版本控制工具)

6.2、Node.js是什么

  • 官方对于Node.js的定义

    • Node.js是一个基于V8 JavaScript引擎的JavaScript运行时环境。
    • image-20240503104520928
  • 也就是说Node.js基于V8引擎来执行JavaScript的代码,但是不仅仅只有V8引擎:

    • 前面我们知道V8可以嵌入到任何C ++应用程序中,无论是Chrome还是Node.js,事实上都是嵌入了V8引擎来执行 JavaScript代码;

    • 但是在Chrome浏览器中,还需要解析、渲染HTMLCSS等相关渲染引擎,另外还需要提供支持浏览器操作的API、浏览器 自己的事件循环等;

    • 另外,在Node.js中我们也需要进行一些额外的操作,比如文件系统读/写、网络IO、加密、压缩解压文件等操作

6.3、浏览器和Node.js架构的区别

  • 我们可以简单理解规划出Node.js和浏览器的差异:

    • image-20240503105242719
  • Nodejs是用什么语言来编写的?

    • js但不是js,更多的是C++/C语言

6.4、更详细的架构图

  • 我们来看一个单独的Node.js的架构图

    • 我们编写的JavaScript代码会经过V8引擎,再通过Node.js的Bindings,将任务放到Libuv的事件循环中;

    • libuvUnicorn Velociraptor—独角伶盗龙)是使用C语言编写的库;

    • libuv提供了事件循环、文件系统读写、网络IO、线程池等等内容;

image-20240503105720132

我们可以可以基于node去编写我们自己的应用程序,对于我们前端来说,我们编写我们自己的应用程序,肯定是采用js语言来编写,也就是我们可以通过

JavaScript这个语言去编写自己的应用程序,编写完应用程序他会交给V8引擎来处理我们的代码。进而V8引擎会帮助我们做一些翻译,比如说你写了一段代码如下

fs.read("abc.txt"),这段代码在我们的操作系统中是不认识的,这个时候的话他回经由我们的v8引擎来对我们的代码进行翻译,翻译完成后,他会由我们

Node.js中的LIBUV去调用系统系统操作的API,执行对应操作,FilE SYSTEM—>事件循环,进来的时候,我们把对应的回调函数放到了,事件队列里,出来的

时候、掉出对应的回调函数,交给V8引擎去执行

WORKER THREADS:工作线程,PROCESS:进程

6.5、Node.js的应用场景

1、Node.js的快速发展也让企业对Node.js技术越来越重视,在前端招聘中通常会对Node.js有一定的要求,特别是高级前端开发工程师Node.js更是必不可的技能

image-20240503113612372

2、在目前前端开发的库都是以node包的形式进行管理的。

3、npm,yarnpnpm工具成为前端开发使用最多的工具

4、越来越多的公司使用Node.js作为web服务器开发、中间件、代理服务器;

5、大量项目需要借助Node.js完成前后端渲染的同构应用;SSR Nuxt.js

6、资深前端工程师需要为项目编写脚本工具(前端工程师编写脚本通常会使用JavaScript,而不是Python或者shell);

7、很多企业在使用Electron来开发桌面应用程序;VsCode就是用Electron来编写的一个软件

6.6、Node.js的安装

node的官网:nodejs.orgnodejs.cn

Node.js是在2009年诞生的,目前最新的版本是分别是LTS 20.12.2以及Current 22.1.0:

image-20240503123850535

LTS版本:(Long-term support, 长期支持)相对稳定一些,推荐线上环境使用该版本;

Current版本:最新的Node版本,包含很多新特性;

这些我们选择什么版本呢?

如果你是学习使用,可以选择current版本;

如果你是公司开发,建议选择LTS版本(面向工作,选择LTS版本);

Node的安装方式有很多:

可以借助于一些操作系统上的软件管理工具,比如Mac上的homebrew,Linux上的yumdnf等;

也可以直接下载对应的安装包下载安装

我们选择下载安装,下载自己操作系统的安装包直接安装就可以了:

window选择.msi安装包,Mac选择.pkg安装包,Linux会在后续部署中讲解;.msi(microsoft install) 微软安装

安装过程中会配置环境变量(让我们可以在命令行使用);

并且会安装npm(Node Package Manager)工具;

.msi安装步骤

点击.msi安装程序,next下一步、选择安装位置、(包管理工具、node环境),C++编译程序(推荐安装),next—>install—>finish

按任意键继续,会继续安装一些额外的工具(会有一个黑窗口)让他自己跑就可以了

检查是否安装成功

#查看node的版本
node -v
node --version
#查看npm版本
npm --version

黑窗口那一步可能会安装失败、这是因为有些包需要翻墙下载。暂时用不到,用到了再处理这个问题,或者你像我一样打开你的科学上网工具,

以前运行Js代码我们怎么运行?

js文件,在html页面中引入这个文件、然后浏览器中打开这个文件

现在怎么运行Js代码怎么运行?

windows切换盘符,>F:

切换到对应的js父级目录(输入a,按下tab键)

node abc.js

为什么能运行js,因为node环境中有,v8引擎

6.7、Node.js的版本管理工具

公司现在使用的node版本,14、16等

但是现实的前端开发中、我们可能需要同时开发多个项目,且多个项目使用的node版本还不一样。那我们能不能同时安装多个node。默认情况下,安装第二个版

本时。会自动提示是否卸载上次安装的node,所以采用手动安装的方式是不可以达到我们想要的目的,做不到灵活的切换node版本

市面上有很多的版本管理工具、比如n/nvm ,n就是Node的一个模块,他的作者是tjtj全称为TJ Holowaychuk(Express框架的作者)

nvm的作者就是Jordan Harbandqs模块的主要维护者,以前这个qs模块也是由TJ Holowaychuk 来维护的。

据说nNVM好用,这句话出自王老师之口,具体我也没有测试过没发言权

但是不管是n还是nvm都有一个很大的缺陷,就是并不支持windows系统,这两个工具就是在mac系统下使用的

社区上边有天才,有人发布了nvm-windows nvm对应的windows版本呢

https://github.com/nvm-sh/nvm

https://github.com/coreybutler/nvm-windows

1、采用NVM来切换Node版本

#安装nvm最新版本
nvm install latesst
#查看已经下载的nvm列表
nvm list
#切换node
nvm use切换版本

2、采用n版本管理工具

安装n:直接使用npm安装

#安装工具n
npm install -g n
#查看安装的版本
n --version

安装最新的lts版本

前面添加的sudo是权限问题;

可以两个版本都安装,之后我们可以通过n快速在两个版本间切换;

# 安装最新的lts版本
n lts
# 安装最新版本
n latest
# 查看所有的版本
n

windows的黑窗口操作是非常不好用的,可以采用git的黑窗口git bash

3、采用volta-node版本管理器

https://www.jb51.net/javascript/3152840cs.htm

6.8、node.js基础知识

1、JavaScript代码执行

如果我们编写一个js文件,里面存放JavaScript代码,如何来执行它呢?

目前我们知道有两种方式可以执行:

  • 将代码交给浏览器执行;
  • 将代码载入到node环境中执行;

如果我们希望把代码交给浏览器执行:

  • 需要通过让浏览器加载、解析html代码,所以我们需要创建一个html文件;
  • html中通过script标签,引入js文件;
  • 当浏览器遇到script标签时,就会根据src加载、执行JavaScript代码;

image-20240503145808777

如果我们希望把js文件交给node执行:

  • 首先电脑上需要安装Node.js环境,安装过程中会自动配置环境变量;

  • 可以通过终端命令node js文件的方式来载入和执行对应的js文件;

    image-20240503145828638

选择对应文件夹、右键再集成终端中打开,使用命令node index.js文件

开始可能会显示无法识别的命令,因为开始默认使用的是powershell,这个东西默认调用一些环境是有些问题的

image-20240503150323008

还是会出现问题如下

image-20240503150400196

git bash–>cmd–>powershell

2、Node.js的输入和输出

1、node输出
  • console.log
    • 最常用的输入内容的方式:console.log
  • console.clear
    • 清空控制台:console.clear
  • console.trace
    • 打印函数的调用栈:console.trace

还有一些其他的方法,其他的一些console方法,可以自己在下面学习研究一下。

https://nodejs.org/dist/latest-v16.x/docs/api/console.html

2、node输入

正常情况下执行一个node程序,直接跟上我们对应的文件即可:

node index.js

但是,在某些情况下执行node程序的过程中,我们可能希望给node传递一些参数:

node index.js env=development coderwhy

如果我们这样来使用程序,就意味着我们需要在程序中获取到传递的参数:

  • 获取参数其实是在process的内置对象中的;
  • 如果我们直接打印这个内置对象,它里面包含特别的信息:
    • ✓ 其他的一些信息,比如版本、操作系统等大家可以自行查看,后面用到一些其他的我们还会提到;

现在,我们先找到其中的argv属性:

  • 我们发现它是一个数组,里面包含了我们需要的参数;

    image-20240503152711677

3、为什么叫argv呢?

你可能有个疑问,为什么叫argv呢?

在C/C++程序中的main函数中,实际上可以获取到两个参数:

  • argc:argument counter的缩写,传递参数的个数;
  • argv:argument vector(向量、矢量)的缩写,传入的具体参数。
    • vector翻译过来是矢量的意思,在程序中表示的是一种数据结构。
    • 在C++、Java中都有这种数据结构,是一种数组结构;
    • 在JavaScript中也是一个数组,里面存储一些参数信息;

我们可以在代码中,将这些参数信息遍历出来,使用

image-20240503152953308

3、Node.js中的REPL

  • 什么是REPL呢?感觉挺高大上

    • REPLRead-Eval-Print Loop的简称,翻译为“读取-求值-输出”循环;
    • REPL是一个简单的、交互式的编程环境
  • 事实上,我们浏览器的console就可以看成一个REPL。

  • Node也给我们提供了一个REPL环境,我们可以在其中演练简单的代码。

image-20240503153647510

4、Node.js常见的全局对象一

node当中没有windows全局对象、但是有global

Node中给我们提供了一些全局对象,方便我们进行一些操作:

  • 这些全局对象,我们并不需要从一开始全部一个个学习;
  • 某些全局对象并不常用;
  • 某些全局对象我们会在后续学习中讲到;
    • ✓ 比如module、exports、require()会在模块化中讲到;
    • ✓ 比如Buffer后续会专门讲到;

image-20240503155426213

5、Node.js 特殊的全局对象

为什么我称之为特殊的全局对象呢?

  • 这些全局对象实际上是模块中的变量,只是每个模块都有,看来像是全局变量;
  • 在命令行交互中是不可以使用的;
  • 包括:__dirname__filenameexportsmodulerequire()

__dirname:获取当前文件所在的路径?

  • 注意:不包括后面的文件名

__filename:获取当前文件所在的路径和文件名称:

  • 注意:包括后面的文件名称

image-20240503155723633

6、Node.js常见的全局对象二

process对象:process提供了Node进程中相关的信息:

  • 比如Node的运行环境、参数信息等;
  • 后面在项目中,我也会讲解,如何将一些环境变量读取到 process 的 env 中;

console对象:提供了简单的调试控制台,在前面讲解输入内容时已经学习过了。

  • 更加详细的查看官网文档:https://nodejs.org/api/console.html

定时器函数:在Node中使用定时器有好几种方式

  • setTimeout(callback, delay[, ...args]):callback在delay毫秒后执行一次;
  • setInterval(callback, delay[, ...args]):callback每delay毫秒重复执行一次;
  • setImmediate(callback[, ...args])callbackI / O事件后的回调的“立即”执行;
    • ✓ 这里先不展开讨论它和setTimeout(callback, 0)之间的区别;
    • ✓ 因为它涉及到事件循环的阶段问题,我会在后续详细讲解事件循环相关的知识;
  • process.nextTick(callback[, ...args]):添加到下一次tick队列中;
    • √ 具体的讲解,也放到事件循环中说明;

7、global对象

global是一个全局对象,事实上前端我们提到的processconsolesetTimeout等都有被放到global中:

我们之前讲过:在新的标准中还有一个globalThis,也是指向全局对象的;

类似于浏览器中的window;

image-20240503160212999

8、global和window的区别

在浏览器中,全局变量都是在window上的,比如有documentsetIntervalsetTimeoutalertconsole等等

在Node中,我们也有一个global属性,并且看起来它里面有很多其他对象。

但是在浏览器中执行的JavaScript代码,如果我们在顶级范围内通过var定义的一个属性,默认会被添加到window对象上:

var name='有些人真的很让我反胃'
console.log(windows.name) //有些人真的很让我反胃

但是在node中,我们通过var定义一个变量,它只是在当前模块中有一个变量,不会放到全局中:

var name='coderwhy'
console.log(global.name);//undefined

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【CTF Reverse】XCTF GFSJ0487 game Writeup(反编译+逆向工程)

game 菜鸡最近迷上了玩游戏,但它总是赢不了,你可以帮他获胜吗 解法 放进 exeinfope 中分析。 拖入 IDA 中。shift f12 查看字符串。ctrl f 搜索 flag。 DATA XREF: sub_45E94028↑o Function 中搜索 sub_45E940。 flag 应该是在这里算出来的&#xff…

String的深入时间比较器System/数学相关类

String的深入&时间&比较器&System/数学相关类 文章目录 String的深入&时间&比较器&System/数学相关类前言一、字符串String不可变1.1 String理解&赋值&存储1.2 String构造器&不同类型转换1.3 String常用API1.4 常见的算法题目(反转/字符排…

手机看广告项目2.0,单机版盈利30-50,提现马上到账

项目简介: 这个项目自去年起已经启动,虽然单台手机的日常盈利可能并不高,但通过在多台手机上运行,每天赚取三位数的收入相对容易。 该项目的优势在于可以随时操作,非常适合作为副业。 从项目准备到维护设备&#xf…

Pytorch学习笔记——TensorBoard的初使用

1、TensorBoard介绍 TensorBoard是TensorFlow的可视化工具,但它也可以与PyTorch结合使用。TensorBoard提供了一个Web界面,可以展示你训练过程中的各种信息,如损失值、准确度、权重分布等,更好地帮助开发者理解和调试模型。 Tenso…

css响应式布局左、右上、右中布局

一、布局效果 二、布局代码 <div class"parent"><div class"left">菜单</div><div class"right"><div class"right-top">顶部导航</div><div class"right-content"></div>…

RAG应用全流程

RAG全流程 前提训练一个语义模型&#xff08;高精度&#xff0c;低精度&#xff09;训练一个大模型一个知识库一个精度高知识向量库&#xff08;知识分割后输入高精度语义模型得到&#xff09;一个精度低知识向量库&#xff08;知识分割后输入低精度语义模型得到&#xff09; 应…

粗俗理解多层感知器

一、前言 参考资料和图片均来自以下链接&#xff1a;https://www.youtube.com/watch?vaircAruvnKk&listPLZHQObOWTQDNU6R1_67000Dx_ZCJB-3pihttps://www.youtube.com/watch?vbfmFfD2RIcghttps://www.youtube.com/watch?vKuXjwB4LzSAhttps://www.youtube.com/watch?vIl…

C#知识|事件集中响应,多个按钮关联同一事件(实例练习)

哈喽&#xff0c;你好&#xff0c;我是雷工&#xff01; 本节学习窗体Controls集合、控件事件的统一关联及如何优化重复代码。 01 事件集中响应 原理&#xff1a;就是相同的控件&#xff0c;可以关联同一个事件响应方法。 02 示例演示 2.1、示例功能 该示例实现窗体中选择…

433M无线射频信号控制继电器--第三天

1.先sbit&#xff08;位地址访问p1^1,p1^2,p1^3口&#xff09; 当按下A键时D0输入高电平&#xff0c;继电器IO口导通&#xff0c;则接通电源或者灯亮 当按下C键时D1口输入高电平&#xff0c;继电器IO口为高电平&#xff0c;不导通 2.433m无线模块知识 433m无线模块基础知识 -…

容斥原理以及Nim基础(异或,SG函数)

容斥原理&#xff1a; 容斥的复杂度为O&#xff08;2^m)&#xff0c;所以可以通过&#xff0c;对于实现&#xff0c;一共2^n-1种&#xff0c;我们可以用二进制来实现 下面是AC代码&#xff1a; #include<bits/stdc.h> using namespace std; typedef long long LL; cons…

奈氏准则和香农定理

一、奈奎斯特和香农 哈里奈奎斯特&#xff08;Harry Nyquist&#xff09;(左) 克劳德艾尔伍德香农&#xff08;Claude Elwood Shannon&#xff09;(右) 我们应该在心里记住他们&#xff0c;记住所有为人类伟大事业做出贡献的人&#xff0c;因为他们我们的生活变得越来越精彩&…

数字旅游以科技创新为核心竞争力:推动旅游服务的智能化、高效化,满足游客日益增长的旅游需求

一、引言 随着科技的飞速发展&#xff0c;数字旅游作为旅游业与信息技术结合的产物&#xff0c;正以其独特的魅力改变着传统旅游业的格局。科技创新作为数字旅游的核心竞争力&#xff0c;不仅推动了旅游服务的智能化、高效化&#xff0c;更满足了游客日益增长的旅游需求。本文…

挑战一周完成Vue3项目Day5:数据大屏+菜单权限+按钮权限

一、数据大屏 国内echarts镜像站&#xff1a;ISQQW.COM x ECharts 文档&#xff08;国内同步镜像&#xff09; - 配置项 echarts图表集&#xff1a;echarts图表集 1.数据大屏适配问题解决 &#xff08;1&#xff09;vw与vh单位解决适配问题 vw/vh&#xff1a;新增单位&…

顺序循环队列--c语言实现

#include <stdio.h> #include <stdlib.h> #include <stdbool.h>#define MAX_SIZE 100 // 假设队列的最大长度为100// 队列结构体 typedef struct {int data[MAX_SIZE]; // 存储队列元素的数组int front; // 队头指针int rear; // 队尾指针 } SeqQueue;// 初…

AI学习指南-专栏前言

前言 人工智能AI作为当下最火热的技术之一&#xff0c;我们每个人似乎都被动的置身于这场科技变革中&#xff0c;AI越来越多的出现在我们的身边&#xff0c;也总能听到这样的言论&#xff0c;例如“N年后AI会取代某某行业”&#xff0c;AI出现之后&#xff0c;好像大多数人都陷…

【研发日记】Matlab/Simulink避坑指南(十一)——Delay周期Bug

文章目录 前言 背景介绍 问题描述 分析排查 解决方案 总结归纳 前言 见《研发日记&#xff0c;Matlab/Simulink避坑指南(六)——字节分割Bug》 见《研发日记&#xff0c;Matlab/Simulink避坑指南(七)——数据溢出钳位Bug》 见《研发日记&#xff0c;Matlab/Simulink避坑指…

图像分割模型实际分隔效果测试(Clipseg + GroundingDINO + Yoloworld)

✨背景 对于设计的工作流来说&#xff0c;智能图像分割也是一个很重要的课题&#xff0c;尤其是像照片换脸、照片高清写真等等的工作流&#xff0c;可能要多次把人物的脸部或者手部抠图出来进行合成&#xff0c;工作流如果可以直接智能分割图像并合成&#xff0c;就可以避免自…

20240503安装HEVC解码器播放H265格式的8K视频

20240503安装HEVC解码器播放H265格式的8K视频 2024/5/3 9:55 缘起&#xff1a;由于youtube支持8K视频了&#xff0c;想尝尝鲜&#xff01; 主摄像头当然是选择SONY的【夜摄/弱光场景】&#xff0c;根据优选&#xff0c;小米&#xff08;MI&#xff09;13Ultra 最佳了。 在开始播…

设计模式动态代理

什么是设计模式? 一个问题通常有n种解法&#xff0c;其中肯定有一种解法是最优的&#xff0c;这个最优的解法被人总结出来了&#xff0c;称之为设计模式。 设计模式有20多种&#xff0c;对应20多种软件开发中会遇到的问题。 关于设计模式的学习&#xff0c;主要学什么&#…

项目管理-项目范围管理2/2

项目管理&#xff1a;每天进步一点点~ 活到老&#xff0c;学到老 ヾ(◍∇◍)&#xff89;&#xff9e; 何时学习都不晚&#xff0c;加油 项目范围管理&#xff0c;过程 6个&#xff0c;包括“规收定 创确控”&#xff1a; 规划范围管理收集需求定义范围创建WBS确认范围控制…