likes
comments
collection
share

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

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

什么是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 xx 或 yarn 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还有其他不常用的、或者特定环境下的配置，就不列举了。

转载自:https://segmentfault.com/a/1190000041398883
评论
请登录