转载自：包管理工具npm、yarn以及nvm简介及简单使用

---

基本概念

在使用npm、yarn等包管理工具之前，我们首先了解一些基本的概念

模块（module）

通常以单个文件形式存在的功能片段，入口文件通常称之为入口模块或主模块

库（library，简称lib）

以一个或多个模块组成的完整功能块，为开发中某一方面的问题提供完整的解决方案

包（package）

包含元数据的库，这些元数据包括：名称、描述、git主页、许可证协议、作者、依赖等等

npm

npm 全称为 node package manager，即 node 包管理器，它运行在 node 环境中，让开发者可以用简单的方式完成包的查找、安装、更新、卸载、上传等操作。几乎可以这样认为，前端所有的包管理器都是基于 npm 的，目前，npm 即是一个包管理器，也是其他包管理的基石。

官网：https://www.npmjs.com/

这个网址非常常用，因为以后的常用插件都是在官网中查找，查看使用方法

yarn

yarn 是由Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具，它仍然使用 npm 的registry，不过提供了全新 CLI 来对包进行管理

yarn 官网：https://www.yarnpkg.com/zh-Hans/

在过去npm具有很多缺点，比如依赖目录嵌套太深遍历问题，npm是串行下载的下载速度慢等等问题，于是就有了yarn。

npm6 之后，可以说npm已经和yarn非常接近，甚至没有差距了。很多新的项目，又重新从yarn转回到npm。

cnpm

为解决国内用户连接npm registry缓慢的问题，淘宝搭建了自己的registry，即淘宝npm镜像源。

官网地址：https://npm.taobao.org/

但是现在并没有什么卵用了，因为npm已经支持修改registry了

nvm

nvm并非包管理器，它是用于管理多个node版本的工具。在实际的开发中，可能会出现多个项目分别使用的是不同的node版本，在这种场景下，管理不同的node版本就显得尤为重要。nvm就是用于切换版本的一个工具

下载和安装
最新版下载地址：https://github.com/coreybutler/nvm-windows/releases

下载nvm-setup.zip后，直接安装。以下命令判断是否安装成功

nvm -v

为了加快下载速度，建议设置淘宝镜像
node淘宝镜像：https://npm.taobao.org/mirrors/node/
npm淘宝镜像：https://npm.taobao.org/mirrors/npm/

nvm node_mirror https://npm.taobao.org/mirrors/node/
nvm npm_mirror https://npm.taobao.org/mirrors/npm/

节选自：nvm介绍、nvm下载安装及使用

---

一、nvm介绍
在工作中，我们可能同时在进行2个或者多个不同的项目开发，每个项目的需求不同，进而不同项目必须依赖不同版本的NodeJS运行环境，这种情况下，对于维护多个版本的node将会是一件非常麻烦的事情，nvm就是为解决这个问题而产生的，他可以方便的在同一台设备上进行多个node版本之间切换。

二、nvm下载安装及使用
2.1 nvm下载
安装包下载地址：https://github.com/coreybutler/nvm-windows/releases，windows系统下载nvm-setup.zip安装包

安装完毕后，找到安装的路径，一些简单配置，打开setting.txt

%AppData%/nvm

在后面添加这两行代码

node_mirror: https://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/

节选自：npm ERR， gyp ERR报错

---

npm ERR! gyp ERR! node -v v16.4.2
npm ERR! gyp ERR! node-gyp -v v7.1.2
npm ERR! gyp ERR! not ok

npm ERR! A complete log of this run can be found in:
npm ERR! D:\Program Files\nodejs\node_cache_logs\2021-11-22T07_05_15_354Z-debug.log

看了网上很多帖子，查到绝望也没解决，后面直接重新安装了node，nvm，再次运行就终于换个错误报了。
准备再次解决新问题时，大佬让我切换了一个node版本，12.16.0，这就是安装nvm的好处，切一下，再跑终于跑出来了，
nvm install v12.16.0
nvm use v12.16.0
虽然我也不知道这个是什么原理，但我这次切换版本解决了，只知道好多项目都要切换不同的node版本，难道是这个要根据开发该项目的人员开发时的版本才能跑起来，算了，继续做吧

节选自：使用create-react-app 构建react应用(react-scripts)

---

前言:

create-react-app 是一个全局的命令行工具用来创建一个新的项目

react-scripts 是一个生成的项目所需要的开发依赖

一般我们开始创建react web应用程序的时候,要自己通过 npm 或者 yarn 安装项目的全部依赖，再写webpack.config.js,一系列复杂的配置,搭建好开发环境后写src源代码。
现在 如果你正在搭建react运行环境，使用 create-react-app 去自动构建你的app程序。你的项目所在的文件夹下是没有配置文件。react-scripts 是唯一的 额外的 构建依赖在你的package.json中，你的运行环境将有每一个你需要用来构建一个现代React app应用程序。你需要的依赖，和在配置文件中编写的配置代码，react-scripts 都帮你写了，比如：react-scripts帮你自动下载需要的 webpack-dev-server 依赖，然后react-scripts自己写了一个nodejs服务端的脚本代码 start.js来 实例化 WebpackDevServer ，并且运行启动了一个使用 express 的Http服务器，现在你只需要专心写src源代码就可以了。省去了很多精力，最适合快速上手一个demo了。

react-scripts有以下支持，都帮你配置好了：
React, JSX, ES6, and Flow syntax support.
Language extras beyond ES6 like the object spread operator.
Import CSS and image files directly from JavaScript.
Autoprefixed CSS, so you don’t need -webkit or other prefixes.
A build script to bundle JS, CSS, and images for production, with sourcemaps.
A dev server that lints for common errors.

Getting Started

安装

npm install -g create-react-app

创建一个应用程序

create-react-app my-app
cd my-app

生成的目录结构

my-app/
  README.md
  node_modules/
  package.json
  .gitignore
  public/
    favicon.ico
    index.html
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

没有配置文件（webpack.config.js）
运行应用程序

npm run start

or

yarn start

在浏览器中打开

http://localhost:3000

转载自：npm，yarn如何查看源和换源

---

npm, yarn查看源和换源：

npm config get registry  // 查看npm当前镜像源

npm config set registry https://registry.npm.taobao.org/  // 设置npm镜像源为淘宝镜像

yarn config get registry  // 查看yarn当前镜像源

yarn config set registry https://registry.npm.taobao.org/  // 设置yarn镜像源为淘宝镜像

镜像源地址部分如下：

npm --- https://registry.npmjs.org/

cnpm --- https://r.cnpmjs.org/

taobao --- https://registry.npm.taobao.org/

nj --- https://registry.nodejitsu.com/

rednpm --- https://registry.mirror.cqupt.edu.cn/

npmMirror --- https://skimdb.npmjs.com/registry/

deunpm --- http://registry.enpmjs.org/