| package

package详解

package详解

作用

package.json 文件其实就是对项目或者模块包的描述，里面包含许多元信息。比如项目名称，项目版本，项目执行入口文件，项目贡献者等等。npm install 命令会根据这个文件下载所有依赖模块。

创建

  • 手动创建
    直接在项目根目录新建一个 package.json 文件，然后输入相关的内容。
  • 自动创建
    也是在项目根目录下执行 npm init，然后根据提示一步步输入相应的内容完成后即可自动创建。

示例及注释

有些配置对于开发依赖组件很重要,比如keywords,bugs,license等;
平时自己做项目主要关注scripts,dependencies,devDependencies即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
{
  "name": "exchange",   // 项目名称,注意:不能有大写,不能.或_开头
  "version": "0.1.0",   // 版本号
  "author": "zhangsan <zhangsan@163.com>",  // 项目开发者，它的值是你在https://npmjs.org网站的有效账户名，遵循“账户名<邮件>”的规则
  "description": "第一个node.js程序",   // 项目描述
  "keywords":["node.js","javascript"],  // 关键词,用于npm搜索
  "private": true,  // 是否私有,true时,无法通过npm publish发布代码
  "bugs":{"url":"http://path/to/bug","email":"bug@example.com"},    // 开发者的联系方式，代码库的issues地址等。如果代码使用者发现了bug，可以通过这个配置项找到提bug的地方。
  "contributors":[{"name":"李四","email":"lisi@example.com"}],  // 代码贡献者
  "repository": {   // 项目仓库地址
		"type": "git",
		"url": "https://path/to/url"
	},
  "homepage": "http://necolas.github.io", // 项目主页
  "license":"MIT",  // 开源协议
  "dependencies": { // 生产环境依赖
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-router-dom": "^5.0.1",
    "react-scripts": "3.0.1"
  },
  "devDependencies": {  // 开发环境依赖
    "browserify": "~13.0.0",
    "karma-browserify": "~5.0.1"
  },
  "scripts": {  // 脚本
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "bin": {  // 内部命令对应的可执行文件的路径
  "webpack": "./bin/webpack.js"
  },
  "main": "lib/webpack.js", // 代码入口。这个十分重要，特别是对于组件库。当你想在node_modules中修改你使用的某个组件库的代码时，首先在node_modules中找到这个组件库，第一眼就是要看这个main，找到组件库的入口文件。
  "module": "es/index.js",  // 是以 ES Module(也就是 ES6)模块化方式进行加载，因为早期没有 ES6 模块化方案时，都是遵循 CommonJS 规范，而 CommonJS 规范的包是以 main 的方式表示入口文件的，为了区分就新增了 module 方式，但是 ES6 模块化方案效率更高，所以会优先查看是否有 module 字段，没有才使用 main 字段。
  "eslintConfig": { // EsLint 检查文件配置，自动读取验证。
    "extends": "react-app"
  },
  "engines" : { // 项目运行的平台
    "node" : ">=0.10.3 <0.12" 
  },
  "browserslist": { // 供浏览器使用的版本列表
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "style": [    // 供浏览器使用时，样式文件所在的位置；样式文件打包工具parcelify，通过它知道样式文件的打包位置
  "./node_modules/tipso/src/tipso.css"
],
  "files": [    // 被项目包含的文件名数组
    "lib/",
    "bin/",
    "buildin/",
    "declarations/",
    "hot/",
    "web_modules/",
    "schemas/",
    "SECURITY.md"
  ]
}

主要配置说明

  • scripts

配置命令,运行脚本

1
2
3
4
5
"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
}

具体执行的是node_modules/.bin/里的命令

vue中常用配置

1
2
3
4
5
6
7
// 根据.env.development;.env.production,.env.test环境文件
"scripts": {
    "serve": "vue-cli-service serve",   // 开发环境本地服务
    "build": "vue-cli-service build --mode production", // 生产环境打包
    "build:test": "vue-cli-service build --mode test",  // 测试环境打包
    "lint": "vue-cli-service lint"
}
  • dependencies
    • 运行依赖
    • –save || -S
  • devDependencies
    • 开发依赖
    • –save-dev || -D
      1
      2
      3
      4
      5
      6
      "dependencies": {
          "foo": "1.0.0", // 指定了就是1.0.0版本
          "bar": "~1.2.2", // 安装版本号不低于1.2.2的1.2.x的最新版本，例如:1.2.3， 1.2.4等等。1.2.1 ，1.3.x 等就不行了
          "baz": "ˆ1.2.2", // 安装版本号不低于1.2.2的1.x.x的最新版本，例如: 1.2.7，1.3.1，1.7.8等。1.2.1 ，2.0.0 等就不行了。注意，如果配置是^0.x.x，则和~0.x.x的效果一样。                
          "lat": "latest"  // 安装最新版本
      }

依赖本版说明
1.0.0 固定版本
~1.2.x 向上更新,小版本可变
^1.x.x 向上更新,中小版本可变
“latest” 最新版本

package-lock.json

package-lock是用来锁定依赖版本的.会记录安装依赖时的版本信息,以及依赖的依赖的版本控制

1
2
3
4
5
6
7
8
9
10
11
"dependencies": {
    "@babel/code-frame": {
      "version": "7.15.8",  // 固定依赖版本
      "resolved": "https://registry.npmmirror.com/@babel/code-frame/download/@babel/code-frame-7.15.8.tgz?cache=0&sync_timestamp=1633553785875&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2F%40babel%2Fcode-frame%2Fdownload%2F%40babel%2Fcode-frame-7.15.8.tgz",
      "integrity": "sha1-RZkMR62tsAwDZ3uqiSIffMI9JQM=",
      "dev": true,
      "requires": {
        "@babel/highlight": "^7.14.5"   // 控制依赖的依赖版本
      }
    }
}

依赖的依赖版本貌似没有控制固定版本,而是~或^

注意:为什么不直接写死版本,而需要package-lock文件,因为只是写死版本只能固定依赖版本,依赖中的依赖不能控制.

注意: 貌似cnpm不会读取package-lock,因此版本不受控;可把npm镜像改为淘宝: npm config set registry http://registry.npm.taobao.org/

ESC