前言：使用vue-cli创建的项目中，根目录有package.json文件，是整个项目的配置文件，对于iOS开发出身的我来说，先简单的理解为cocoapods组件中的podspec文件吧。虽然脚手架会自动生成，但是了解学习一下，还是很有必要的。
1. package.json文件作用
在每个前端项目中，都有package.json文件，它是项目的配置文件：
- 包含项目描述、项目名称、版本等数据；
- 管理本地安装的npm包，用于定义这个项目所需要的各种模块，记录模块信息；
- 方便搭建项目，有现成的项目配置文件package.json，可以方便的一键构建项目；
下面是通过vue-cli脚手架创建项目中的package.json文件，先有个大概的印象，具体的说明会在下面给出：
{
"name": "hello-world", // 项目名称
"version": "0.1.0",
"private": true,
"scripts": { // 脚本
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": { // 依赖包
"core-js": "^3.8.3",
"vue": "^3.2.13",
"vue-router": "^4.1.3"
},
"devDependencies": { // 开发时的依赖包
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "@babel/eslint-parser"
},
"rules": {
"vue/multi-word-component-names": "off"
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead",
"not ie 11"
]
}
可以使用npm init命令创建一个package.json文件，按照提示依次输入一些信息即可：
package name: (app) app
version: (1.0.0)
description: 测试项目
entry point: (index.js)
test command: test run
git repository: https://test
keywords: 测试，项目
author: aaa
license: (ISC)
About to write to /Users/zzzz/Desktop/app/package.json:
{
"name": "app",
"version": "1.0.0",
"description": "测试项目",
"main": "index.js",
"scripts": {
"test": "test run"
},
"repository": {
"type": "git",
"url": "https://test"
},
"keywords": [
"测试，项目"
],
"author": "aaa",
"license": "ISC"
}
如果不想这么麻烦，可以使用
npm init -y超速创建一个默认的package.json文件。
再次执行npm install命令，会在根目录下生成package.lock.json文件、@node_modules文件夹(如果package.json文件中有依赖的话)。和iOS开发经常看到的pofile.lock、pods文件夹的作用是一样的。这里不做赘述，主要是学习package.json文件的配置。
2. package.json的常用配置
下面对于package.json的说明比较多，按需学习即可，等用的时候现查也可以。
image.png
2.1 必须属性
2.1.1 name
name就是项目名称，很好理解，但是需要注意下面几点：
- 软件包在npm上发布时，会基于此属性获得自己的URL，不能包含非URL安全字符；
- 名称可以作为参数被传入require("")，用来导入模块，应尽量简短；
- 不能和其它模块名称重复，可以使用
npm view xx命令查询模块名是否重复，不重复则提示404；
2.1.2 version
version表示该项目包的版本号，再每次项目改动后，即将发布时，都要同步修改下版本号。
一般是主版本号.次版本号.修订号，还可以用
-加上alpha（内部版本）、beta（公测版本）、rc（候选版本）进行说明。
可以通过以下命令来查看npm包的版本信息：
// 查看最新版本
npm view xxx version
// 查看所有版本
npm view xxx versions
2.2 描述属性
package.json中有五个和项目包描述信息相关的配置字段，下面就分别来看看这些字段的含义。
2.2.1 description
description字段用来描述这个项目包，它是一个字符串，可以让其他开发者在 npm 的搜索中发现我们的项目包。
2.2.2 keywords
keywords字段是一个字符串数组，表示这个项目包的关键词。和description一样，都是用来增加项目包的曝光率的。下面是eslint包的描述和关键词：
image.png
2.2.3 author
author顾名思义就是作者，表示该项目包的作者。
2.2.4 contributors
contributors表示该项目包的贡献者。
2.2.5 homepage
homepage就是项目的主页地址了，它是一个字符串。
2.2.6 repository
repository表示代码的存放仓库地址，通常有两种书写形式：
// 字符串形式
"repository": "https://github.com/facebook/react.git"
// 对象形式
"repository": {
"type": "git",
"url": "https://github.com/facebook/react.git"
}
网友评论