看前端项目，第一眼看什么？

看前端项目，第一眼看什么？

不知道大家看前端项目第一眼看什么？我先说我的答案，我会先看 package.json.刚好最近有一个刚学前端的小伙伴问我：package.json 干了什么？如果要回答这个问题，那肯定就需要先了解什么是包 / 库，下文统称为包，

什么是包 ？

在前端开发中，包（Package）是指一个包含了代码、资源和配置文件的集合，通常用于实现特定的功能或解决某个问题。包可以是一个库、框架、工具或者任何可以被复用的代码模块。包的核心目的是为了代码的复用和共享，使得开发者可以避免重复造轮子，提高开发效率。 这里我们直接看一个包，就看dayjs这个包： https://www.npmjs.com/package/dayjs 吧！这是一个时间处理的包，它把关于时间处理的方法都写好了，我们只需要安装这个包，安装好后，假如我们想要输出一个格式的时间只需要调用 dayjs().format('{YYYY} MM-DDTHH:mm:ss SSS [Z] A') 就好，我们就能得到想要的数据格式。 这里包就像现实生活中的工具箱的工具一样，我们从工具箱拿出卷尺（对应前端项目中的一个包），只要知道它怎么使用，我们就就可以来使用它测试长度，我们不需要去关心这个卷尺是如何制造的。 知道了包是什么，我们再看看 dayjs 库我们会发现这个库有超多个版本也很好理解，我们自己写一个东西，也不是一下子就写好了，我们肯定是一点一点开发，我们开发完成一部分功能，我们上线一个版本，然后上线，再开发一部分功能，然后上线。我们每次上线一个版本都会更新我们的版本号，方便我们管理这个包 。我们知道了库有版本的概念，那我们在开发一个大项目中，我们引入一个库，也需要有一个地方来声明我们引入哪个版本的。所以就有了包管理工具。这就是管理依赖产生的原因：它是用来管理库的版本的。前端项目都使用 package.json 来管理依赖的版本，当然它还做了很多其他的事情，例如：定义脚本，项目元数据，声明配置文件，配置包管理行为等等

真实 package.json 的依赖

这里我们看一个真实的项目的 package.json我们可以看到它使用了很多库，这些库后面都有自己的版本号，写的很清楚，这样我们使用 npm 或者其他包管理工具，下载这些包的时候，我们就能够下载到指定版本号的的依赖了。

什么是包管理工具？

包管理工具是用于管理软件项目中依赖包的工具。它们可以帮助开发者自动化地下载、安装、更新和删除项目所需的各种库和工具包。包管理工具在现代软件开发中扮演着非常重要的角色，特别是在前端开发中。常见的包管理工具：npm ，yarn，cnpm ，pnpm（推荐使用）

其实你现在就可以去尝试，写一个包，最好我们的包也依赖了一些包，然后发布到 npm上，这样你对包 和包管理工具理解就更加深刻了！都说到这里了，那现在就快速实现一下吧！

写一个包，并发布

这里我已经写好了一个很简单的包：https://github.com/chaseFunny/file-size-check，它的作用是监测文件夹下的文件是否有超出限制大小的，看一下它的 package.json 文件：

{
  "name": "file-size-check",
  "private": false,
  "version": "0.0.1",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "bin": {
    "file-size-check": "./src/main.ts"
  },
  "devDependencies": {
    "@types/node": "^20.12.7",
    "@types/rollup": "^0.54.0",
    "rollup-plugin-obfuscator": "^1.1.0",
    "rollup-plugin-terser": "^7.0.2",
    "typescript": "^5.2.2",
    "vite": "^5.2.0"
  }
}

我们可以看到它有一些我们上面提到的功能

1. 管理依赖：我们使用 devDependencies 来列出项目在开发环境中需要的依赖包，这些包不会被打包到生产环境
2. 定义脚本：定义项目中常用的脚本命令。例如，可以定义 dev 脚本来启动开发服务器，build 脚本来构建项目，preview 脚本来预览 build 的效果
3. 项目元数据：
1. 项目名称： name
2. 是否是私密项目：private
3. 项目版本：version
4. 指定项目的模块类型：type
4. 定义可执行命令的路径：使用 bin 创建一个名为 file-size-check 的全局命令，该命令会执行 ./src/main.ts 文件

我们写好 package.json 和我们的核心代码，测试完成没问题后，就可以发布到 npm 了，如何发布请参考： https://kimi.moonshot.cn/share/cpisd4tvbf6mstoqrrp0好了，到这里我们就完成了一个包的开发，如果我们想要改进我们的功能，我们就可以再次开发，然后修改版本号，进行发布，如果你不更新版本号是发布不通过的。这里我们就更加深刻理解 package.json 的作用了！