npm package.json配置

terryli
204 阅读4分钟

0. 前言

当我们使用npm等包管理工具，安装依赖的时候，我们知道他会读取package.json中的包信息来进行安装。使用npm run命令也会读取package.json中的内容，那么package.json具体有哪些配置。我们应该如何使用，下面将结合实际应用场景介绍package.json的常用配置。

在介绍具体的配置之前，我们可以先看下vue项目中package.json文件的大致内容

项目地址

{
  "name": "vue",
  "version": "2.7.14",
  "packageManager": "pnpm@7.1.0",
  "description": "Reactive, component-oriented view layer for modern web interfaces.",
  "main": "dist/vue.runtime.common.js",
  "module": "dist/vue.runtime.esm.js",
  "unpkg": "dist/vue.js",
  "jsdelivr": "dist/vue.js",
  "typings": "types/index.d.ts",
  "files": [
    "src",
    ...
  ],
  "sideEffects": false,
  "scripts": {
    ...
  },
  "keywords": [
    "vue"
  ],
  "author": "Evan You",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/vuejs/vue/issues"
  },
  "homepage": "https://github.com/vuejs/vue#readme",
  "dependencies": {
    ...
  },
  "devDependencies": {
    ...
  },
  ...
}

部分内容不看文档应该也能了解大概的意思，我把package.json中的配置大致分为以下几种类型：项目描述、项目配置、项目工具、包管理、其他

下面就从这几种类型详细描述一下常用的一些配置

1. 项目描述类

项目描述相关配置主要用于记录项目基本信息。主要有以下一些配置：

1.name        // 名称
2.description // 描述
3.version     // 版本号
4.homepage    // 主页
5.license     // 协议
6.author      // 作者
7.bugs        // 项目bug地址

author 字段为作者，内容可以为对象也可以是字符串，如下：

// 对象
"author": {
  "name" : "Barney Rubble",
  "email" : "b@rubble.com",
  "url" : "http://barnyrubble.tumblr.com/"
}

// 字符串
"author": "Barney Rubble <b@rubble.com> (http://barnyrubble.tumblr.com/)"

bugs内容为对象，标识项目的bug追踪页面地址，内容可以是对象，也可以字符串，如下：

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

// 字符串
"bugs": "https://github.com/owner/project/issues"

当使用npm bugs时会转跳到配置的bug追踪页面

npm网站也会识别package.json中的内容，展示在页面中，如下图所示：

image.png

image.png

2. 项目配置类

如果说项目描述类是对于项目一些基本信息的描述的话，那么项目配置类，是针对项目的内容的一些配置。当然，我们主要的学习内容还是具体的配置项，如何分类千人千面不必过分纠结。下面总结一下常用的一些配置选项：

private true/false

是否为私有项目，如值为true,则无法上传包至npm网站上

files Array

当项目作为依赖包被安装的时候，需要包含的文件。可以参照.gitignore来理解，语法也是一样的，可以使用通配符的方式来配置。

main String

包的入口文件，也就是插件执行的主入口。常见的场景比如，我们编写一个node脚本命令工具，如vue-cli这种脚手架工具，安装之后我们执行命令，运行的脚本或者说入口就是main指定的文件。如果没有设置的话

bin Object

{ 
  "bin": { 
    "myapp": "./cli.js" 
  } 
}

某些项目运行时，可能会包含多个可执行文件。那么我们可以在bin中定义，定义之后就可以执行配置的指令。有点类似于系统中安装的一个包，配置完PATH之后就可以在命令行中运行PATH下的所有可执行文件。

3. 项目工具类

项目工具其实就一个配置字段script, 单独把他放在一类可见他的重要性。我们在日常前端项目开发的过程中，也是会经常用到这个字段的内容。

示例，如下：

{ 
  "scripts": { 
     "preinstall": "./configure", 
     "install" : "make && make install", 
     "test" : "make test" 
   } 
}

其中可以自定义用户脚本，使用npm run xxx即可执行。我们在开发过程中，经常会遇到使用npm run dev的情况。可以看到就是在package.json中script中配置了dev的指令，如图：

image.png

4. 包管理类

包管理类型的配置常用的主要有两个：dependencies、devDependencies

dependencies 主要定义项目中要用到的依赖，要注意的是开发用到的依赖是需要定义在devDependencies中，因为当项目作为其他包的依赖包来使用时，devDependencies中的包将不会被下载，比如可能有一些外部文档等内容。

我们会注意到，这些包管理中的版本号，前面会有一些符号，比如：^、~，我会在语义化版本的文章中展开描述，这里先按下不表。

5. 其他类型

其他类型的配置，一般是根据指定依赖包的文档来行进配置的，比如eslint的配置:

  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {
      "no-debugger": "off"
    }
  },

这就需要看具体用到的依赖的doc了

6. 总结

以上就是一些常用的配置，还有其他大家如果感兴趣的话，也可以查看官网文档

-> 点我转跳

avatar
文章
阅读
粉丝