NodeJS安装+NPM配置

本是古典何须时尚 2022-06-17 07:15 411阅读 0赞

*最近更新时间：2018年8月3日23:49:25*

[《我的博客地图》][Link 1]

经验积累的过程：学习，实践，自我检验，再学习，再实践，融会贯通。

随着前端生态圈的扩大，新技术日新月异，层出不穷，作为一名前端雏鸟，要快速融入高速发展的生态中，必须具备明确的学习方向和方法。找对方向，就是落实规划职业发展方向；找对方法，就是通过正确的方法学习权威的官方和民间资料。

1、NodeJS简介

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。   
    Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。   
    Node.js 的包管理器 npm，是全球最大的开源库生态系统。

2、NodeJS安装

官方下载msi安装包，如：node-v7.9.0-x64.msi

MSI（Microsoft installer）文件是Windows installer的数据包，它实际上是一个数据库，包含安装一种产品所需要的信息和在很多安装情形下安装（和卸载）程序所需的指令和数据。MSI文件将程序的组成文件与功能关联起来。此外，它还包含有关安装过程本身的信息：如安装序列、目标文件夹路径、系统依赖项、安装选项和控制安装过程的属性。（源自[百度百科][Link 2]）

双击执行安装，路径可自定义，如：D:\\develop\\nodejs

检验是否安装成功：win+r，输入cmd回车，进入Windows命令窗口，输入node -v，出现版本信息即安装成功

3、NPM简介

NPM，Node Package Manager，是随同NodeJS一起安装的包管理和分发工具，它很方便让JavaScript开发者下载、安装、上传以及管理已经安装的包。

4、NPM安装

执行node包msi安装成功后，npm已经集成在node包中并一并安装

检验是否安装成功：win+r，输入cmd回车，进入Windows命令窗口，输入npm -v，出现版本信息即安装成功

5、NPM配置

在node主目录下配置 全局模块 安装路径：npm config set prefix D:\\develop\\nodejs\\node\_global

在node主目录下配置 cache缓存 路径：npm config set cache D:\\develop\\nodejs\\node\_cache

配置 全局模块 环境变量：我的电脑-属性-高级系统设置-高级-环境变量，进入环境变量对话框。

①：在系统变量下新建"NODE\_PATH"，“D:\\develop\\nodejs\\node\_global\\node\_modules\\”，这种方法用来指定NODE\_PATH环境变量，并且用 ; 分割多个不同的目录（引申：NODE\_PATH 是 NODE 中用来 寻找模块所提供的路径注册环境变量 ，NODE\_PATH 实现 多个项目 模块复用 的最佳实践方案。node 的包加载机制，从项目的根位置递归搜寻  node\_modules 目录，直到文件系统根目录的  node\_modules ，如果还没有查找到指定模块的话，就会去 NODE\_PATH中注册的路径中查找 。基于 nodejs 的包加载路径搜索算法，我们可以 采用全局安装的方式，将我们的包安装到全局，这样，多个项目可以共享全局中的依赖包。）

检查 NODE\_PATH 是否配置成功：win+r，输入cmd回车，进入Windows命令窗口，执行npm install express -g，安装express模块成功后，输入node，进入node的REPL环境，输入require('express')，如果出现express模块相关信息即配置成功

②：在用户变量"PATH"末尾追加，“D:\\develop\\nodejs\\node\_global\\”（引申：操作系统 PATH 环境变量作用，当系统调用一个命令的时候，就会在PATH变量中注册的路径中寻找，如果注册的路径中有就调用，否则提示命令没找到，“xxx不是内部或外部命令，也不是可运行的程序或批处理文件”，原因是没有配环境变量PATH）

检查 PATH 是否配置成功：win+r，输入cmd回车，进入Windows命令窗口，对于已经安装成功的模块，执行相应的命令，如：npm、cnpm、vue、webpack，出现相关输出信息即配置成功

重置npm模块的注册、管理、发布地址为cnpm：

npm install cnpm -g（引申：cnpmjs.org: Private npm registry and web for Company，cnpm是一个网站，同时cnpm也是一个命令行工具，面向企业级的私有npm包的注册地、管理、发布）

重置模块的镜像地址：

修改npm包管理器的registry为淘宝镜像，npm config set registry https://registry.npm.taobao.org（官方地址为registry.npmjs.org）  
    重置设置代理：npm config set proxy http://server:port

6、问题一：不同项目对于同一模块的依赖版本不同的解决方案

如 ABC 项目使用了babel的1.x版本，项目 DEF 使用了 babel的2.x版本x版本，可以将 NODE\_PATH 指定的位置中存放babel的高版本2.x版本，再将项目ABC的 node\_modules 目录中放置低版本 1.x 版本。这样就解决了模块版本的差异性，因此，在实际开发中，模块存放路径的两种方式可以结合使用和配置。

7、NPM常用命令

配置：

npm config;管理npm的配置路径

npm config ls -l;查看配置详情信息

npm config get prefix;查看全局模块安装路径，prefix 字段就是全局 base path

npm config set prefix D:\\develop\\nodejs\\node\_global;重置全局模块安装路径

npm config set cache D:\\develop\\nodejs\\node\_cache;重置全局模块缓存路径

查看模块相关信息：

npm root;查看当前项目包（模块）的安装路径

npm root -g;查看系统中node全局包（模块）的安装路径

npm ls/list/la/li;查看当前路径下安装的模块

npm ls -g;查看全局安装的模块

npm init;在项目中引导创建一个package.json文件,安装包的信息可保持到项目的package.json文件中，以便后续的其它的项目开发或者他人合作使用。

npm help;查看某条命令的详细帮助

npm help install;系统在默认的浏览器或者默认的编辑器中打开本地nodejs安装包的文件（/nodejs/node\_modules/npm/html/doc/cli/npm-install.html）

npm packageName -v;查看本地是否安装过某个包

npm list;查看当前目录下的包

npm list -g;查看全局目录下的包

模块安装，以express模块为例：

npm install;在项目根路径下执行该命令，会在项目根路径下的 node\_modules 中安装配置在 package.json 中的所有依赖包

npm install express;安装express包在命令窗口的当前目录下，默认安装最新版本，并将信息保持到项目的package.json文件中

npm install express@3.2.0;安装express包的3.2.0版本在命令窗口的当前目录下，并将信息保持到项目的package.json文件中

npm install express --global/-g;安装express模块在全局目录下

npm install express --save/-S;安装包加入到生产阶段的依赖,package.json文件的dependencies字段内容增加

npm install express --save-dev/-D;安装包加入到开发阶段的依赖,package.json文件的devDependencies字段内容增加

npm install express --save-optional/-O;安装包加入到可选阶段的依赖,package.json文件的optionalDependencies 字段内容增加

模块卸载关键字为uninstall，模块更新关键字为update，检查模块是否已经过时关键字为outdated

8、npm初始化构建项目

例如，构建一个基于 webpack 模板的vue项目：

$ npm instll vue;

$ npm install --global vue-cli;vue的命令行工具

$ vue init webpack demo;核心命令

$ cd demo

$ npm instll;安装所有依赖包

$ npm run dev;运行开发阶段的项目

例如，构建

$ npm install -g react-native-cli;React Native的命令行工具

$ react-native init demo;核心命令

$ cd demo

$ react-native run-android;运行android平台的项目

package.json文件可以手工编写，也可以使用npm init命令自动生成。npm 的 init 命令之后，会在工程目录文件夹的根目录生成 package.json 文件，该JSON文件字段详解：

npm将该整个工程项目定义为一个 package（包），该文件定义了项目所需要的模块和配置信息，npm install 后，项目根据这个文件的配置字段下载需要的模块 以及 配置需要的运行和开发环境。

"name": "demo01",//项目名字  
"version": "0.0.1",//项目版本号，大版本.次要版本.小版本

"author": "wan",//

"description": "The first react-native demo",//

"keywords": \["react-native","javascript"\],//

"repository": \{  
"type": "git",  
"url": "https://path/to/url"  
\},  
"license":"MIT",  
"engines": \{"node": "0.10.x"\},  
"bugs":\{"url":"http://path/to/bug","email":"bug@example.com"\},  
"contributors":\[\{"name":"李四","email":"lisi@example.com"\}\],  
"private": true,//  
"scripts": \{ //  
    "start": "node node\_modules/react-native/local-cli/cli.js start",  
    "test": "jest"  
\},

//dependencies 和 devDependencies 字段都指向一个对象。该对象的各个成员，分别由模块名和对应的版本要求组成，表示依赖的模块及其版本范围。  
"dependencies": \{ //指定了项目运行所依赖的模块  
    "react": "16.0.0-alpha.6",  
    "react-native": "0.44.3",  
    "react-native-deprecated-custom-components": "^0.1.0"  
\},  
"devDependencies": \{ //指定项目开发所需要的模块。  
    "babel-jest": "20.0.3",  
    "babel-preset-react-native": "1.9.2",  
    "jest": "20.0.4",  
    "react-test-renderer": "16.0.0-alpha.6"  
\},  
"jest": \{ //  
    "preset": "react-native"  
\}

[Link 1]: https://blog.csdn.net/wanshaobo888/article/details/79179440
[Link 2]: http://baike.baidu.com/item/MSI/10209#viewPageContent