npm&nodejs&webpack

最新推荐文章于 2023-11-28 17:38:14 发布

轩渊

最新推荐文章于 2023-11-28 17:38:14 发布

阅读量325

点赞数

文章标签： npm webpack 前端

本文链接：https://blog.youkuaiyun.com/weixin_44932880/article/details/122667197

版权

本文介绍了Node.js作为JavaScript运行环境的特点，包括其内置的npm包管理工具。详细阐述了npm的功能和工作原理，以及如何下载安装Node.js并配置环境变量。接着，文章讨论了Webpack这一模块打包工具，解释了其在JavaScript项目中的作用。最后，讲解了Windows系统中用户变量和系统变量的区别及其在环境配置中的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

nodejs与npm

一、首先，我们先谈谈node.js是什么？

node.js是JavaScript的运行环境，它不是一个js文件，实质是对Chrome V8引擎的封装。

node.js是一个开发平台，使得JavaScript能够运行于服务端，并使其成为地位与服务端语言（例如：python、PHP等）一样高的脚本语言。

node.js与chrome浏览器在解析JavaScript时都使用了 V8引擎。

node.js的能力：

（1）提供了替代的API，使得V8引擎在非浏览器的环境下运行地更好；V8引擎执行JavaScript的速度非常快，性能非常好。
（2）其是一个基于chrome JavaScript运行时建立的平台，能方便地搭建响应速度快、易于扩展的网络应用。

二、我们再来看看npm是什么？

现实问题：当一个网站依赖的JS代码越来越多的时候，程序员发现很麻烦：jquery、bootstrap、underscore等都需要去不同的地方单独下载，并导入工程。所以有人想“为什么没有工具能统一管理这些资源呢？”

于是npm就出来了；其全称是node package manager（包管理工具）；npm这点和maven、gradle十分相似。但是maven与gradle是用来管理Java jar包的，而npm是用来管理js的。

其实现原理与maven和gradle一样：

（1）先建立一个远程代码仓库，用来存放所有的被共享的JS代码，并且每个JS文件都有自己唯一的标识符。
（2）用户想要使用某个JS文件时候，只需引用对应的标识符，就会自动下载下来。

但一开始出来的时候，并没有人鸟它。后来node.js也开发完成了，正缺少一个包管理工具，于是二者一拍即合，结果是node.js内置了npm（这也导致要下载npm的话，必须得下载node.js，其包含了npm）。后来随着node.js火了之后，很多人开始使用npm下载和共享代码。现在用npm分享代码已经成了前端的标配。

node下载

下载对应版本node
- https://nodejs.org/en/download/
- 选安装目录进行安装
- 在命令提示符下输入命令：　　　node -v

包资源管理器NPM

node包管理和分发工具。其实我们可以把NPM理解为前端的Maven
NPM本地安装

下载好Node后我们就可以使用npm命令进行包的管理，检查Node版本

npm --version
npm -v

npm使用

install命令用于安装某个模块，如果我们想安装express模块（node的web框架）
　　　　　　npm install express

#安装完成后，在该目录下已经出现了一个node_modules文件夹 和package-lock.json。			
　　　
　　　node_modules文件夹用于存放下载的js库（相当于maven的本地仓库），

    package-lock.json是当 node_modules 或 package.json 发生变化时自动生成的文件。

#NPM全局安装
　　　　如果你不知道你的全局目录在哪里，执行命令
　　　　　　npm root ‐g

　　　　比如我们全局安装jquery, 输入以下命令
　　　　　　npm install jquery ‐g

#批量下载
　　　　我们从网上下载某些代码，发现只有package.json,没有node_modules文件夹，这时我们需要通过命令重新下载这些js库。
　　　　进入目录（package.json所在的目录）输入命令：
　　　　　　npm install
　　　　此时，npm会自动下载package.json中依赖的js库。

#淘宝NPM镜像
　　　　有时我们使用npm下载资源会很慢，所以我们可以安装一个cnmp(淘宝镜像)来加快下载速度。
　　　　输入命令，进行全局安装淘宝镜像。
　　　　
　　　　npm config get registry
　　　　　npm config set registry https://registry.npm.taobao.org

环境变量配置

环境配置主要配置的是npm安装的全局模块所在的路径，以及缓存cache的路径

在系统环境变量 path 里添加 G:\Node.js

配置成功就可以在任何路径下使用 node、npm、npx 命令

配置全局安装包路径

打开cmd 窗口运行下面命令，路径可以随便指定，路径不存在会自动生成

npm config set prefix "G:\Node.js\node_modules\node_global"
npm root -g #查看默认安装位置
npm config set cache "G:\Node.js\node_modules\node_cache"

测试是否配置成功

npm install -g vue

在 G:\Node.js\node_modules\node_global 路径下可以看到 vue 表示安装成功

配置全局安装包可执行环境变量

配置全局安装包环境变量的目的是，当你使用 npm install -g 安装的模块，可以不用配置每个模块环境变量就可以使用

#当你安装一个全局可执行包时，需要给每一个都添加环境变量，或者只有进入该目录才能使用

#配置了全局安装包环境变量就可以在任意地方运行命令

配置方法

只需要将刚才设置的全局安装包路径添加到系统环境变量 path 即可

npm config set prefix "G:\Node.js\node_modules\node_global"

配置全局包依赖

这个是为了多项目引用共同的 node_modules，假如你觉得每个项目都去 npm install 安装 node_modules，里面有很多重复的，很麻烦，很占空间，可以配置环境变量 NODE_PATH

nodejs 模块查找的步骤

开始在程序文件同一目录下查找；
是核心模块吗？是，返回模块：否，继续进行；
模块在当前目录下的 node_modules下吗？是，返回模块：否，继续进行；
尝试进入父目录，父目录存在吗？是，返回3：否，继续进行；
模块在环境变量 NODE_PATH 指定的目录下吗？是，返回模块：否，抛出异常。

webpack

https://zhuanlan.zhihu.com/p/65574428

webpack是一个打包器（bundler），它能将多个js文件打包成一个文件（其实不止能打包js文件，也能打包其他类型的文件，比如css文件，json文件等）。

webpack需要在node环境下才能运行，所以需要首先安装最新版本的node.js

全局安装webpack

全局安装意味着本机上所有的项目都将使用这个全局安装的webpack
```
npm install -g webpack webpack-cli
webpack -v
（webpack -v查看的是全局安装的webpack的版本）
```
本地安装webpack（推荐）

npm uninstall -g webpack #卸载全局

#创建一个测试文件夹webpack-demo，并在控制台中进入该目录，然后在该目录中初始化npm
npm init
#会多出一个package.json文件
里面包含了webpack-demo文件夹中的项目的信息，以及该项目的依赖（需要使用的工具包等等）

#编辑package.json文件，使得该示例项目不会被npm分发出去：
"private": true,

紧接着就可以本地安装webpack了

npm install --save-dev webpack@<version> 
再安装webpack-cli
npm install --save-dev webpack-cli

npx webpack -v #看当前本地安装的webpack的版本：