高级前端必会的package.json字段知识详解

目录
  • 概览
  • name
    • name命名规范
    • 不安全的URL字符
    • 私源npm包怎么命名?
  • version
  • description
  • keywords
  • homepage
  • repository
  • license
  • author
  • contributors
  • files
  • main
  • bin
  • scripts
  • dependencies、devDependencies、peerDependencies
  • private
  • publishConfig
  • types
  • module
  • unpkg
  • sideEffects
    • 注意点
  • engines
  • os
  • cpu
  • workspaces
  • bugs
  • 参考

概览

本文重点讲解前端项目的package.json文件中,所涉及到的字段含义和它的使用场景。
避免一些配置性的错误,提高项目的维护性。

name

如果项目是需要发版为npm包的,则name字段是必须的。
因为它涉及到npm包的命名。

举个例子

笔者曾发布过开源的npm包,名字是ping-url
对应的源代码package.json的定义如下:

{
  "name": "ping-url",
  "version": "1.0.3",
  "description": "Check the url is normally accessible or not"

  // other
}

如果项目是不需要发版成npm包的,则name字段是可选的,不一定要设置。

name命名规范

  • name字符串长度,必须小于或等于214个字符。
  • 同一作用域内的包,可以用._作为开始字符
  • 不能使用大写字母命名
  • 因为name字段,在下载npm包时,会应用于url中,所以不能带任何不安全的URL字符。

不安全的URL字符

  • 空格" "
  • 大于小于号<>
  • 方括号[]
  • 花括号{}
  • 竖线|
  • 反斜杠\
  • 插入号^
  • 百分比%

私源npm包怎么命名?

格式:@[scope]/[name]

举个例子:

笔者想要发布个私源是@leon,包名是ping-url的包,则name需要命名为:@leon/ping-url

{
  "name": "@leon/ping-url",
  "version": "1.0.3"
}

安装命令:npm install @leon/ping-url

version

version字段用于定义版本号。

如果项目是为发布npm包,则必须包含此字段。如果是普通的项目,则此字段是可选的。

每次发布的version,必须是唯一的,之前发布的时候没使用过的。
version 的命名规则和注意点,可以参考笔者的另一篇文章package.json怎么管理依赖包版本?,这里就不展开了。

description

description用于描述当前项目的概况。
如上图所示,发布的npm包,在搜索结果中,可以直接显示description内容,方便使用方直接了解包的功能。

keywords

图中标签在package.json中对应的定义:

"keywords": [
    "ping url",
    "ping host",
    "ping"
  ]

从上述例子可以很清晰地看出,keywords是标签,用于标记当前项目的重点词汇。同时,可以作为搜索关键词,提供给资源平台使用,进行索引。

homepage

项目的官网主页地址。

"homepage": "https://github.com/wall-wxk/ping-url"

项目有对应官网地址的话,可以在homepage中声明。如果没有的话,也可以像笔者这样,放个github项目源码入口。

repository

项目的源码地址。

"repository": {
    "type": "git",
    "url": "https://github.com/wall-wxk/ping-url.git"
}

开源项目,这个字段很重要。
因为有意向的协作者,可以通过字段信息,便捷地进入查看项目源码。

license

项目的协议类型。

这个项目涉及到知识产权方面的知识。所以开源项目的时候,要重点考虑到底要用哪个协议,而不是无脑用MIT。 具体的可选协议列表,可查看SPDX License List

author

作者信息。

"author": {
    "name": "leon",
    "email": "582104384@qq.com",
    "url": "https://wangxiaokai.vip"
}

如果有兴趣让别人知道你是谁,这个字段是必不可少的。
当然如果你的代码是shit mountain,这个字段也可以让别人知道是你写的....

contributors

协作者信息。

格式是一个对象数组。对象内容和author一致。

"contributors": [{
    "name": "hanmeimei",
    "email": "hanmeimei@qq.com"
},{
    "name": "lihua",
    "email": "lihua@qq.com"
}]

files

声明有哪些文件,是需要作为依赖项,保留下来。
不然,执行npm publish进行发布时,这些文件是会自动屏蔽上传的。
同理,也可以使用.npmignore文件进行配置。

"files": [
    "dist/*.js",
    "lib"
]

如果没有files字段声明,则这些文件,都不会保留,npm包将不能使用。

main

使用npm包时,需要进行require(..)的操作。这个操作,会查看main字段,找到程序的主入口。

bin

工具性质的npm包,一定有bin字段,对外暴露脚本命令。

举个例子

"bin": {
    "npg-cli": "bin/cli"
}

笔者发布的npm-package-cli包,是用于生成npm包脚手架的工具,对外暴露了脚本命令:npg-cli。详情可查看npm-package-cli
使用方安装npm-package-cli包后,npg-cli命令会进行注册,可以在CMD中识别并运行。

scripts

项目脚本命令。(PS:这个就不需要解释了:))

需要注意的,一定要有约定俗成的规范脚本命令,降低维护成本。
比如:

  • npm run start 项目启动
  • npm run build 打包

dependencies、devDependencies、peerDependencies

依赖的使用性质划分。详细可查看笔者的文章package.json怎么管理依赖包版本?

需要提及的一点:peerDependencies在npm包的依赖关系处理中,很重要。

举个例子

UI组件库leon-ui 依赖React版本16,那么package.json中,应该用peerDependencies告知使用方,需要React 16。

"peerDependencies": {
    "react": "&gt;=16.8.0"
}

大家还可以注意项目npm install时,控制台会输出一些依赖的WARN,就是peerDependencies在起作用。

private

private和发布npm包相关。

private: true时,npm会拒绝发布当前项目。这是防止意外发布个人仓库的一种保护方式。

publishConfig

用于定义发布npm时,设置相关信息。

举个例子:
笔者发布私源npm包,到自己的npm服务,可以配置如下:

"publishConfig": {
  "registry": "http://npm.wangxiaokai.vip/repository/",
  "access": "public",
  "tag": "leon-tag"
}
  • registry 发布的npm私源地址
  • access 发布有作用域的包(比如@leon/ping-url),必须要设置access
  • tag 指定当前版本对应的标签

如图所示,右侧即是标签tag。

注意
如果没有显式指定tag,默认tag是latest

types

项目如果是用TypeScript写的,则需要types字段,对外暴露相关的类型定义。

module

性质等同于main字段。module用于ES6规范的模块,只要支持ES6,会优先使用module入口。
这样,代码也可以启用tree shaking机制。

unpkg

CDN方式下,引入当前npm包的链接。

sideEffects

sideEffects格式:boolean | string[]

sideEffects: false用于告知打包工具(webpack),当前项目无副作用,可以使用tree shaking优化。

sideEffects的值,也可以是一个文件路径组成的数组。告知哪些文件无副作用,可以使用tree shaking优化。

"sideEffects": [
    "a.js",
    "b.js"
]

注意点

"import xxx;"语句,只引入未使用,如果声明了sideEffects,则会被tree shaking删除掉。

并且,由于tree shaking只在production模式生效,所以本地开发会一切正常,生产环境很难及时发现这个问题。

当然, 样式文件使用"import xxx;"的方式引入,会进行保留。

engines

项目运行环境的要求声明。

"engines": {
    "node": "&gt;=0.10.3 &lt;15"
}

上述代码,告知node版本需要在0.10.315之间,才可以运行当前项目。
在不符合条件的环境中运行项目时,控制台会有报错输出。

os

操作系统的要求声明。

"os": [
    "darwin",
    "linux"
]

cpu

CPU的要求声明。

"cpu": [
    "x64",
    "ia32"
]

workspaces

monorepo类型的项目,需要用到workspaces。它可以告知其他工具,当前项目的工作区间在哪里。

{
  "name": "workspace-example",
  "workspaces": [
    "./packages/*"
  ]
}

具体怎么在实战中使用,可查看笔者的另一篇文章使用Yarn与Lerna管理monorepo

bugs

开源项目用于接收bug反馈。

{
  "url" : "https://github.com/owner/project/issues",
  "email" : "project@hostname.com"
}

参考

npm Docs

以上就是高级前端必会的package.json字段知识详解的详细内容,更多关于前端package.json字段的资料请关注我们其它相关文章!

(0)

相关推荐

  • VSCode插件开发全攻略之package.json详解

    package.json 在详细介绍vscode插件开发细节之前,这里我们先详细介绍一下vscode插件的package.json写法,但是建议先只需要随便看一下,了解个大概,等后面讲到具体细节的时候再回过头来看. 如下是package.json文件的常用配置,当然这里还不是全部: { // 插件的名字,应全部小写,不能有空格 "name": "vscode-plugin-demo", // 插件的友好显示名称,用于显示在应用市场,支持中文 "displa

  • package.json中homepage属性的作用详解

    Package.json 属性说明 name - 包名. version - 包的版本号. description - 包的描述. homepage - 包的官网 url . author - 包的作者姓名. contributors - 包的其他贡献者姓名. dependencies - 依赖包列表.如果依赖包没有安装,npm 会自动将依赖包安装在 node_module 目录下. repository - 包代码存放的地方的类型,可以是 git 或 svn,git 可在 Github 上.

  • 最全的package.json解析

    目录 1. 概述 2. name字段 3. version字段 4. description字段 5. keywords字段 6. homepage字段 7. bugs字段 8. license字段 9. author字段 contributors字段 10. files字段 11. main字段 12. bin字段 13. man字段 14. directories字段 15. repository字段 16. scripts字段 17. config字段 18. dependencies字段

  • package.json各个属性说明详解

    什么是Node.js的模块(Module)? 在Node.js中,模块是一个库或框架,也是一个Node.js项目.Node.js项目遵循模块化的架构,当我们创建了一个Node.js项目,意味着创建了一个模块,这个模块的描述文件,被称为package.json --  [长城_changcheng] 一般package.json放置在项目根目录下,其基本结构如下图所示: package.json 结构图 属性介绍 description 字符串.用来描述当前项目的大致功能. name 此项目包的名

  • nodejs如何在package.json中设置多条启动命令

    有时候需要在package.json中的scripts设计类似于批处理的多条命令.此时需要使用&&或&操作符来连接多个操作. 比如: "scripts": { "build": "(webpack --config webpack.prod.js) &&➊ (ng build)", "start": "webpack &➋ (ng serve)" }, 如果命

  • 你可能不知道的package.json属性详解

    目录 概述 name version description keywords homepage bugs license 和用户相关的属性:author,contributors files main bin man directories directories.lib directories.bin directories.man directories.doc directories.example repository scripts config dependencies URLsa

  • 高级前端必会的package.json字段知识详解

    目录 概览 name name命名规范 不安全的URL字符 私源npm包怎么命名? version description keywords homepage repository license author contributors files main bin scripts dependencies.devDependencies.peerDependencies private publishConfig types module unpkg sideEffects 注意点 engin

  • javascrip高级前端开发常用的几个API示例详解

    目录 MutationObserver API 特点 IntersectionObserver API 举个例子 图片懒加载 无限滚动 getComputedStyle() API 与style的异同 getBoundingClientRect API 应用场景 1.获取 dom 元素相对于网页左上角定位的距离 2.判断元素是否在可视区域内 MutationObserver MutationObserver 是一个可以监听 DOM 结构变化的接口. 当 DOM 对象树发生任何变动时,Mutati

  • package.json文件配置详解

    package.json 是npm init命令初始化后,在项目的根目录下自动生成的配置文件,它定义了这个项目的配置信息以及所需要的各种模块,npm install根据这个命令,自动下载所需的模块.package.json就是一个json文件,json本身只是一种数据格式,它本身并不支持注释,此处的注释只是为了更加方便的理解package.json的各个字段 { //项目名称 "name": "demo", //version是版本(遵守"大版本.次要版本

  • package.json配置文件构成详解

    1.项目基础信息 "name": "XXXXXXX", "version": "1.0.0", "description": "A Vue.js project", "author": "wyj <XXXXXXXXX@qq.com>", "private": true, 2.脚本部分 "scripts&qu

  • MySQL中JSON字段数据类型详解

    目录 前言 创建JSON值 搜索JSON类型数据 在 JSON 和非 JSON 值之间转换 JSON 值的汇总 总结 前言 JSON 类型是从 MySQL 5.7 版本开始支持的功能,MySQL 支持由RFC 7159定义的本机JSON数据类型,该类型可有效访问 JSON(JavaScript 对象 table 示法)文档中的数据.与将 JSON 格式的字符串存储在字符串列中相比,JSON数据类型具有以下优点: 自动验证存储在JSON列中的 JSON 文档.无效的文档会产生错误. 优化的存储格式

  • javascript中json基础知识详解

    大致介绍 JSON(JavaScript Object Notation  JavaScript对象表示法),JSON是一种数据格式,不是一种编程语言.虽然它的名字中有JavaScript但是它却不属于JavaScript,就像Java和JavaScript的关系一样.而且,并不是只有JavaScript才使用它,毕竟 JSON 只是一种数据格式.很多编程语言都有针对 JSON 的解析器和序列化器. JSON是由Douglas Crockford在2001年提出,为了取代XML 语法 JSON的

  • 前端JavaScript大管家 package.json

    前言: 今天来看看前端的大管家package.json文件相关的配置,充分了解这些配置有助于我们提高开发的效率,规范我们的项目.文章内容较多,建议先收藏在学习! 在每个前端项目中,都有package.json文件,它是项目的配置文件,常见的配置有配置项目启动.打包命令,声明依赖包等.package.json文件是一个JSON对象,该对象的每一个成员就是当前项目的一项设置.package.json作为前端的大管家,到底有哪些配置和我们的日常开发密切相关?下面就来仔细剖析一下这个文件.​ 当我们搭建

  • npm start运行项目过程package.json字段详解

    目录 正文 项目名称 项目版本号 项目介绍 执行命令 1 包配置安装npm install(npm i) 2 打包项目 npm run build 3 运行项目 npm run dev 存储库 关键词 bugs homepage 正文 在js项目运行时,通常输入npm start,即可运行,其运行过程如下: npm start首先会安装一系列的必要程序,这些程序依赖package.json中的内容, package.json里默认定义了项目名称.项目版本号.项目介绍.项目作者.执行命令.生产环境

  • php检查函数必传参数是否存在的实例详解

    php检查函数必传参数是否存在的实例详解 在php实际编程中,接口经常会接收到前端传来的参数,其中有些参数不是必传的,有些参数是必传的,如何"检查函数必传参数是否存在"呢?为了解决该问题,可以参考以下的示例方法: /** * @brief 检测函数必传参数是否存在 * @param $params array 关联数组 要检查的参数 * @param array $mod array 索引数组 要检查的字段 * @param array $fields array 索引数组 额外要检查

  • MySQL操作之JSON数据类型操作详解

    上一篇文章我们介绍了mysql数据存储过程参数实例详解,今天我们看看MySQL操作之JSON数据类型的相关内容. 概述 mysql自5.7.8版本开始,就支持了json结构的数据存储和查询,这表明了mysql也在不断的学习和增加nosql数据库的有点.但mysql毕竟是关系型数据库,在处理json这种非结构化的数据时,还是比较别扭的. 创建一个JSON字段的表 首先先创建一个表,这个表包含一个json格式的字段: CREATE TABLE table_name ( id INT NOT NULL

随机推荐