大前端 - 前端高级进阶

# Node

# 什么是 Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。

通俗的理解：Node.js 为 JavaScript 代码的正常运行，提供的必要的环境。

Node.js 的官网地址: https://nodejs.org/zh-cn/

# Node运行时

Node.js runtime architecture

注意：

  • Node.js 是 JavaScript 的后端运行环境。（正常情况下，Nodejs要安装到服务器上）
  • Node.js 中无法调用 DOM 和 BOM 等 浏览器内置 API

# 安装Node

方案：

  • 官网下载直装：https://nodejs.org/zh-cn/download/ (opens new window)

  • 使用nvm（Node Version Management，node版本管理工具）安装**（推荐）**

    配置nvm环境，找到如下位置的文件（如果没有则新建）：

    • M1：~/.zprofile
    • Intel：~/.bash_profile， ~/.zshrc，~/.profile或者 ~/.bashrc

    添加如下内容：

    export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

    并重启终端工具。

    常见nvm命令(Mac)：

    # 查看有哪些可以下载的版本 mac&Linux
nvm ls-remote

# 安装指定的版本
nvm install v16.14.0

# 使用特定的版本
nvm use v16.14.0

# 设置别名，对应的是nvm unalias mac&Linux
nvm alias v16 v16.14.0
# 设置了之后就可以使用别名了
nvm use v16

# 设置默认的版本 mac&Linux
nvm alias default v16.14.0

# 包管理器npm&yarn&pnpm

介绍

  • npm：node默认的包管理工具(自带)

    npm（node package manage）node 包 管理器，管理node包的工具。

    包是什么？包就是模块，一个包可以包括一个或多个模块。

    npm不需要额外的安装，只需要安装node，即会自动的安装npm。

  • yarn：特点扁平化依赖，并行安装，本地缓存

    npm i -g yarn

# 这样才能国内加速安装
yarn config set registry https://registry.npmmirror.com

# yarn的命令与npm有出入
# 参考：http://www.imooc.com/wiki/yarnlesson

  • pnpm：特点

    • 节约磁盘空间，缓存技术加持
    • 速度快
    • 支持 monorepo
    • 安全性高
    npm i -g pnpm

    官方地址：https://pnpm.io/zh/motivation (opens new window)

    核心：创建非扁平化的 node_modules 文件夹

    img

    使用 npm 或 Yarn Classic 安装依赖项时，所有包都被提升到模块目录的根目录。 因此，项目可以访问到未被添加进当前项目的依赖。

    默认情况下，pnpm 使用软链的方式将项目的直接依赖添加进模块文件夹的根目录。

    如果你想了解 pnpm 关于 node_modules 结构设计的更多细节，以及为什么它在 Node.js 生态成为了后起之秀，请参考：

下载速度对比：

Snipaste_2022-02-25_16-53-34

node12下，benchmark对比：

Snipaste_2022-02-25_16-53-56

# npm国内加速

初始化之后，就可以在当前文件夹中安装第三方模块了

# 直接修改npm源
# 参考：https://npmmirror.com/
npm config set registry http://mirrors.cloud.tencent.com/npm/
npm config set registry https://registry.npmmirror.com/
npm config set registry https://mirrors.huaweicloud.com/repository/npm/

# 使用cnpm
npm install -g cnpm --registry=https://registry.npmmirror.com
cnpm install xxx

# 使用nrm
npm install -g nrm --registry=https://registry.npmmirror.com
nrm use taobao

# 常见命令

# 正常的下载安装
npm install 模块名

# 简写install为i
npm i 模块名

# 一次性安装多个模块
npm i 模块名 模块名 模块名

# 卸载模块
npm uninstall 模块名

关于本地模块的说明

  • 下载安装的模块，存放在当前文件夹的 node_modules 文件夹中，同时还会生成一个记录下载的文件 package-lock.json
  • 下载的模块，在哪里可以使用
    • 在当前文件夹
    • 在当前文件夹的子文件夹
    • 在当前文件夹的子文件夹的子文件夹
    • ......
    • 翻过来讲，当查找一个模块的时候，会在当前文件夹的 node_modules 文件夹查找，如果找不到，则去上层文件夹的node_modules文件夹中查找，.....依次类推。

重要：代码文件夹不能有中文；代码文件夹不能和模块名同名。

← NPM包管理工具 →