一、package.json的作用
package.json 是一个包描述文件，描述当前目录下的这个模块（包）的相关信息。它是 Node.js 构建互联网应用的基础。
它不仅仅是一个 JSON 文件，也是一个可以运行命令行脚本和执行代码的地方。它定义了一些重要的东西，比如作者、依赖、版本、Git 地址、许可证等。
一般在使用Vue.js的项目中，package.json是用于存储项目的各类元数据的，例如项目的名称、版本、描述等，还包括了项目开发过程中使用的各种工具和依赖库，例如Webpack、Gulp、less等等。
二、项目元数据
在vue项目中，package.json中包含的元数据可以总结如下：
- name： 项目名称
- version： 项目版本
- description： 项目描述
- keywords： 关键字，是一个字符串数组，它描述你的模块，方便别人搜索。
- author： 项目作者
- repository： 项目源代码仓库的信息
- license： 项目的许可证
{
"name": "vue-project",
"version": "1.0.0",
"description": "A Vue.js project",
"keywords": [
"vue",
"webpack",
"eslint"
],
"author": "Your Name",
"repository": {
"type": "git",
"url": "git+https://github.com/yourname/vue-project.git"
},
"license": "MIT"
}
三、项目依赖
在Vue项目中，package.json中的依赖是项目开发的关键，它们定义了你的项目的构建方式。Vue项目通常有两类依赖——生产依赖和开发依赖。
生产依赖是指在你的项目被编译打包后，在浏览器或 Node.js 环境中运行的代码，Vue.js是其中之一；而开发依赖是指在开发阶段用到的工具和库，它们在生产环境中没有被使用到，例如webpack、Babel、ESLint等。
下面是Vue项目中，package.json的依赖配置：
"dependencies": {
"vue": "^2.6.12",
"vue-router": "^3.2.0",
"vuex": "^3.4.0"
},
"devDependencies": {
"@babel/core": "^7.12.3",
"@babel/plugin-transform-runtime": "^7.12.1",
"@babel/preset-env": "^7.12.1",
"babel-loader": "^8.1.0",
"eslint": "^7.11.0",
"eslint-plugin-vue": "^6.2.2",
"less": "^3.12.0",
"less-loader": "^7.0.2",
"vue-loader": "^15.9.3",
"vue-template-compiler": "^2.6.12",
"webpack": "^4.44.2",
"webpack-cli": "^3.3.12"
}
四、项目 scripts
在Vue项目中，package.json中还有一个scripts，主要包含该项目运行和构建的一些命令。开发者可以通过npm run + script名称来运行相应的命令，例如npm run dev，npm run build等。
一个基本的配置如下所示：
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"build": "webpack --config build/webpack.prod.conf.js --progress --profile --colors",
"lint": "eslint --ext .js,.vue src",
"test": "npm run lint && npm run unit",
"unit": "jest --config test/unit/jest.conf.js --coverage",
"e2e": "node test/e2e/runner.js",
"deploy": "npm run build && ossutil cp -r dist oss://mybucket/ --include \"*.html\" --update",
}
五、其他设置
除了上述三个部分，package.json还可以设置其他的项目信息，例如项目依赖的版本号，项目的 Git 地址，文件的入口等。
下面是一个完整的 Vue.js 项目的 package.json 文件示例：
{
"name": "vue-project",
"version": "1.0.0",
"description": "a vue project",
"author": "Your Name",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"build": "webpack --config build/webpack.prod.conf.js --progress --profile --colors",
"lint": "eslint --ext .js,.vue src",
"test": "npm run lint && npm run unit",
"unit": "jest --config test/unit/jest.conf.js --coverage",
"e2e": "node test/e2e/runner.js",
"deploy": "npm run build && ossutil cp -r dist oss://mybucket/ --include \"*.html\" --update",
},
"dependencies": {
"vue": "^2.6.12",
"vue-router": "^3.2.0",
"vuex": "^3.4.0"
},
"devDependencies": {
"@babel/core": "^7.12.3",
"@babel/plugin-transform-runtime": "^7.12.1",
"@babel/preset-env": "^7.12.1",
"babel-loader": "^8.1.0",
"eslint": "^7.11.0",
"eslint-plugin-vue": "^6.2.2",
"less": "^3.12.0",
"less-loader": "^7.0.2",
"vue-loader": "^15.9.3",
"vue-template-compiler": "^2.6.12",
"webpack": "^4.44.2",
"webpack-cli": "^3.3.12"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
],
"engines": {
"node": ">= 8.9.0"
},
"license": "MIT",
"repository": {
"type": "git",
"url": "http://gitlab.yourname.com/root/vue-project.git"
},
"homepage": "http://www.yourdomain.com"
}
六、总结
在Vue项目中，package.json是开发者必须关注的文件之一。它不仅仅是一个JSON文件，也定义了项目的各类元数据、依赖和构建方式等信息，并提供了脚本运行和代码执行等功能，对项目的开发和维护非常有帮助。建议开发者在实践中多加关注，熟练运用。
