likes
comments
collection
share

前端模块化的身份证:package.json

作者站长头像
站长
· 阅读数 38

什么是package.json?

package.json是JavaScript项目的清单,该文件记录了你的项目的名称、版本、依赖等相关信息,同时它也是你将项目发布到npm上的依据,可以说,package.json在前端模块化时代,相当于项目的身份证,充分了解package.json的用户和含义是前端必备过程

初始化package.json

通过npm或者yarn指令可以快速创建package.json文件:

npm init -y
// or
yarn init -y

-y 表示创建默认的package.json,如果不使用-y,则会要求你主动填写json内容。

默认文件内容:

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

package.json的配置

  • name

项目名称,必填字段,默认取的是当前项目的文件夹名字。

字段值限制:

  1. 长度必须 <= 214个字符,只能包含小写字母、'-'和'_'。如果项目要发布到npm,必须符合该规范,即使不需要发布到npm,我们仍应该准守这样的规范,养成好习惯
  2. 如果你的项目要发布到npm,name就不能与已有的包名重复,在创建package.json之前,我们可以通过npm指令来检查是否名字重复:
npm view package-name

package-name替换成自己的项目名,如果npm上存在对应的包,会返回该包的模块信息,否则返回404

  • version

项目版本号,格式为 主版本号.次版本号.修订号,主版本号通常表示做了不兼容的API修改,次版本号通常表示做了向下兼容的的功能性新增,修订号表示做了向下兼容的bug修复

如果版本改动比较大,运行不稳定,可以先发布先行版本,在常规版本号后面通过'-'连接标识符:内部版本(alpha)、公测版本(beta)和候选版本(rc),如:

'2.1.0.alpha'
'2.1.0-beta'
'2.1.0-rc'

先行版本后仍可接小版本后,表示不同的先行版本:

'2.1.0.alpha.1'
'2.1.0.alpha.5'

通过npm指令,可以查看线上npm包的最新版本以及版本记录

// 查看最新版本
npm view package-name version

// 查看所有版本号
npm view package-name version
  • description

项目的简介,让别人知道你的项目是用来做什么的,这在你发布到npm上时特别有用

  • main

main指定了项目的入口文件,当你制作一个插件发布到npm上后,别人通过import和require等方式导入你的项目时,导入的就是main指定的文件,如果不指定main字段,则会在导入时自动寻求根目录下的 index.js、index.json等index命名的文件,如果没有找到,导入就会报错。

  • scripts

定义项目node脚本,通过key-value的形式定义脚本名脚本执行内容,前端项目中通过 npm run xxyarn xx 执行对应脚本。比如:npm run dev

比较少人知道的一种用法是:通过特殊的命名,可以达到命令前置、后续的操作,比如当你开发运行项目开发时,希望项目文档服务先启动,可以这样实现:

{
    // ...
    "scripts": {
        "dev": "npm run server",
        "predev": "npm run docs"
    }
}

当你运行指令 npm run dev 时,其中 predev 指令会先执行完,如果你希望后续再执行其他指令,可以使用 postdev 命令名。

predevpostdev中的dev对应你的dev指令名
  • keywords

项目的关键词,有助于npm上的搜索

  • author

项目作者,可以使用字符串,可以使用对象:

{
    "author": "landejin <1294619453@qq.com> (http://landejin.cn)"
}
{
    "author": {
        "name": "landejin",
        "email": "1294619453@qq.com",
        "url": "http://landejin.cn"
    }
}
  • license

项目遵循的协议

  • contributors

项目协作者,使用数组,和author一样可以填写字符串或者对象

{
    "contributors": [
        "landejin <1294619453@qq.com> (http://landejin.cn)"
    ]
}
  • bugs

项目的的问题跟踪器,一般可以链接到github的issues

{
  "bugs": "https://github.com/nodejscn/node-api-cn/issues"
}
  • engines

项目运行的版本信息,该配置只起说明作用

{
    "engines": {
      "node": ">= 6.0.0",
      "npm": ">= 3.0.0",
      "yarn": "^0.13.0"
    }
}
  • homepage

项目的主页,通常是官方文档之类的文档

{
  "homepage": "http://nodejs.cn"
}
  • private

声明当前包是私有包,避免误操作发布到npm上

{
  "private": true
}
  • dependencies

项目发布运行所依赖的npm包,当使用 npm install xx 时,用依赖包会自动写入该配置项

{
    "dependencies": {
      "vue": "^2.5.2"
    }
}
  • devDependencies

项目开发时所依赖的npm包,写在该配置的包表示只在开发过程中使用,而不会出现在线上的代码中,比如ESLint、Less等

{
    "devDependencies": {
      "autoprefixer": "^7.1.2",
      "babel-core": "^6.22.1"
    }
}
  • browserslist

用于标识项目支持的浏览器环境,babel、Autoprefixer和其他工具会用到该配置

"browserslist": [
  "> 1%",
  "last 2 versions",
  "not ie <= 8"
]

详细的用户和配置可以参考: [https://www.npmjs.com/package...]


上面只列举了常用的一些配置,package.json还有其他不常用的、或者特定环境下的配置,就不列举了。