（一）vite 项目配置：项目包管理

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第6天，点击查看活动详情

前端技术更新很快，为了跟上技术发展的步伐，要时常记得让自己多充充电，近期学习了如何实用 vite 搭建项目。本文记录了在搭建过程中遇到的问题及解决办法，同时记录了各种插件在项目中的配置，尽可能详细的说明每一行配置具体的含义和它们将在代码或开发过程中启到的作用。

1. 创建项目

项目使用了 pnpm 作为包管理工具。（在开始搭建项目之前，请全局安装pnpm工具）。在终端中输入以下命令：

npm install -g pnpm

在一切准备就绪后，在终端中输入以下命令，并按照提示，创建一个 vite 项目。

pnpm create vite

2. 项目配置

在创建过程中，你可以设置项目的名称，选择使用的框架（vue，react 或者其它框架），以及是否要使用 ts。现在打开 package.json文件，看看这个过程为我们生成了哪些基础配置。

package.json

"scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview"
  },

vue-tsc --noEmit 用于检测 .vue 文件中的 script 代码是否符合 ts 规范。

2.1 项目包管理

现在为了开发效率，让我们对项目做一些配置。众所周知 node_modules 文件夹拥有很多小文件，Windows系统下，想要删除这个文件夹，可是需要点二外时间的，为了避免把时间浪费在这种无意义的等待中，我们使用 rimraf 工具。

rimraf 是 unix 命令 rm -rf 的 node 版本。

安装：

pnpm install --save-dev rimraf

添加脚本管理 node_modules文件夹：

"bootstrap": "pnpm install",
"clean:cache": "rimraf node_modules/.cache/ && rimraf node_modules/.vite",
"clean:lib": "rimraf node_modules",
"reinstall": "rimraf yarn.lock && rimraf package.lock.json && rimraf node_modules && npm run bootstrap"

四条命令的含义：

1. 重新安装全部依赖
2. 清除缓存
3. 删除 node_modules文件夹
4. 删除 node_modules文件夹，以及清除缓存后重新安装依赖，重新生成 .lock文件。