软件开发环境搭建系列之nodejs的相关配置（十五）

一、获取Nodejs软件安装包

1.1 软件获取

• Nodejs的下载地址：
  https://nodejs.org/en/download/
  
• 下载后的Nodejs文件
  

1.2 示范的环境说明

类型	说明
操作系统	Windows 7 Service Park 1旗舰版64位
Nodejs	node-v12.16.3

二、安装操作示范

2.1 msi执行包方式

2.1.1 开始进行安装操作

• 1、启动node.js的msi可执行文件
  
• 2、协议许可，这没啥说的，肯定要同意，大多数软件都是这样设置的，不同意就禁用按钮，不让你Next
  
• 3、安装位置调整，如有需要可以自行调整默认的安装位置
  
• 4、安装的配置选择，建议都选择上，默认好像就是全部安装
  
  操作方法
  
• 5、下面这个可装可不装，主要是针对于有些模块会用到了python，要靠Visual studio build tools
  ，并且chocolatey安装也有要求，点了还是没用（应该是版本达不到要求吧，不折腾这个选项），如果你要尝试下也未尝不可
  
  我试过这个选项，安装完成后会出现一个命令行窗口，提示一堆文字，关键的还是下工具占空间3GB，网速差的还是建议不要勾选这个，另外下面对Chocolatey没有达到安装的要求也不要装，要不报错窗口弹出来，又要懵起来了
  
  看了一下最后安装完成的文件是一个install_tools.bat，注：此文件是安装nodejs产生的，看文件的命名很容易猜出就是代表安装多个工具（install_tools，install安装，tool工具，s复数表多个）
  
  以下是install_tools.bat脚本文件内容，cls表示清屏命令，pause表示暂停，其作用就是等待用户回车，用户回车后就执行下面的操作，反正你不回车他就一直等着；echo表示输出内容
  其核心的代码是最后面，简单的理解成安装Chocolatey，通过这个工具来安装对应的visualstudio2017-workload-vctools

@echo off

setlocal
title Install Additional Tools for Node.js

cls

echo ====================================================
echo Tools for Node.js Native Modules Installation Script
echo ====================================================
echo.
echo This script will install Python and the Visual Studio Build Tools, necessary
echo to compile Node.js native modules. Note that Chocolatey and required Windows
echo updates will also be installed.
echo.
echo This will require about 3 Gb of free disk space, plus any space necessary to
echo install Windows updates. This will take a while to run.
echo.
echo Please close all open programs for the duration of the installation. If the
echo installation fails, please ensure Windows is fully updated, reboot your
echo computer and try to run this again. This script can be found in the
echo Start menu under Node.js.
echo.
echo You can close this window to stop now. Detailed instructions to install these
echo tools manually are available at https://github.com/nodejs/node-gyp#on-windows
echo.
pause

cls

REM Adapted from https://github.com/Microsoft/windows-dev-box-setup-scripts/blob/79bbe5bdc4867088b3e074f9610932f8e4e192c2/README.md#legal
echo Using this script downloads third party software
echo ------------------------------------------------
echo This script will direct to Chocolatey to install packages. By using
echo Chocolatey to install a package, you are accepting the license for the
echo application, executable(s), or other artifacts delivered to your machine as a
echo result of a Chocolatey install. This acceptance occurs whether you know the
echo license terms or not. Read and understand the license terms of the packages
echo being installed and their dependencies prior to installation:
echo - https://chocolatey.org/packages/chocolatey
echo - https://chocolatey.org/packages/python
echo - https://chocolatey.org/packages/visualstudio2017-workload-vctools
echo.
echo This script is provided AS-IS without any warranties of any kind
echo ----------------------------------------------------------------
echo Chocolatey has implemented security safeguards in their process to help
echo protect the community from malicious or pirated software, but any use of this
echo script is at your own risk. Please read the Chocolatey's legal terms of use
echo as well as how the community repository for Chocolatey.org is maintained.
echo.
pause

cls

"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command Start-Process '%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe' -ArgumentList '-NoProfile -InputFormat None -ExecutionPolicy Bypass -Command iex ((New-Object System.Net.WebClient).DownloadString(''https://chocolatey.org/install.ps1'')); choco upgrade -y python visualstudio2017-workload-vctools; Read-Host ''Type ENTER to exit'' ' -Verb RunAs

然而Chocolatey官网对安装Chocolatey有要求（巧克力官网：https://www.chocolatey.org/）

下面给出powershell的版本查看方法
第一种：针对于windows7系统的powershell版本查看方法

第二种：针对于windows10系统的powershell版本查看方法

至于怎么对powershell进行版本升级，可以自行搜索

• 6、进行安装
  
• 7、安装完成提示，啥都不用说到这就可以告别这个窗口了
  

2.1.2 先来看看版本号信息

• 查看node的版本
  
• 查看npm的版本
  
  一个小检查，主要是有些小伙伴们可能敲了npm -v并没有出现相应的版本信息
  检查一下你nodejs安装位置下的node_modules\npm\bin\npm，还是回到上面安装的四个选项肯定是取消掉了几个，导致npm没有装上，装上的会有下面这样的路径nodejs安装程序位置\node_modules\npm\bin\npm
  

2.1.3 检查一下本机的环境变量信息

为什么要检查，其实就是为了配置zip安装版做铺垫。。。。。
一般我会检查下用户和系统两种类型的环境变量


为了直观观察，可以通过命令行检测，path

记住这个用户环境变量的值C:\Users\当前用户\AppData\Roaming\npm，要注意一点AppData是隐藏起来的目录

也可以观察nodejs的配置内容：

2.1.4 来试试安装几个模块会不会报错

1、下面来安装一个bower，npm i bower，会在当前用户目录下创建三个文件，而且创建有先后顺序，一般敲完了npm i xxxx命令，会先创建.config目录，然后下载xxxx过程中会创建一个node_modules目录，下载xxxx完成后会创建一个package-lock.json文件

2、这里我们来检查一下prefix和cache指定的路径

先看看npm下的，居然下面没有，我要这个目录有什么用？？？这干嘛使得，先别急，后面我们来尝试让他出现一些东西

接着来看看npm-cache，你不会又要问这个目录是干嘛用的吧？？？其实这个目录没什么用，就是帮助网速困难户在不联网情况下就可以按照固定版本的模块文件，也就是篮子里有什么他就给你什么，你要的他不一定有，他给你的一定是他有的，那么我就有一个想法啦，哈哈，重装系统前我肯定要先备份他，否则我还要联网下，或者写一个bat脚本，一键化执行模块安装，不用联网就可以达到模块安装的效果，后面我们来写一个bat脚本，针对于一些天天电脑刷系统的用户就要折腾起来（我是最烦这些个配置，时间一长，不知道以前是怎么安装的，或者以前配置了什么，大多数人好像都有这样的毛病）

2.1.5 调整下载后的模块保存的位置

前面说要让npm目录出现一些文件，你还记得吧，下面就来了

• 1、来看看安装的模块，命令npm ls
  
• 2、来卸载掉这个bower模块
  1）有两种方式，一种是强制删除文件方法，模块太少就直接删除
  
  注意一个问题，你一定要删除node_modules跟package-lock.json，否则就会出现这样的错误，可以这样理解他们俩个是捆绑在一起的必须同时存在或同时移除，删除一个模块就不建议这样操作，而是通过下面那种命令卸载的形式来
  
  2）另一种是命令卸载，命令npm r 模块名称，这种方法会保留文件node_modules跟package-lock.json的
  
• 3、这样，我们来调整一下执行命令的所在目录位置
  
  其实这跟你npm install命令有关，需要加上一个-g参数才可以
  
  东西呢？？？node_modules和package-lock.json兄弟去那玩去了？？
  关键时刻到了，看prefix配置的位置就知道了
  

2.1.6 设置一些配置信息

既然prefix是下载全局模块保存的路径，而cache则是缓存模块保存的，现在要变更他们到我nodejs下面，目的是便于我管理

• 1、清理默认的位置，删掉下面这两个文件
  C:\Users\当前用户\AppData\Roaming\npm
  C:\Users\当前用户\AppData\Roaming\npm-cache
  默认的文件名称如下：
  
  删掉之后的
  
• 2、配置新的位置，node_global和node_cache这两个不需要你自己手动创建，让nodejs自己去创建

npm config set prefix "D:\apps\nodejs\node_global"
npm config set cache "D:\apps\nodejs\node_cache"

• 3、修改环境变量path，之前有个用户变量指定的就是默认的位置（npm下载全局模块保存的位置），这个我们要更改成新的prefix位置，也就是这里设置的D:\apps\nodejs\node_global，这个是为了你能够使用全局模块命令才要配置的，为什么要设置这个，可以看2.2.4里为什么不能输出全局模块的版本号？？？
  
  4、装一个模块试试，注意一定要采用全局，否则就在你命令行执行的当前位置建立，上面有这样的演示，可以结合（2.1.4和2.1.5）
  还是以bower为例安装
  
  最重要的还是看那个新的prefix和cache位置下有没有内容
  

2.1.7 有关npm包管理器一些问题

npm如何升级；我输入npm -v，没有显示它的版本信息
下面的回答来自npm社区的一个截图，链接地址：https://npm.community/t/installing-upgrading-npm/251/2

简单总结一下windows系统安装新版本就是升级nodejs程序

另外一种就是在原有的npm基础上进行更新npm，可以参考这篇文章https://www.cnblogs.com/coober/p/6429393.html

2.2 zip压缩包方式

2.2.1 解压这个压缩文件

2.2.2 设置环境变量

• 1、第一个用户环境变量NODE_HOME，配置nodejs所在的位置
  
• 2、第二个用户环境变量PATH，配置npm、node跟全局模块使用的命令
  
  
  上述两个变量配置完成后，就进行测试，看版本号能否输出
  

2.2.3 修改nodejs的默认配置项

主要是把prefix=nodejs家路径\node_global，cache=nodejs家路径\node_cache，先查看一下默认设置

• 设置安装模块时进行缓存的位置：

npm config set cache "D:\apps\node-v12.16.3-win-x64\node_cache"

• 设置安装全局模块保存的位置：

npm config set prefix "D:\apps\node-v12.16.3-win-x64\node_global"

2.2.4 安装全局模块

安装好bower模块，这里就要测试一下能否打印bower的版本信息，如果不能打印出来，说明你没有将path增加全局模块所在的位置，即%NODE_HOME%\node_global; 没有。

三、其他

3.1 npm帮助文档

3.2 NODE_PATH环境变量存在的作用

这里没有配置这个环境变量NODE_PATH，因为目前还不清楚这个是干什么的，思否上有一篇文章介绍了NODE_PATH环境变量，对这个环境变量感兴趣的可以看看
https://segmentfault.com/a/1190000002478924

3.3 数据备份

3.3.1 nodejs的用户配置文件

输入npm config list -l，查找userconfig这一项设置

这项值是一个字符串类型，是个文件路径，我们找到打开看看


会发现.npmrc文件内容竟然是自己设置的npm全局安装位置和下载时的缓存位置

3.3.2 npm下载下来的模块文件及缓存文件

• 通过命令
  npm config get prefix 和 npm config get cache来查看对应的路径
  

3.3.3 编写一个脚本文件，安装常用的模块

• 新建一个.bat文件
  
• 文件内容如下：

@echo off
mode con lines=100 cols=80
title npm常用的模块安装by LINKSINKE
color 0a
@echo npm模块有些内容需要git，没安装的请提前安装
pause
echo -------------------------------
echo [01] bower
echo [02] cnpm
echo [03] fis
echo [04] grunt-cli
echo [05] rtlcss
echo [06] less
echo [07] less-plugin-clean-css
echo [08] express
echo [09] express-generator
echo [10] webpack
echo [11] webpack-cli
echo [12] vue
echo [13] vue-router
echo [14] vue-cli
echo [15] stylus
echo -------------------------------
call npm i -g bower
call npm i -g cnpm --registry=https://registry.npm.taobao.org
call cnpm i -g fis
call cnpm i -g grunt-cli
call cnpm i -g rtlcss
call cnpm i -g less
call cnpm i -g less-plugin-clean-css
call cnpm i -g express
call cnpm i -g express-generator
call cnpm i -g webpack
call cnpm i -g webpack-cli
call cnpm i -g vue
call cnpm i -g vue-router
call cnpm i -g vue-cli
call cnpm i -g stylus

cls
@echo -------------------------------
echo 版本号测试输出：
echo [bower]-----------
call bower -v
echo [cnpm]-----------
call cnpm -v
echo [fis]-----------
call fis -v
echo [grunt]-----------
call grunt -version
echo [rtlcss]-----------
call rtlcss -v
echo [lessc]-----------
call lessc -v
echo [express]-----------
call express --version
echo [webpack]-----------
call webpack -v
echo [vue]-----------
call vue -V
echo [stylus]-----------
call stylus --version
echo -------------------------------
echo finished
pause

• 效果截图