Node.js 14.15 安装配置教程

た入场券 2021-09-25 04:12 1660阅读 0赞

### Node.js 14.15 安装配置教程 ###

1.  进入 `Node.js` 官网进行下载，网址：[https://nodejs.org/en/download/][https_nodejs.org_en_download]
    
    因为是国外的网站，所以可能网站加载缓慢。部分浏览器可能禁用此网站上的某些控件，所以如下的过程如果发现网站上缺失某些界面选项，可以试试换个浏览器。
    
    具体操作流程如图（请顺着图片用鼠标点击画红圈部分）：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdwYWlibG9n_size_16_color_FFFFFF_t_70_pic_center]

1.  下载完并运行安装包就可以进行安装了，关键性操作流程如图（请顺着图片用鼠标点击画红圈部分）：
    
    （注意：安装时的**安装路径中不能有空格**。不要使用默认的安装路径，因为默认的安装路径中含 Program Files ，而 Program Files 包含空格。）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdwYWlibG9n_size_16_color_FFFFFF_t_70_pic_center 1]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdwYWlibG9n_size_16_color_FFFFFF_t_70_pic_center 2]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdwYWlibG9n_size_16_color_FFFFFF_t_70_pic_center 3]

1.  安装完成之后，应该会弹出若干个 CMD 或 Shell 窗体。对于这些窗体，直接一直按回车键 ENTER 即可，这是为了下载一些配置文件等。此下载过程缓慢，请耐心等待。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdwYWlibG9n_size_16_color_FFFFFF_t_70_pic_center 4]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdwYWlibG9n_size_16_color_FFFFFF_t_70_pic_center 5]

1.  如果 `Node.js` 安装成功，在 CMD 中分别输入以下命令应该可以分别查看 node 和 npm 的版本号：

node -v  
npm -v

![在这里插入图片描述][20210204233226629.png_pic_center]

1.  配置 npm 在安装全局模块时的路径和缓存 cache 的路径。此步骤并不是必要的，如果不跳过此步骤，以后使用全局命令的时候，会默认将模块安装在 C:\\Users\\用户名\\AppData\\Roaming 路径下的 npm 和 npm-cache 中，这将对以后配置路径和开发都带来麻烦。因此还是强烈建议不要跳过此步骤。
2.  配置 npm 在安装全局模块时的路径和缓存 cache 的路径的方法是，在自己喜欢的目录下，分别新建文件夹 node\_global 和 node\_cache 来分别代表安装全局模块的文件夹和缓存 cache 的文件夹，并在 CMD 中输入以下命令来配置：

npm config set prefix "C:\\ProgramFilesNoSpaces\\nodejs\\node\_global"  
npm config set cache "C:\\ProgramFilesNoSpaces\\nodejs\\node\_cache"

1.  设置 Windows 中的环境变量。关于设置 Windows 环境变量的方法，可见笔者的另一篇博客： 设置 Windows 环境变量的方法：[https://blog.csdn.net/wangpaiblog/article/details/113532591][https_blog.csdn.net_wangpaiblog_article_details_113532591]

（注意：设置完环境变量之后，必须重启 CMD 才会在 CMD 中生效）

*  （已过时）环境变量如下：
    
     *  变量名： NODE\_PATH  
        变量值： C:\\ProgramFilesNoSpaces\\nodejs\\node\_global\\node\_modules
     *  变量名： Path （此为上面文件夹的node\_global路径）  
        变量值： C:\\ProgramFilesNoSpaces\\nodejs\\node\_global

1.  输入以下命令来修改登记处 registry 地址：

npm config set registry http://registry.npm.taobao.org

如果不进行此操作，则等同于输入了以下命令：

npm config set registry http://registry.npmjs.org

这样的结果是，之后使用 npm 安装国外的插件时，可能由于访问国外互联网的限制而失败报如下错误：

rollbackFailedOptional: verb npm-session

1.  在 CMD 中输入以下命令来安装webpack：

npm install webpack -g

1.  在 webpack 4 之后，还需要再安装 `webpack-cli`。安装 `webpack-cli` 的方法是，在 CMD 中输入以下命令：

npm install webpack-cli -g

1.  实际上，这两个命令 `npm install XXX –g` 可以浓缩成一个：

npm install webpack webpack-cli -g

1.  上面的命令 npm install XXX -g 会导致将 webpack 、 webpack-cli 安装到上面通过 npm config set prefix “C:\\ProgramFilesNoSpaces\\nodejs\\node\_global” 设置的文件夹 node\_global 。如果上面的环境变量Path没有设置错，在CMD中输入以下命令应该可以查看 webpack 和 webpack-cli 的版本号：

webpack -v

![在这里插入图片描述][20210204233630490.bmp_pic_center]

[https_nodejs.org_en_download]: https://nodejs.org/en/download/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdwYWlibG9n_size_16_color_FFFFFF_t_70_pic_center]: /images/20210923/148cff366ece4106bb1d0ce11b236419.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdwYWlibG9n_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210923/3374501526ca4d20afe088d04b5edff1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdwYWlibG9n_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20210923/519d1f8d46cb42128eb7ded39f3efd80.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdwYWlibG9n_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20210923/709566d198f343af926133e8d3e73453.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdwYWlibG9n_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20210923/9a4027a890484d1a9ddb7be070108e7b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdwYWlibG9n_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20210923/96d7aaae3456469895d210762b9b4c83.png
[20210204233226629.png_pic_center]: /images/20210923/2c7b4724371543b9aad449e556f6723e.png
[https_blog.csdn.net_wangpaiblog_article_details_113532591]: https://blog.csdn.net/wangpaiblog/article/details/113532591
[20210204233630490.bmp_pic_center]: /images/20210923/5173037d561e4ea9a20700f829a5d3fd.png