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" : "project@hostname.com"
  }

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属性。

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值