对VUE工程中的打包配置package.json不是很了解。于是对package.json中的每一行配置进行学习。
1.package.json
package.json文件就是对node.js工程的描述。package.json 位于模块的目录下，用于定义包的属性。
{
"name": "scoutfe",
"version": "1.0.0",
"description": "scout-fe",
"author": "浩克",
"license": "MIT",
"scripts": {
"dev": "vue-cli-service serve",
"build:prod": "vue-cli-service build",
"build:stage": "vue-cli-service build --mode staging",
"preview": "node build/index.js --preview",
"lint": "eslint --ext .js,.vue src",
"test:unit": "jest --clearCache && vue-cli-service test:unit",
"test:ci": "npm run lint && npm run test:unit",
"svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml",
"new": "plop"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/**/*.{js,vue}": [
"eslint --fix",
"git add"
]
},
"keywords": [
"vue",
"admin",
"dashboard",
"element-ui",
"boilerplate",
"admin-template",
"management-system"
],
"dependencies": {
"@riophae/vue-treeselect": "0.4.0",
"vue-quill-editor": "3.0.6",
"vue-cropper": "0.4.9",
"axios": "0.18.1",
"echarts": "4.2.1",
"element-ui": "2.13",
"clipboard": "2.0.4",
"codemirror": "5.45.0",
"fuse.js": "3.4.4",
"js-cookie": "2.2.0",
"jsencrypt": "3.0.0-rc.1",
"normalize.css": "7.0.0",
"nprogress": "0.2.0",
"path-to-regexp": "2.4.0",
"screenfull": "4.2.0",
"vue": "2.6.11",
"vue-count-to": "1.0.13",
"vue-router": "3.0.2",
"vue-splitpane": "1.0.4",
"vuex": "3.1.0"
},
"devDependencies": {
"@babel/core": "7.0.0",
"@babel/register": "7.0.0",
"@vue/cli-plugin-babel": "3.5.3",
"@vue/cli-plugin-eslint": "^3.9.1",
"@vue/cli-plugin-unit-jest": "3.5.3",
"@vue/cli-service": "3.5.3",
"@vue/test-utils": "1.0.0-beta.29",
"autoprefixer": "^9.5.1",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "10.0.1",
"babel-jest": "23.6.0",
"chalk": "2.4.2",
"chokidar": "2.1.5",
"connect": "3.6.6",
"eslint": "5.15.3",
"eslint-plugin-vue": "5.2.2",
"html-webpack-plugin": "3.2.0",
"http-proxy-middleware": "^0.19.1",
"husky": "1.3.1",
"lint-staged": "8.1.5",
"mockjs": "1.0.1-beta3",
"node-sass": "^4.9.0",
"plop": "2.3.0",
"runjs": "^4.3.2",
"sass-loader": "^7.1.0",
"script-ext-html-webpack-plugin": "2.1.3",
"script-loader": "0.7.2",
"serve-static": "^1.13.2",
"svg-sprite-loader": "4.1.3",
"svgo": "1.2.0",
"vue-template-compiler": "2.6.11"
},
"engines": {
"node": ">=8.9",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}
具体的关键字说明：
1.name
包名
2.version
包的版本号
3.scripts
npm 允许在package.json文件里面，使用scripts字段定义脚本命令。
每一个属性，对应一个脚本。
"dev": "vue-cli-service serve",
这个作用，就是定义一个脚本名称：dev，它的实际脚本内容是 vue-cli-service serve
可以使用npm命令执行：
npm run dev
等同于
vue-cli-service serve
4.husky
配置一些代码检查的规则
5.lint-staged
代码风格检查（Code Linting，简称 Lint）是保障代码规范一致性的重要手段
6.keywords
npm包的关键字，keywords是一个字符串的数组。它可以帮助人们在使用npm search时找到这个包。
-
dependencies
dependencies字段是一个对象，它指定了依赖的包名和其版本范围的映射。版本范围是个有一个或多个空白分隔描述符的字符串。dependencies字段还可以用tarball或者git URL。 -
devDependencies
如果有人计划在他们的项目中下载和使用你的模块，但他们可能并不想或并不需要你开发所使用的外部测试和文档框架。
在这种情况下，最好将这些附加的项放在devDependencies中。
这些项将会在根目录下执行npm link或npm install时被安装，并且可以像其他npm配置参数一样被管理。可以参考npm-config获得更多信息。
对于那些非特定平台的构建步骤，比如编译CoffeeScript或把其他语言转换成JavaScript，可以使用prepublish脚本来处理，并且把这个过程的依赖包放在devDependencies中。
9.engines
指明了该项目所需要的node.js版本
10.browserslist
一个阈值，表示是否要去兼容某些浏览器
11.jest
单元测试
"jest": {
"moduleFileExtensions": [
"js",
"json",
"ts"
],
"rootDir": "src",
"testRegex": ".spec.ts$",
"transform": {
"^.+\\.(t|j)s$": "ts-jest"
},
"coverageDirectory": "../coverage",
"testEnvironment": "node"
}
参考链接：
https://www.cnblogs.com/whkl-m/p/6617540.html
https://blog.csdn.net/Hreticent/article/details/80490344
https://segmentfault.com/a/1190000017790500?utm_source=tag-newest
https://segmentfault.com/a/1190000009546913
https://www.cnblogs.com/paris-test/p/9760308.html
https://www.cnblogs.com/zaking/p/10582228.html
网友评论