首页 前端知识 前端—Node.js NPM

前端—Node.js NPM

2024-06-16 09:06:06 前端知识 前端哥 480 480 我要收藏

入门学习

一定要先下载 nvm,再用 nvm 下载 node。

简介

Node.js 是一个基于 Chrome V8引擎的 JavaScript运行环境:即 Node.js 内置了 Chrome 的 V8引擎,可以在 Node.js环境中直接运行 JavaScript程序。

既是一个 JavaScript引擎,也可以说是一个 JavaScript环境,通过它可直接运行 JavaScript。所以我们不需要引入 vue、axios等的 js文件了。

浏览器的内核包括两部分核心:DOM渲染引擎、JavaScript解析引擎。

通常他会被用来作一个BFF层,即 Backend For Frontend(服务于前端的后端),通俗的说是一个专门用于为前端业务提供数据的后端程序。

  • JavaScript运行环境

  • 模拟服务端效果

BFF

可以分别请求不同的服务接口,获取到数据,然后把数据封装整合后传到页面中显示

一个前端页面向 Service A、Service B 以及 Service C 发送请求,不同的微服务返回的值用于渲染页面中不同的组件。此时,每次访问该页面都需要发送 3个请求。所以我们需要一个服务来聚合 Service A、Service B 以及 Service C 响应的数据,这个服务层叫做 BFF。

BFF层的作用是让前端有能力自由组装后台数据,减少大量的业务沟通成本,加快业务的迭代速度。

NPM

简介

NPM 全称 Node Package Manager,是 Node.js 的包管理工具,功能很像后端的 Maven,是全球最大的模块生态系统,里面所有的模块都是开源免费的。

初始化配置

项目初始化(非必须)
#建立一个空文件夹,在命令提示符进入该文件夹  执行命令初始化
npm init
#按照提示输入相关信息,如果是用默认值则 直接回车即可。
#name: 项目名称
#version: 项目版本号
#description: 项目描述
#keywords: {Array}关键词,便于用户搜索到我们的项目
#最后会生成package.json文件,这个是包的配置文件,相当于maven的pom.xml
#我们之后也可以根据需要进行修改
#如果想直接生成 package.json 文件,那么可以使用命令 npm init -y
修改镜像(必须)

NPM官方的管理的包都是从 npm | Home 下载的,但是这个网站在国内速度很慢。

这里推荐使用淘宝 NPM 镜像 http://npm.taobao.org/ ,淘宝 NPM镜像是一个完整npmjs.com 镜像。

npm get registry 可以看到当前数据源
​
#经过下面的配置,以后所有的 npm install 都会经过淘宝的镜像地址下载
npm config set registry https://registry.npm.taobao.org
#查看npm配置信息
npm config list

npm install命令的使用

#使用 npm install 安装依赖包的最新版。最常用
#模块安装的位置:项目目录\node_modules
#同时package.json 文件中,依赖包会被添加到dependencies节点下,类似maven中的 <dependencies>
#默认参数:--save  简写  -S  将当前依赖保存在dependencies节点下
npm install jquery
​
#如果安装时想指定特定的版本
npm install jquery@2.1.x
​
#devDependencies节点:开发时的依赖包,项目打包到生产环境的时候不包含的依赖
#使用 -D参数将依赖添加到devDependencies节点
npm install --save-dev eslint
#或简写
npm i -D eslint
​
#全局安装
#Node.js全局安装的npm包和工具的位置:用户目录\AppData\Roaming\npm\node_modules
#一些命令行工具常使用全局安装的方式
npm install --global webpack
#或简写
npm install -g webpack
​
#npm管理的项目在备份和传输的时候一般不携带node_modules文件夹
#安装会自动在项目目录下添加 package-lock.json文件,这个文件帮助锁定安装包的版本
npm install #根据package.json中的配置下载依赖,初始化项目
​
#更新包(更新到最新版本)
npm update 包名
#全局更新
npm update -g 包名
#卸载包
npm uninstall 包名
#全局卸载
npm uninstall -g 包名

npm install 常用下载

// 全局安装 webpack,win+r cmd
npm install webpack -g
​
// 全局安装 @vue/cli-init
npm install -g @vue/cli-init
​
// 安装 element-ui,i 就是 install 的缩写
npm install element-ui = npm i element-ui

nvm-node

nvm 是 Node 的多版本管理工具,zip安装可以按照 B站视频来,收藏在学习里面了。

傻瓜式安装:

在windows下切换多个版本node.js最优解决方案无需配置环境变量_windows node版本切换-CSDN博客

Releases · coreybutler/nvm-windows (github.com)

zip安装:

Windows/macOS/Linux上安装Node.js,并使用NVM管理多版本Node.js - 雨月空间站

常用命令

// 查看已安装的 Node
nvm list
​
// 通过 nvm 查看可以安装的 Node 的各种版本
# macOS/Linux
nvm ls-remote --lts
# Windows
nvm list available
​
// nvm 安装 Node
node install 12.21
​
// nvm 使用 Node
nvm use 12.21
转载请注明出处或者链接地址:https://www.qianduange.cn//article/12416.html
标签
评论
发布的文章

JQuery中的load()、$

2024-05-10 08:05:15

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!