Conan_W's Blogs Conan_W's Blogs
首页
  • 前端文章

    • JavaScript
    • Vue
  • 学习笔记

    • 《JavaScript教程》笔记
    • 《JavaScript高级程序设计》笔记
    • 《ES6 教程》笔记
    • 《Vue》笔记
    • 《React》笔记
    • 《TypeScript 从零实现 axios》
    • 《Git》学习笔记
    • TypeScript笔记
    • JS设计模式总结笔记
  • HTML
  • CSS
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • 友情链接
关于
  • 网站
  • 资源
  • Vue资源
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

Conan_W

Web宝宝
首页
  • 前端文章

    • JavaScript
    • Vue
  • 学习笔记

    • 《JavaScript教程》笔记
    • 《JavaScript高级程序设计》笔记
    • 《ES6 教程》笔记
    • 《Vue》笔记
    • 《React》笔记
    • 《TypeScript 从零实现 axios》
    • 《Git》学习笔记
    • TypeScript笔记
    • JS设计模式总结笔记
  • HTML
  • CSS
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • 友情链接
关于
  • 网站
  • 资源
  • Vue资源
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • JavaScript文章

  • Vue文章

    • packagejson配置文件
    • vue-cli版本的区别
    • vue-cli4

    • Vue3

    • Vue CLi3 修改webpack配置
    • Vue中的scoped和scoped穿透
    • Vue项目使用mock数据的几种方式
  • 学习笔记

  • 前端
  • Vue文章
conan_W
2021-05-15

packagejson配置文件

# package.age的配置文件的配置

使用脚手架搭建的vue项目,react项目,angular项目都会有package.json文件。当然使用webpack,gulp等打包工具也需要使用package.json文件中的配置.

Q1:什么是package.json 文件

package.json是存在于JavaScript/node项目根目录下的下的JSON文件。它保存与项目相关的元数据。并用于管理项目的依赖项,脚本,版本等

https://javascript.ruanyifeng.com/nodejs/packagejson.html#toc0

Q2: 怎么创建package.json 文件

// 创建方式一:
// 1. 指令
npm/yarn init
// 2. 终端配置信息
{
  // name属性是package.json文件中的必填字段,他表示项目的名称。
  "name": "storemanager",
  // version也是package.json文件的必填字段。该属性表示项目模块的当前版本.
  "version": "1.0.0",
  // description对这个项目进行描述
  "description": "Mastery of the package.json file",
  // private属性默认情况下为false,但也可以设置为true,以防止发布应用程序/程序包
  "private": false,
  // keywords属性值是一组关键字数组,可以帮助你识别项目并且使其他用户在搜索关键字的时候容易找到你的项目
  "keywords": [],
  //repository属性是键/值对的JSON对象,用于指定用于管理应用程序的版本控制系统。您可以指定使用的版本控制的类型,存储库的URL以及存储库内的可选目录。
  "repository": {
		"type": "git",
		"url": "https://path/to/url"
	},
  // author属性表示项目的创建者/作者
  "author": "",
  // license属性表示项目正在使用的许可证类型
  "license": "ISC"
  // main字段指定了加载的入口文件,require('moduleName')就会加载这个文件,默认为根路径下的index.js
  "main": "index.js",
  // 目录
  "directories": {
    "test": "test"
  },
  // 是运行命令行缩npm缩写
  // scripts属性采用键/值对的JSON对象,每个脚本都可以用于执行不同的任务集,例如构建,测试,整理应用程序。
  // 在命令行下,键入npm run,然后按tab键,就会显示所有可以使用的命令。
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
    "start": "node index",
    "dev": "nodemon index",
    "test": "jest",
    "lint": "eslint ./server",
  },
  // engines属性是键/值对的json对象,用于表示指定应用程序应在其上运行的库和运行的版本
  "engines": {
    "npm": "6.10.0",
    "node": "10.14.1"
  }
  // 项目运行时候的依赖的模块
  "dependencies": {
    "bcryptjs": "^2.4.3",
    "cors": "^2.8.5",
    "dotenv": "^6.1.0",
    "express": "^4.16.4",
  }
  // 项目开发时候的依赖的模块
  "devDependencies": {
    "eslint": "^4.19.1",
    "mocha": "^6.2.0",
    "nodemon": "^1.19.1",
  }
  // peerDependencies字段,就是用来供插件指定其所需要的主工具的版本。
  // 安装chai-as-promised模块时,主程序chai必须一起安装,而且chai的版本必须是1.x。如果你的项目指定的依赖是chai的2.0版本,就会报错。
  {
    "name": "chai-as-promised",
    "peerDependencies": {
      "chai": "1.x"
    }
  }
  // browser指定该模板供浏览器使用的版本。Browserify这样的浏览器打包工具,通过它就知道该打包那个文件。
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}


// 3. 当然可以使用指令生成默认的package.json
npm/yarn init -y 


// 创建方式二: 手动创建package.json
// 手动的创建,需要在项目的根目录下创建,并设定必填属性和属性值,如下:
{
  name: "my-app",   // 项目名称
  "version":"1.0.0"  // 项目版本
}
/*
dependencies 属性表示应用程序运行时候所需要的模块/软件包列表,安装依赖后,它将被添加到dependencies列表中
devDependencies 属性表示应用程序正常运行不需要的模块或者软件包列表,他们也成为开发依赖项
它们都指向一个对象。该对象的各个成员,分别由模块名和对应的版本要求组成,表示依赖的模块及其版本范围
指定版本: 1.2.4, 遵循“大版本.次要版本.小版本”的格式规定,安装时只安装指定版本。
波浪号(tilde)+指定版本: ~1.2.2,  安装时不改变大版本号和次要版本号
插入号(caret)+指定版本:比如ˆ1.2.2,  安装时不改变大版本号。如果大版本号为0,则插入号的行为与波浪号相同
通过指令安装对应的模块时候: 
--save 参数表示将该模块写入dependencies属性
--save-dev 表示将该模块写入devDependencies属性

其他: 
1. bin项用来指定各个内部命令对应的可执行文件的位置。
"bin": {
  "someTool": "./bin/someTool.js"
}
2. config字段用于添加命令行的环境变量。
"config" : { "port" : "8080" },
3. man用来指定当前模块的man文档的位置。
"man" :[ "./doc/calc.1" ]
4. preferGlobal的值是布尔值,表示当用户不将该模块安装为全局模块时(即不用–global参数),要不要显示警告,表示该模块的本意就是安装为全局模块。
5. style指定供浏览器使用时,样式文件所在的位置。样式文件打包工具parcelify,通过它知道样式文件的打包位置
"style": [
  "./node_modules/tipso/src/tipso.css"
]
6. homepage属性用于指定应用程序/程序包的登录页面
"homepage": "https://github.com/Easybuoy/package.json-mastery#readme",
7. bugs属性用于指向应用程序存储库的问题页面或可以报告项目任何问题的地方
"bugs": {
   "url": "https://github.com/Easybuoy/package.json-mastery/issues"
}
*/
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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
编辑 (opens new window)
四级文件(测试)
vue-cli版本的区别

← 四级文件(测试) vue-cli版本的区别→

最近更新
01
vue-cli3的改变
05-15
02
babel-polyfill
05-15
03
babelrc文件配置
05-15
更多文章>
Theme by Vdoing | Copyright © 2019-2026 Conan_W | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式
×