Node.js 下载安装教程

笔者的环境:

  • Node.js 16.14.0(npm 8.3.1)

  • Windows 10 教育版


【说明】

  • 本教程讲述的是 Windows 下 Node.js 离线安装版的下载与配置。

  1. 一般来说,安装一个软件有 3 种方法:离线安装、在线安装、免安装。通常,离线安装是最好的方法,同时也通常是笔者的首选,本文亦使用的是离线安装的方法。

  2. 进入 Node.js 官网进行下载,网址:https://nodejs.org/en/download/

    因为是国外的网站,所以可能网站加载缓慢。部分浏览器可能禁用此网站上的某些控件,所以如下的过程如果发现网站上缺失某些界面选项,可以试试换个浏览器。

    具体操作流程如图(请顺着图片用鼠标点击画红圈部分):

    在这里插入图片描述

  3. 下载完并运行安装包就可以进行安装了,关键性操作流程如图(请顺着图片用鼠标点击画红圈部分):

    在这里插入图片描述

    在这里插入图片描述

  4. 安装完成之后,应该会弹出若干个 CMD 或 PowerShell 窗体。对于这些窗体,直接一直按回车键 Enter 即可。这是在下载安装一些必要文件,如 Python、VS 工具环境等。此下载过程缓慢,请耐心等待。

    在这里插入图片描述

    在这里插入图片描述

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

    node -v

    npm -v

    C:\WINDOWS\system32>node -v
    v16.14.0
    
    C:\WINDOWS\system32>npm -v
    8.3.1
    
  6. 配置 npm 在安装全局模块时的路径和缓存 cache 的路径。在自己喜欢的目录下,分别新建文件夹 node_globalnode_cache 来分别代表 安装全局所有工具的安装目录缓存 cache 的文件夹,并在 CMD 中输入以下命令来配置这两个文件夹:

    npm config set prefix "C:\Program Files\nodejs\node_global"

    npm config set cache "C:\Program Files\nodejs\node_cache"

    此步骤并不是必要的,如果跳过此步骤,以后使用全局命令的时候,会默认将模块安装在 C:\Users\用户名\AppData\Roaming 路径下的 npmnpm-cache 中,这可能会对以后配置路径和开发都带来麻烦,建议不要跳过此步骤。

  7. 在 Windows 中配置一些环境变量。关于配置 Windows 环境变量的方法,可见笔者的另一篇博客:

    配置 Windows 环境变量的方法:
    https://blog.csdn.net/wangpaiblog/article/details/113532591

    前面设置的文件夹 node_global 在日后会被安装存放一些工具,设置环境变量之后可以方便地在命令行中使用这些工具命令。

    环境变量如下:(注意:设置完环境变量之后,必须重启 CMD 才会在 CMD 中生效)

    • 变量名:NODE_PATH

      变量值:C:\Program Files\nodejs\node_global\node_modules

    • 变量名:Path(此为上面文件夹的 node_global 路径)

      变量值:C:\Program Files\nodejs\node_global

  8. 输入以下命令将 registry 地址更改为阿里云 NPM 镜像地址:

    npm config set registry http://registry.npmmirror.com


    【注意】

      很早以前,上面命令中的地址是 http://registry.npm.taobao.org。现在,阿里官方已宣布将在 2022 年停用此地址,因此现在不要再使用这个地址了。


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

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

    这样的结果是,之后使用 npm 安装国外的插件时,可能由于访问国外互联网的限制导致失败,从而报错 rollbackFailedOptional: verb npm-session

  9. 在 CMD 中输入以下命令来安装 webpack:(运行如下命令需要管理员权限)

    npm install webpack --global

    webpack 官网文档网址:https://webpack.docschina.org/concepts/

    webpack 是一种模块打包工具。打包指的是将一个需要在一定条件才能下运行的零散的源代码,转化为一个可以在宽松环境下即可运行的文件。在很多编程语言中,打包往往都是最终必须要进行的。

    --global 代表全局。全局指的是对所有的项目都起作用。但不要经常使用这种安装方法。有过编程开发经验的都知道,使用“全局”这种偷懒行为往往是在给以后挖坑。更多的时候,我们会使用 --save--save-dev,它们分别表示只对本项目的运行和开发起作用。不过,webpack 工具非常常用,这里也就将其设置为全局的了。

    另外,--global--save--save-dev 可分别短写为 -g-s-d

  10. 在 webpack 4 之后,还需要再安装 webpack-cli。安装 webpack-cli 的方法是,在 CMD 中输入以下命令:(运行如下命令需要管理员权限)

    npm install webpack-cli --global

  11. 这里还推荐安装 webpack-dev-server,它可以用于实现 HMR(Hot Module Replacement,模块热替换):(运行如下命令需要管理员权限)

    npm install webpack-dev-server -g

  12. 实际上,这几个命令 npm install XXX –g 可以浓缩成一个:(运行如下命令需要管理员权限)

    npm install webpack webpack-cli webpack-dev-server -g

  13. 上面的命令 npm install XXX --global 会导致将这几个工具安装到上面通过 npm config set prefix "C:\Program Files\nodejs\node_global" 设置的文件夹 node_global

    如果上面的环境变量 Path 没有设置错,在 CMD 中输入以下命令应该可以查看刚刚安装的这些工具的版本号:

    webpack -v

    C:\WINDOWS\system32>webpack -v
    webpack: 5.68.0
    webpack-cli: 4.9.2
    webpack-dev-server 4.7.4
    
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐