本文已参与「新人创作礼」活动，一起开启掘金创作之路

新建项目

PS：新建操作都在 VSCode 的终端进行

关于文件夹

一个好的文件管理习惯会极大的帮助你管理你的文件资源，养成文件分类管理的习惯，会让你由衷地喜欢上这种舒适的感觉。

千万不要用中文命名文件！！！千万不要用中文命名文件！！！千万不要用中文命名文件！！！

有时候中文命名的文件，会给你带来意想不到的问题。没错，就是那种找不到问题的问题，就问你，烦不烦，烦不烦。

比如，开发的时候，请一定要注意，你的项目文件路径有无中文，有的话请一定要改正过来。

如果上面的路径中有中文存在，windows 系统上就有可能出现解析乱码的情况（比如使用 pnpm 下载依赖包）

构建项目

我们使用新一代构建工具Vite + node v16+ + pnpm v6+来构建项目(一定要重视版本！！！)

推荐使用Chrome 80+浏览器（求求了，不要用 360、QQ 等浏览器）

为什么选 Vite

对于这个问题，官网给出了非常详细的解答

浏览器开始原生支持ES模块，越来越多JavaScript工具使用编译型语言编写，基于此，Vite的出现极大地提高了开发者的开发效率。

Vite 带来的优势

• Vite通过在一开始将应用中的模块区分为 依赖 和 源码 两类，改进了开发服务器启动时间

• 在Vite中，HMR是在原生ESM上执行的，同时Vite利用HTTP头来加速整个页面的重新加载（源码模块协商缓存，依赖模块强缓存）

• Vite附带了一套 构建优化 的 构建命令，开箱即用

• Vite使用在应用打包方面更加成熟灵活的Rollup

为什么选择 pnpm

项目中，包管理工具 的选择其实也经过了几次变化，从最开始的npm，到yarn，再到最后的pnpm。

为什么选择pnpm（官网描述的动机），首先从名字我们就能意会：performant npm（高性能的npm）

npm或yarn在安装依赖时，如果这个依赖在多个项目中使用，每次安装就都要重新下载一次。pnpm的出现让你只需要安装一次。

使用pnpm对项目安装依赖的时候，依赖会被存储在硬盘空间中，每个依赖都有对应的链接地址。在pnpm更新的时候，会 自动拉取硬盘中已有的依赖，添加硬盘中没有的依赖。直接从硬盘中读取文件与下载文件的速度差异可想而知，在为你节省硬盘空间的同时，能够让你有更快的依赖安装速度。

你可能会问，安装了太多不同的依赖，占用的硬盘空间会不会越来越大？解决办法是：pnpm store | pnpm（不推荐频繁使用）

当使用npm或yarn安装依赖包时，所有的依赖包都将被提升到node_modules的 根目录下。其结果是，源码可以访问 本不属于当前项目所设定的依赖包。

而 pnpm 的 node_modules 结构是个网状 + 平铺的目录结构。这种依赖结构主要基于软连接(即 symlink)的方式，将项目的直接依赖添加进模块文件夹的根目录。

总而言之，pnpm完美解决了许多了现有的包管理工具npm、yarn以及node_modules本身设计原因留下的痛点。

构建并运行项目

构建命令

初始项目目录

使用 pnpm 安装依赖

注：如果你是 clone 的其他人的项目，pnpm-lock.yaml 文件请不要随意改动，更改依赖请在 package.json 中操作，否则可能会出现 pnpm install 失败的情况。另外，尽量避免使用 pnpm i 安装依赖，可能会出现奇怪的安装 Bug。

运行项目