默认的package.json文件直接使用命令:npm init --yes生成
{
"name": "pingdingshan",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
name:包名字
version:包版本,x.x.x的格式,符合语义化版本规则
description:一些描述信息
main:入口文件,一般是index.js
scripts:指定了运行脚本命令的npm命令行缩写,默认是空的test
author:作者信息
license:许可证,默认是ISC、有的默认是MIT
npm run 可列出package.json中scripts的所有脚本命令
npm run test就会执行:echo “Error: no test specified” && exit 1
以我们公司项目的package.json文件部分为例:
{
"name": "h5-components",
"version": "1.2.0",
"description": "",
"main": "./lib/index",
"module": "./es/index",
"files": [
"lib",
"es",
"dist",
"assets"
],
"repository": "http://.../h5-components.git",
"homepage": "http://...",
"author": "",
"license": "MIT",
"scripts": {
"dll": "webpack --config webpack.dll.config.js",
"rccompile": "rc-tools run compile --babel-runtime --copy-files",
"dev": "webpack-dev-server --env.api dev",
"rcdist": "rc-tools run dist",
"ucs": "yarn upgrade h5-css",
"rclint": "rc-tools run lint",
"build": "yarn rccompile && git add . && git commit -m '[compile]' && git pull && git push"
},
"config": {
"port": 8089,
"entry": {
"h5-components": [
"./index.js"
]
}
},
"dependencies": {
"antd-mobile": "^2.2.0",
"classnames": "^2.2.1",
"exif-js": "^2.3.0"
},
"devDependencies": {
"file-loader": "^1.1.5",
"less-loader": "^4.1.0",
"lodash": "^4.17.4",
"lodash-webpack-plugin": "^0.11.4",
"mini-css-extract-plugin": "^0.4.1"
},
"sideEffects": [
"*.scss"
],
"browserslist": [
"iOS >= 8",
"Firefox >= 20",
"Android > 4.2",
"> 1%",
"last 2 versions",
"not ie <= 10"
]
}
module:es6编译入口文件
main:es5编译入口文件
files:包含在项目中的文件(夹)数组,可以声明一个.gitignore来忽略部分文件
repository:项目代码存放的地方
homepage: 项目主页url,(包的官网)
config:字段用于添加命令行的环境变量。
dependencies:在生产环境中需要用到的依赖
devDependencies:在开发、测试环境中用到的依赖
sideEffects:如果没有这个值,打包时会出错,参照css issue
browserslist:指定该模板供浏览器使用的版本
bugs:填写一个bug提交地址,便于用户反馈
下面的更仔细
接下来,我们先看一个常用的例子
{
"name": "demo",
"version": "1.0.0",
"description": "这里是介绍",
"main": "index.js",
"scripts": {
"build": "webpack --config webpack.config.js",
"sync": "gulp sync",
"syncbuild": "gulp sync && webpack --config webpack.config.js"
},
"author": "will",
"license": "ISC",
"dependencies": {
"react": "16.*"
},
"devDependencies": {
"babel": "^6.23.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-polyfill": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-es2015-loose": "^8.0.0",
"eslint": "^4.10.0",
"gulp": "^3.9.1",
"webpack": "^3.8.1"
}
}
我们来详细说明一下文件中各个字段的含义与用法
简单关键字说明
name, version, description, main, author, license通过字面意思即可理解,
需要说明的是,
version标注了当前项目的版本号,如果是私有项目,不发布到仓库(repository),此项关键字可以不用变更;
main是我们模块或者是项目的入口文件,有且只有一个文件,文件的路径是相对项目的根目录;
license是标注我们项目的许可证权限,如果是开源项目,请参考阮一峰开源许可证教程。
如果不想开源,可以使用
{ "license": "UNLICENSED" }
或者
{ "private": true }
重点关键字说明
scripts,dependencies,devDependencies
首先我们来看看scripts
scripts是npm提供给我们运行shell命令的入口
{
"scripts": {
"build": "webpack --config webpack.config.js",
"sync": "gulp sync",
"syncbuild": "gulp sync && webpack --config webpack.config.js"
}
}
我们可以通过npm run build启动webpack --config webpack.config.js
这条命令等同于在命令行中输入webpack --config webpack.config.js
例子中syncbuild是前两步的合并,build为编译,sync为同步文件
这里的key为npm run时接受的参数,value代表着需要运行shell命令
dependencies与devDependencies看起来差不多,他们都是标注项目的依赖列表
不同的是,dependencies是项目运行时必要依赖,而devDependencies是项目开发时所需依赖
明确了以上的不同,就可以很清晰知道把项目依赖放在哪里了
平时使用的时候我们会通过
npm i --save react
安装依赖,此依赖会写入dependencies列表
如需将依赖写入devDependencies
npm i --save-dev react
这里还有一点需要注意,我们的项目在发布后,他人在使用时默认会将dependencies列表的依赖全部安装
npm i packagename
或者
npm i packagename --production
如果需要安装开发环境
npm i packagename --dev
这样会将项目的开发依赖包全部安装到本地
依赖列表中版本号说明
首先来看一下npm官方给出的例子
{
"dependencies": {
"foo": "1.0.0 - 2.9999.9999",
"bar": ">=1.0.2 <2.1.2",
"baz": ">1.0.2 <=2.3.4",
"boo": "2.0.1",
"qux": "<1.0.0 || >=2.3.1 <2.4.5 || >=2.5.2 <3.0.0",
"asd": "http://asdf.com/asdf.tar.gz",
"til": "~1.2",
"elf": "~1.2.3",
"two": "2.x",
"thr": "3.3.x",
"lat": "latest",
"dyl": "file:../dyl"
}
}
这里的版本号有多种形式
明确版本号,即 "2.0.1"
版本号区间,有多种写法,支持比较表达式以及或运算,即 "<1.0.0 || >=2.3.1 <2.4.5 || >=2.5.2 <3.0.0"
模糊匹配
2.x 会匹配所有2.0.0到3.0.0之间的版本,比如2.x会匹配2.0.0 和 2.3.5,但不包括3.0.0
~ 会匹配最近的小版本依赖包,比如~1.1.3会匹配所有1.1.x版本,但是不包括1.1.0
^ 会匹配最新的大版本依赖包,比如^2.2.2会匹配所有2.x.x的包,包括2.3.0,但是不包括3.0.0
* 会匹配所有版本
"" 会匹配所有版本
latest 会匹配一个给定的特殊tag版本
http 或者 git 路径 会匹配给定url地址
本地路径会匹配本地文件包,不过此路径使用需要先初始化本地依赖包
git路径的格式如下
<protocol>://[<user>[:<password>]@]<hostname>[:<port>][:][/]<path>[#<commit-ish> | #semver:<semver>]
<protocol>为枚举类型,git, git+ssh, git+http, git+https, git+file.
git+ssh://git@github.com:npm/npm.git#v1.0.27
git+ssh://git@github.com:npm/npm#semver:^5.0
git+https://isaacs@github.com/npm/npm.git
git://github.com/npm/npm.git#v1.0.27