慵懒人生 發表於 2023-2-16 23:06:00

Windows 环境下安装与配置 Node.js

<p><img src="https://cdn.jsdelivr.net/gh/RivTian/Blogimg/img/202302162343738.png" alt="" loading="lazy"></p>
<h3 id="一下载nodejs安装包">一、下载Node.js安装包</h3>
<blockquote>
<p>下载地址：http://nodejs.cn/download/</p>
<p>本教程以msi安装包为例</p>
</blockquote>
<h4 id="点击windows-安装包下载">点击Windows 安装包下载</h4>
<p><img src="https://cdn.jsdelivr.net/gh/RivTian/Blogimg/img/202302162249394.png" alt="" loading="lazy"></p>
<h3 id="二安装nodejs">二、安装Node.js</h3>
<h4 id="1打开安装包">1.打开安装包</h4>
<blockquote>
<p>欢迎页：点击Next</p>
</blockquote>
<p><img src="https://cdn.jsdelivr.net/gh/RivTian/Blogimg/img/202302162250622.png" alt="" loading="lazy"></p>
<h4 id="2允许使用条款">2.允许使用条款</h4>
<blockquote>
<p>点击接受条款后Next</p>
</blockquote>
<h4 id="3选择安装路径">3.选择安装路径</h4>
<blockquote>
<p>选择你要安装的路径</p>
<p><strong>本案例保存默认在C盘路径：D:\Soft\nodejs</strong></p>
</blockquote>
<h4 id="4安装组件">4.安装组件</h4>
<blockquote>
<p>这些是Node.js里面包含的组件，例如运行环境，包管理器等</p>
<p><strong>保持默认即可，点击Next</strong></p>
</blockquote>
<p><img src="https://cdn.jsdelivr.net/gh/RivTian/Blogimg/img/202302162251073.png" alt="" loading="lazy"></p>
<h4 id="5安装开发工具">5.安装开发工具</h4>
<blockquote>
<p>开发工具可以等以后实际开发过程中安装</p>
<p>这里选择不勾选安装工具</p>
</blockquote>
<h4 id="6安装nodejs">6.安装Node.js</h4>
<h3 id="三查看是否安装成功">三、查看是否安装成功</h3>
<h4 id="1打开终端">1.打开终端</h4>
<blockquote>
<p><strong>使用 Win键+R，输入cmd</strong></p>
</blockquote>
<h4 id="2输入指令">2.输入指令</h4>
<pre><code class="language-bash">node -v
npm -v
</code></pre>
<p>出现版本号，即为安装成功</p>
<h3 id="四配置nodejs">四、配置Node.js</h3>
<h4 id="1使用管理员权限打开终端">1.使用管理员权限打开终端</h4>
<p>移动到Node.js安装目录下</p>
<pre><code class="language-bash">cd /d D:\Language\nodejs
</code></pre>
<h4 id="2创建全局组件文件夹和缓存文件夹">2.创建全局组件文件夹和缓存文件夹</h4>
<pre><code class="language-bash'">mkdir node_global
mkdir node_cache
</code></pre>
<h4 id="3设置npm全局包目录与缓存目录">3.设置npm全局包目录与缓存目录</h4>
<p>设置全局目录<br>
<strong>双引号内为刚刚创建的 node_global 文件夹路径</strong></p>
<pre><code class="language-bash">npm config set prefix "D:\Language\nodejs\node_global"
npm config set cache "D:\Language\nodejs\node_cache"
</code></pre>
<h4 id="4设置系统环境变量">4.设置系统环境变量</h4>
<blockquote>
<p>将环境变量 Path 中的npm路径更换为刚才<strong>自定义的 node_global 全局包</strong></p>
<p>本案例为 D:\Language\nodejs\node_global</p>
</blockquote>
<p>执行第三步完后，配置环境变量，如下：</p>
<ul>
<li>
<p>“环境变量” -&gt; “系统变量”：</p>
<p>新建一个变量名为 “<strong>NODE_PATH</strong>”，</p>
<p>变量值：<strong>自定义的 node_global 全局包路径后 + \node_modules</strong></p>
<pre><code class="language-bash">D:\Language\nodejs\node_global\node_modules
</code></pre>
</li>
<li>
<p>“环境变量” -&gt; “用户变量”：编辑用户变量里的<strong>Path</strong>，将相应npm的路径（“C:\Users\用户名\AppData\Roaming\npm”）改为：“<strong>D:\Language\nodejs\node_global</strong>”，如下：</p>
<p>并在Path变量中新建：<strong>%NODE_PATH%</strong></p>
</li>
</ul>
<p><img src="https://cdn.jsdelivr.net/gh/RivTian/Blogimg/img/202303051015749.png" alt="" loading="lazy"></p>
<h3 id="五测试">五、测试</h3>
<p>在cmd命令下执行 <strong>npm install webpack -g</strong> 和 <strong>npm install webpack-cli -g</strong> 安装 webpack。</p>
<p>安装成功，自定义文件夹如下所示：</p>
<p><img src="https://cdn.jsdelivr.net/gh/RivTian/Blogimg/img/202302162304921.png" alt="" loading="lazy"></p>
<p><img src="https://cdn.jsdelivr.net/gh/RivTian/Blogimg/img/202302162304650.png" alt="" loading="lazy"></p>
<p>在cmd命令下执行 <strong>webpack -v</strong> 查看webpack版本，如下图所示：</p>
<p><img src="https://cdn.jsdelivr.net/gh/RivTian/Blogimg/img/202302162304529.png" alt="" loading="lazy"></p>
<blockquote>
<p>注意若提示 webpack 不存在，记得重新开一个 cmd 测试即可</p>
</blockquote>
<h3 id="六解决-npm-下载速度慢的问题">六、解决 npm 下载速度慢的问题</h3>
<h4 id="原因">原因</h4>
<ul>
<li>安装 <code>Node</code> 时，<code>npm</code> 包的默认下载地址就是：<code>https://registry.npmjs.org/</code>。</li>
<li>由于外网原因，常常出现下载很慢或者不能下载的情况，导致我们执行命令 <code>npm install xxxx</code> 下载资源包时常常失败。</li>
</ul>
<h3 id="解决方案">解决方案</h3>
<p>配置国内镜像源地址</p>
<ul>
<li>腾讯云镜像源: mirrors.cloud.tencent.com/npm/</li>
<li>淘宝镜像源: registry.npmmirror.com</li>
<li>华为云镜像源: mirrors.huaweicloud.com/repository/…</li>
</ul>
<h3 id="使用方法">使用方法</h3>
<ul>
<li>临时使用：npm install xxx --registry=镜像源地址</li>
<li>更改 npm 包默认下载地址：npm config set registry 镜像源地址</li>
</ul>
<h3 id="附上完整-npmrc-配置文件">附上完整 <code>.npmrc</code> 配置文件</h3>
<pre><code class="language-ini"># 在服务端执行时可能需要最高权限执行
unsafe-perm=true
# 指定依赖的安装源
registry=https://registry.npm.taobao.org/
# 指定 node.js 的安装源，某些依赖包可能需要下载 node.js
disturl=https://npm.taobao.org/mirrors/node/
# 一些依赖包内部需要下载的依赖文件，以下变量会被相关依赖包读取到并使用
sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
phantomjs_cdnurl=https://npm.taobao.org/mirrors/phantomjs/
electron_mirror=https://npm.taobao.org/mirrors/electron/
chromedriver_cdnurl=https://npm.taobao.org/mirrors/chromedriver/
operadriver_cdnurl=https://npm.taobao.org/mirrors/operadriver/
selenium_cdnurl=https://npm.taobao.org/mirrors/selenium/
node_inspector_cdnurl=https://npm.taobao.org/mirrors/node-inspector/
fsevents_binary_host_mirror=http://npm.taobao.org/mirrors/fsevents/
puppeteer_download_host=https://npm.taobao.org/mirrors/
sentrycli_cdnurl=https://npm.taobao.org/mirrors/sentry-cli/
sharp_binary_host=https://npm.taobao.org/mirrors/sharp/
sharp_libvips_binary_host=https://npm.taobao.org/mirrors/sharp-libvips/
sqlite3_binary_site=https://npm.taobao.org/mirrors/sqlite3/
python_mirror=https://npm.taobao.org/mirrors/python/
</code></pre>
<p>PS:</p>
<p>上述 <code>npm.taobao.org</code> 可全量替换为最新的淘宝镜像源 <code>npmmirror.com</code>。<br>
如 registry=https://registry.npm.taobao.org/-&gt;registry=https://registry.npmmirror.com/</p>
<h3 id="总结">总结</h3>
<p>以上node.js的安装，笔者已亲测可用，希望本篇博客对您有所帮助，在安装配置过程中，若遇到问题，欢迎留言交流！</p><br><br>
来源：https://www.cnblogs.com/RioTian/p/17128654.html
頁: [1]
查看完整版本: Windows 环境下安装与配置 Node.js