package.json文件

概述

参见：npm-package.json
每个项目的根目录下面，一般都有一个package.json文件，定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。npm install命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。
下面是一个简单的package.json文件，定义几项元数据：项目名称、项目版本、项目作者、项目描述、开源协议。

{
  "name": "mypage-app",
  "version": "1.0.1",
  "author": "William",
  "description": "第七个node.js程序",
  "license": "MIT",
  }

下面是一个完整的package.json文件。

{
  "name": "mypage-app",
  "version": "1.0.1",
  "author": "William",
  "description": "第七个node.js程序",
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/akveo/ngx-admin.git"
  },
  "bugs": {
    "url": "https://github.com/akveo/ngx-admin/issues"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "IE 11"
  ],
  "scripts": {
    "ng": "ng",
    "conventional-changelog": "conventional-changelog",
    "start": "ng serve --port 4201",
    "build": "ng build ",
    "build:prod": "npm run build -- --prod --aot",
    "test": "ng test",
    "test:coverage": "rimraf coverage && npm run test -- --code-coverage",
    "lint": "ng lint",
    "lint:fix": "ng lint ngx-admin-demo --fix",
    "lint:styles": "stylelint ./src/**/*.scss",
    "lint:ci": "npm run lint && npm run lint:styles",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "ng e2e",
    "docs": "compodoc -p src/tsconfig.app.json -d docs",
    "docs:serve": "compodoc -p src/tsconfig.app.json -d docs -s",
    "prepush": "npm run lint:ci",
    "release:changelog": "npm run conventional-changelog -- -p angular -i CHANGELOG.md -s"
  },
  "dependencies": {
    "@agm/core": "^1.0.0-beta.5",
    "@angular/animations": "^7.0.3",
    "@angular/cdk": "^7.3.5",
    "@angular/common": "^7.0.3",
    "@angular/compiler": "^7.0.3",
    "@angular/core": "^7.0.3",
    "@angular/forms": "^7.0.3",
    "@angular/http": "^7.0.3",
    "@angular/platform-browser": "^7.0.3",
    "@angular/platform-browser-dynamic": "^7.0.3",
    "@angular/router": "^7.0.3",
    "@asymmetrik/ngx-leaflet": "3.0.1",
    "@william/auth": "^1.0.1",
    "@william/bootstrap": "1.0.1",
    "@william/primeng": "1.0.1",
    "@william/security": "1.0.1",
    "@william/theme": "^1.0.2",
    "@ng-bootstrap/ng-bootstrap": "^4.0.0",
    "@swimlane/ngx-charts": "^10.0.0",
    "angular-tree-component": "7.2.0",
    "angular2-chartjs": "0.4.1",
    "angular2-toaster": "^6.1.0",
    "bit-twiddle": "^1.0.2",
    "bootstrap": "4.0.0",
    "chart.js": "2.7.1",
    "ckeditor": "4.7.3",
    "classlist.js": "1.1.20150312",
    "core-js": "2.5.1",
    "William": "^1.0.76",
    "echarts": "^4.2.2",
    "eva-icons": "^1.1.0",
    "file-system": "^2.2.2",
    "gsap": "^2.1.3",
    "intl": "1.2.5",
    "ionicons": "2.0.1",
    "leaflet": "1.2.0",
    "nebular-icons": "1.1.0",
    "ng2-ckeditor": "^1.2.2",
    "ng2-completer": "2.0.8",
    "ng2-smart-table": "1.3.5",
    "ngx-echarts": "^4.0.1",
    "ngx-qrcode2": "0.0.9",
    "node": "^11.12.0",
    "node-sass": "^4.12.0",
    "normalize.css": "6.0.0",
    "pace-js": "1.0.2",
    "parse5": "^5.1.0",
    "pixi-particles": "^4.1.0",
    "pixi.js": "^4.9.9",
    "primeicons": "^1.0.0",
    "primeng": "^7.1.0",
    "roboto-fontface": "0.8.0",
    "rxjs": "6.3.0",
    "rxjs-compat": "6.3.0",
    "socicon": "3.0.5",
    "tabulator-dh": "^1.0.2",
    "tinymce": "4.5.7",
    "typeface-exo": "0.0.22",
    "web-animations-js": "2.2.5",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "0.10.2",
    "@angular/cli": "^7.0.3",
    "@angular/compiler-cli": "^7.0.3",
    "@angular/language-service": "7.0.0",
    "@compodoc/compodoc": "1.0.1",
    "@fortawesome/fontawesome-free": "^5.2.0",
    "@types/d3-color": "1.0.5",
    "@types/googlemaps": "^3.30.4",
    "@types/jasmine": "2.5.54",
    "@types/jasminewd2": "2.0.3",
    "@types/leaflet": "1.2.3",
    "@types/node": "^6.14.4",
    "codelyzer": "^4.5.0",
    "conventional-changelog-cli": "1.3.4",
    "husky": "0.13.3",
    "jasmine-core": "2.6.4",
    "jasmine-spec-reporter": "4.1.1",
    "karma": "1.7.1",
    "karma-chrome-launcher": "2.1.1",
    "karma-cli": "1.0.1",
    "karma-coverage-istanbul-reporter": "1.3.0",
    "karma-jasmine": "1.1.0",
    "karma-jasmine-html-reporter": "0.2.2",
    "npm-run-all": "4.0.2",
    "protractor": "5.1.2",
    "rimraf": "2.6.1",
    "stylelint": "7.13.0",
    "ts-node": "3.2.2",
    "tslint": "5.7.0",
    "tslint-language-service": "^0.9.9",
    "typescript": "3.1.3"
  }
}

repository

对于组件库很有用，让组件库使用者找到你的代码库地址，这个配置项会直接在组件库的npm首页生效。
就像下面这样：

"repository": {
  "type" : "git",
  "url" : "git+https://github.com/akveo/ngx-admin.git"
}

"repository": {
  "type" : "svn",
  "url" : "https://v8.googlecode.com/svn/trunk/"
}

bugs

项目问题跟踪器的URL（和）或报告问题的电子邮件地址。这些对于遇到包装问题的人很有用。

"bugs": {
    "url": "https://github.com/akveo/ngx-admin/issues",
    "email" : "[email protected]"
  }

browserslist

参见：browserslist browserslist用法
Browserslist是一个配置，用于在不同的前端工具之间共享目标浏览器。

package.json
如果要减少项目根目录中的配置文件，可以package.json使用browserslistkey 指定浏览器：

{
  “ browserslist ”：[
     “ last 2 version ”，
     “ > 1％”，
     “ IE 11 ”
  ]
}

.browserslistrc配置文件

# Browsers that we support

last 2 version
> 1%
IE 11 # sorry

scripts

参见：npm-scripts
“scripts”属性是一个包含脚本命令的字典，这些命令在包的生命周期中的不同时间运行，指定了运行脚本命令的npm命令行缩写，比如start指定了运行npm run start时，所要执行的命令。
下面的设置分别指定了npm run start、npm run build、npm run test时，所要执行的命令。

"scripts": {
    "start": "ng serve --port 4201",
    "build": "ng build ",
    "test": "ng test",
    }

bin

bin用来指定各个内部命令对应的可执行文件的位置。

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

bin在package.json中提供一个字段myapp，该字段是命令名称到本地文件名的一个映射，npm会寻找这个文件将该文件符号链接到 prefix/bin全局安装或./node_modules/.bin/本地安装，从cli.js脚本 创建一个符号链接/usr/local/bin/myapp。

man

用来指定当前模块的man文档的位置，指定单个文件或文件名数组，man文件必须以数字结尾，该数字指示文件安装到哪个man部分。

{ 
 "man" : "./man/doc.1"
}

上面的代码会链接./man/doc.1文件，使其成为目标man foo。

dependencies&devDependencies

dependencies指定了项目运行所依赖的模块，devDependencies指定项目开发所需要的模块。它们都指向一个对象。该对象的各个成员，分别由模块名和对应的版本要求组成，表示依赖的模块及其版本范围。
对应的版本可以加上各种限定，主要有以下几种：

类型	效果
指定版本：	比如1.2.2，遵循“大版本.次要版本.小版本”的格式规定，安装时只安装指定版本。
波浪号指定版本：	比如~1.2.2，表示安装1.2.x的最新版本（不低于1.2.2），但是不安装1.3.x，也就是说安装时不改变大版本号和次要版本号。
插入号指定版本：	比如ˆ1.2.2，表示安装1.x.x的最新版本（不低于1.2.2），但是不安装2.x.x，也就是说安装时不改变大版本号。需要注意的是，如果大版本号为0，则插入号的行为与波浪号相同，这是因为此时处于开发阶段，即使是次要版本号变动，也可能带来程序的不兼容。
latest：	安装最新版本。

package.json文件可以手工编写，也可以使用npm init命令自动生成。

$ npm init

这个命令采用互动方式，要求用户回答一些问题，然后在当前目录生成一个基本的package.json文件。所有问题之中，只有项目名称（name）和项目版本（version）是必填的，其他都是选填的。

有了package.json文件，直接使用npm install命令，就会在当前目录中安装所需要的模块。

$ npm install

如果一个模块不在package.json文件之中，可以单独安装这个模块，并使用相应的参数，将其写入package.json文件之中。

$ npm install express --save
$ npm install express --save-dev

上面代码表示单独安装express模块，–save参数表示将该模块写入dependencies属性，–save-dev表示将该模块写入devDependencies属性。

持续更新，欢迎点赞评论~