Web前端开发技术

Appearance

node环境构建 ​

元信息 ​

  • 目标：装好并管好 Node 开发环境——Node/npm 安装、国内镜像源切换、包的安装卸载升级，以及用 nvm 等工具管理多版本
  • 关键概念：node安装、npm、registry镜像、全局安装、nvm、pnpm
  • 关联阶段：cp3
  • 常见误区：以为 npm 慢是网络必然（切换国内镜像源即可大幅提速）；以为 -g 全局安装的库能被项目 require（全局装的是命令行工具，项目依赖装本地 node_modules）；以为一台机器只能装一个 Node 版本（nvm/mise 可多版本按需切换）

安装 Node for windows ​

  • 官网下载最新安装包
  • 安装至指定目录，最好位于非中文目录下,譬如 D:\node 或 D:\env\node
  • 打开CMD窗口，执行命令node -v 查看node版本，确定安装成功

node.js安装

强烈推荐你在linux或WSL下安装和使用node !

NPM (Node Package Manager) ​

npm是node环境下的包管理工具，包管理工具提供了自动化进行包安装、包删除、包升级等管理功能，类似于ubuntu下的apt、php下的compose之类工具

npm 一般无需安装，它是Node.js默认集成的工具包

由于node包的仓库位置在国外网段，下载速度可能较慢，建议切换到国内仓库镜像源,如淘宝源

bash
npm config set registry https://registry.npmmirror.com/

npm 配置 https://blog.csdn.net/IT_Dilraba_bin/article/details/125656482

包(package)，不同于<script src="http://jquery.com/jquery.js">这类代码库，而是对代码库按一定的格式进行打包后形成的代码包。使用npm工具进行管理的包的格式，称之为commonjs规范。 此处先掌握用法，具体细节容后再讨论

使用 npm 管理已安装的前端工具包 ​

  1. 卸载包
bash
npm uninstall packageName
  1. 更新包
bash
npm update packageName

使用 npm 安装前端工具包 ​

可以在npm 的官网 上查找支持npm包格式的软件库

bash
npm i jquery    // 下载和安装 jQuery 包
npm i jquery@3.0.0  // 安装指定版本
npm i jquery --save-dev    // 记入 devDependencies（仅开发期需要的依赖）

下载完成后，项目根目录下会自动新建一个 node_modules 文件夹，用来存放已下载的软件包。

如果安装的不是程序库而是工具，则一般采用全局安装，即npm -g的方式，将会安装至系统指定的全局目录，并且可在任何位置中呼叫和使用该工具的命令行。

npm install -g 中的-g参数，即global之意，表示将软件包安装到系统的全局空间，通常这种软件包都包含有一个可执行的文件，即可作为一个命令行工具独立运行，且可以全局调用(需要将该命令行执行文件的所在目录放置于系统的路径变量之中)

如果不带-g 参数则表示安装至当前目录的node_modules目录下，一般来说，这类软件包都属于程序库之类，供其它程序引用和调用。

YARN (Yet Another Package Manager) ​

yarn 是类似npm的另一种包管理工具，功能新，速度快，可考虑使用。

npm -g yarn

网上资料通常以npm为例，不过yarn的命令行和npm基本相似。

yarn安装

pnpm ​

最新的npm包管理工具，推荐使用 https://www.pnpm.cn/

NVM (Node Version Manager) ​

nvm 是node版本管理器。在有些场景下(调试、尝新或者兼容历史项目)，需要在同一机器上安装多个node版本，nvm可以帮助我们安装多个node版本，并按需切换

nvm https://segmentfault.com/a/1190000007612011
nvm for windows https://github.com/coreybutler/nvm-windows

其它版本管理工具 ​

  • mise 最新的通用多版本环境管理工具，推荐！
  • asdf, 通用的多版本环境管理工具，支持多种语言，不限于js
  • volta,无忧的JavaScript工具管理器-自动切换到正确版本的全局工具，例如node / typescript / yarn
  • https://github.com/volta-cli/volta