npm：详细解释前端项目开发前奏！！

当我们在终端输入 npm init vite 、npm install、npm run dev等命令时，不禁会疑惑为什么要输入这些内容？这些内容能干什么？这些内容有什么用？

比如，当我们在终端输入npm init vite时，会触发以下行为：

我们能看到，似乎是下载了什么东西，然后需要给这个project命名。npx是什么？create-vite是什么？

命令执行的过程

实际上，当我们输入npm init vite时，终端会先执行npx命令，再执行create-vite，这表明npm正在使用npx来执行包，实际执行的是create-vite包。

npm(Node Package Manager)是什么？

npm中文文档介绍：npm 是 Node JavaScript 平台的包管理器。它将模块放置到位，以便 node 可以找到它们，并智能地管理依赖冲突。它具有极强的可配置性，可以支持各种用例。最常见的是，您使用它来发布、发现、安装和开发 node 程序。

npx((Node Package eXecute)是什么？

npx是npm 5.2+ 版本中引入的包执行工具，用于执行npm包中的可执行文件。这里执行的是create-vite包。

所以

bash 复制代码

npm init vite
# ↓ 等价于
npx create-vite

vite是什么？

Vite是一个现代化的前端构建工具，由Vue.js作者尤雨溪开发，专为现代Web开发而设计。

Vite的核心特点有：

极快的开发服务器
闪电般的热模块替换(HMR)
优化的生产构建

Vite的工作原理

开发环境 vs 传统打包工具

传统打包工具(如Webpack)：

text 复制代码

源文件 → 全量打包 → Bundle → 开发服务器
   ↓
启动慢 (需要打包所有文件)

Vite的方式:

text 复制代码

源文件 → 按需加载 → 原生ESM → 浏览器
   ↓  
启动快 (无需预打包)

Vite支持的技术栈

多框架支持，如Vue.js,React,Preact等
TypeScript原生支持
CSS预处理器

所以，我们知道了，当我们执行npm init vite时，npm会使用npx来执create-vite的包。进入create-vite包的工作流程。

我们先给Project按默认命名。

随后让我们选择框架，我们选择React。

接着，选择一个变体。我们选择JavaScript。

随后，就会创建项目目录并复制包含依赖配置，Vite配置，HTML入口，源码目录以及静态资源目录等文件。如下：

text 复制代码

my-vite-project/
├── index.html           # 入口HTML (在根目录！)
├── vite.config.js       # Vite配置文件
├── package.json         # 依赖管理
├── src/                 # 源码目录
│   ├── main.js         # 应用入口
│   ├── App.vue         # 根组件
│   ├── components/     # 组件目录
│   └── assets/         # 静态资源
└── public/             # 公共静态文件

然后，我们就可以根据命令切换到项目目录，执行npm install 和 npm run dev 命令。

安装项目依赖包

当我们执行:

bash 复制代码

npm install

会读取package.json（依赖管理）文件，并从npm registry（在线数据库）下载所有依赖，并创建node_modules将依赖安装到node_modules/目录下，生成package-lock.json锁定依赖版本。

启动开发服务器

最后，我们就可以执行npm run dev来启动开发服务器。

启动开发服务器会先查找脚本，在package.json中找到dev脚本，然后运行vite命令，启动服务器（通常在http://localhost:5173) 并会实时监听文件变化。

之后开发者，即可在src目录下完成项目开发。