npm是什么？如何安装Node.js和npm？

一：npm是什么？

程序员自古以来就有社区文化，社区的意思是：拥有共同职业或兴趣的人们，自发组织在一起，通过分享信息和资源进行合作。虚拟社区的参与者经常会在线讨论相关话题，或访问某些网站。

前端程序员也有社区，世界上最大的前端社区应该就是 GitHub了。前端通过 GitHub来

• 1. 分享源代码（线上代码仓库）
• 2. 讨论问题（Issue 列表）
• 3. 收集学习资源和常去的网站（比如我收集的优质中文前端博客）

加入社区最大的好处之一是，你可以使用别人贡献的代码，你也可以贡献代码给别人用。

问题来了，共享代码：前端是怎么共享代码的呢？
在 GitHub还没有兴起的年代，前端是通过网址来共享代码。比如你想使用 jQuery，那么你点击jQuery网站上提供的链接就可以下载jQuery，放到自己的网站上使用。

当一个网站依赖的代码越来越多，程序员发现这是一件很麻烦的事情：

• 去 jQuery 官网下载 jQuery
• 去 BootStrap 官网下载 BootStrap
• 去 Underscore 官网下载 Underscore
  ……

有些程序员就受不鸟了，一个拥有三大美德的程序员 Isaac Z. Schlueter （以下简称 Isaaz）给出一个解决方案：用一个工具把这些代码集中到一起来管理吧！

这个工具就是他用 JavaScript （运行在 Node.js 上）写的npm，全称是Node Package Manager。npm自node.js v0.6.x版以后就内嵌在node.js中，所以要安装npm，安装node.js就可以了。

简单一句话：npm就是类似iOS的cocopods工具

作为前端开发者，node和npm安装必不可少。然而有时会因为安装新的app（如MacPorts，慎装，它会修改基本环境变量以及npm的全局设置等）导致版本环境混乱，有2种方式有效管理：

特别推荐安装安装nvm来管理Node版本；
其次推荐Homebrew来对node和npm版本进行管理。

本次介绍，不用这些去管理npm,直接去官网下载npm包，安装就行。

二：如何安装？

大概有两个方法：

①下载 Node.js的apk安装包
②利用brew安装
③利用nvm安装

方法1：下载 Node.js的apk安装包

1，下载 Node.js中文网apk安装包

image.png

2，像安装其他软件一样安装即可

image.png

3，安装好后在终端查看是否安装成功

npm -v
//我这里是打印 7.20.3 最新好像是7.20.6
node -v
//我这里是打印 16.4.0 

4，npm install
这步就是类似iOS的cocopods的pod install。
如果有报错什么的，再去百度

5，运行项目

npm run dev
//或者命令
npm  start

方法2：利用brew安装

brew install node

查看npm的最新版本

 npm -g outdated

image.png

更新到最新的版本

sudo npm -g install npm@6.1.0

若更新过程中报错, 将这个路径下面的.npm.DELETE文件夹删除， 重新安装即可

ENOTEMPTY: directory not empty, rename '/usr/local/lib/node_modules/npm' -> '/usr/local/lib/node_modules/.npm.DELETE'

这个过程中也可能会遇到下面的错误

-bash: /usr/local/bin/npm: No such file or directory

执行下面的四句命令， 重新安装一下node即可

$ brew update
$ brew uninstall node 
$ brew install node
$ sudo brew postinstall node 
# brew error message provided this recommendation; only worked with sudo

方法3：利用nvm安装

首先安装nvm。
1.使用curl或wget安装nvm

curl -L -o- [http://build.sankuai.com/nvm/install](http://build.sankuai.com/nvm/install) | bash

上述失败了的话试试这个：

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.32.1/install.sh | bash

上述再失败了的话试试这个：

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash

nvm 常用命令

nvm install xxx      //安装xxx版本号
nvm use xxx        //设置使用xxx版本号
nvm ls          //所有已安装的node版本号
nvm alias default v10.16.0 //nvm设置默认node版本号

安装node及npm

nvm install v8.5.0

将镜像源设置为淘宝镜像

export NVM_NODEJS_ORG_MIRROR=https://npm.taobao.org/mirrors/node
npm --registry=https://registry.npm.taobao.org

三： 诡异报错和处理方法

命令：

npm run dev 

报错：

Error: Cannot find module 'webpack/bin/config-yargs'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
    at Function.Module._load (internal/modules/cjs/loader.js:562:25)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (/Users/hll/Desktop/gitlab/crm3/hll-crm-web/node_modules/webpack-dev-server/bin/webpack-dev-server.js:56:1)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! huo-admin@1.0.0 dev: `cross-env BABEL_ENV=development webpack-dev-server --max_old_space_size=6144 --colors --config config/webpack.dev.config.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the huo-admin@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/hll/.npm/_logs/2021-08-20T06_58_46_914Z-debug.log

注意这个报错，如果要百度查询，需要搜这个

Error: Cannot find module 'webpack/bin/config-yargs'

而不是搜

dev: `cross-env BABEL_ENV=development webpack-dev-server --max_old_space_size=6144 --colors --config config/webpack.dev.config.js`

下面来分析下原因和解决方法：
原因:
这个就是目前版本的webpack-dev-server@2.11.5不支持 webpack@4.32.2

解决:
重装一个webpack-dev-server是3.0版本以上就兼容 :

npm i webpack-dev-server@3.3.2 -D

此时, 就可以了... 如果还报错, 参照最后一条!
webpack4.0以上都要安装webpack-cli, 否则报错如下:

Error: Cannot find module 'webpack-cli/bin/config-yargs'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
    at Function.Module._load (internal/modules/cjs/loader.js:507:25)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)

这时, 需要安装webpack-cli :

npm i  webpack-cli -D

这个具体看看链接：https://www.cnblogs.com/zixuan00/p/10974970.html