【转】nvm介绍、nvm下载安装及使用

节选自: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报错


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应用(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, 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/