关于package.json:浅析-packagejson

每个前端我的项目中都有一个 package.json 文件，你理解它吗？花几分钟再从新扫视一下这个相熟的陌生人。

如何生成 package.json

在我的项目文件夹下执行 npm init -y 疾速生成。-y代表一路 yes。关上文件咱们看到以下信息。

{
  "name": "package-json",
  "version": "1.0.0",
  "description": "","main":"index.js","scripts": {"test":"echo \"Error: no test specified\" && exit 1"},"keywords": [],"author":"",
  "license": "ISC"
}

一一介绍下上述字段：

• name包名称，必填项
• version包版本，必填项
• description包形容信息，一句话介绍这个包的用处
• main包入口文件。
  如require('package-json')，相当于应用了包的 index.js。该字段在开发 npm 包时较为常见，身为切图仔的咱们接触的不多。
• scripts包执行脚本，罕用的 npm start、npm run dev、npm run build 都是注册在这里的。
• keywords关键词与 description 相似，用于介绍包的用处
• author 包创建者
• license 包协定，用于规定是否开源、是否付费

web 我的项目的 package.json

大部分开发者是围绕 web 开发进行工作的。咱们来看看 web 我的项目的 package.json 常见配置字段 dependencies、devDependencies、private、scripts…

dependencies & devDependencies

面试官：请讲讲 dependencies和 devDependencies 的区别？

简略，dependencies 是生产环境的依赖，安装包时执行npm install -S xxx；devDependencies 是开发环境的依赖，安装包须要执行 npm install -D xxx

生产环境和开发环境指什么？如果不小心将 react 或 vue 这种依赖装置到 devDependencies列表中我的项目还能运行吗？

就 web 我的项目而言，笔者认为 dependencies 和devDependencies的实质差别并不大。包装置在哪，我的项目都能失常的构建、运行。差别次要在于语义表白。

dependencies往往是指打包构建后依赖包的代码会被打进产物中，在生产环境运行中是不可短少的。

devDependencies是指那些开发、构建过程中那些工具，如构建应用的 webpack、代码查看的 eslint、代码本义的 babel 等都属于开发环境依赖。他们存在的目标是：帮忙咱们将开发的代码平安、便捷的转换成用户浏览器可执行的代码。

还有一点差别，npm install –production=true 不会装置 devDependencies下的依赖的，只会装置 dependencies 的依赖。个别没人会管制这个变量。

private

若 package.json 中设置了 "private": true，npm 将回绝公布它。
web 我的项目大多不须要提交到 npm 仓库，倡议将 private 设为 true。

顺便一提 monorepo 热潮下，大家会将 monorepo 我的项目根目录的 private 设为 true，来防止哪个小伙伴误将整个目录发包

scripts

scripts管制我的项目生命周期的脚本。想一下天天用的 npm run dev、npm run build、npm run lint 都做了哪些事件。看看 scripts 配置便知。

如果想理解团队我的项目工程化实现，那么也倡议从 scripts 配置动手，一点点读懂命令对应的脚本文件，你就是工程大佬了。

scripts须要着重介绍的一点是命令钩子 pre、post。钩子能够注册某命令的前置命令和后置命令。
写个例子吧：

{
  "scripts": {
    "prexxx": "echo'start~'","xxx":"echo 'xxx running'",
    "postxxx": "echo'end!'"
  }
}

当咱们执行 npm run xxx 时会看到上面后果。prexxx、postxxx被主动执行。

用处：在 commit 之前执行 lint，npm run dev 之前主动为用户安装包等等~

想想还能够做哪些事件，欢送探讨。

engines

咱们很难保障共事间的开发环境对立，例如不同开发者的 node 版本是不统一的，有人是 8.x，有人是 10.x 有人是 14.x。来个新人问一下你们 node 用什么版本，累不累。配置下 engines 吧

"engines": {"node": ">=12.10.0 <15"}

上述版本是我乱写，如果开发者的版本不符合要求控制台会报错疏导用户去改过，防止了口口相传

非 web 我的项目的 package.json

之前介绍的字段，同样实用。有几个属性是包我的项目罕用且有用的。
如main、files、bin

main

前文曾经介绍过，包的入口文件。默认是我的项目根目录下的 index.js。

"main":"./lib/index.js",

如果你的包名是 package-json，当用户代码 require('package-json') 时，相当于 require 了你包目录下的 ./lib/index.js文件。

files

files用于决定哪些文件被公布到 npm 仓库去。不在 files 中的文件，包的使用者是无法访问的，main指向的文件也必须存在于这个列表范畴内。

"files": [
    "src",
    "dist/*.js",
    "types/*.d.ts"
  ],

bin

命令行工具入口。当你的包提供了一个命令行工具时，你须要为命令行工具指定一个入口。命令名称和本地可指定文件的对应关系。能够参考看看 vue-cli-service 的源码

"bin": {"vue-cli-service": "bin/vue-cli-service.js"}

如果你仔细的话会发现咱们我的项目下的 node_modules/bin 文件夹里有好多可执行文件。

对使用者来说：本地安装包的 bin 下的可执行文件会被链接到 ./node_modules/.bin/；全局安装包的 bin 将会被软链到 /usr/local/bin下。

dependencies & devDependencies

当咱们的我的项目作为一个包提供给他人应用时，开发者执行 npm install 咱们须要留神只有 dependencies 会作为包的依赖装置，devDependencies则会被疏忽掉，讲到这里置信大家终于能了解什么是开发环境、什么是生产环境了。

开发包是须要留神不要误将生产依赖装置到 devDependencies 中去，会导致你的用户跑不起来。

其余

倡议：有什么工程上的疑难，本人先看我的项目配置文件，还不懂再征询共事。不然可能会被喷~

关注我，不迷路