前端package.json文件介绍
首先附上一个在线项目的package.json文件代码，下面我们将一一介绍一下各个模块的功能
{
"name": "Admin",//项目名称
"version": "1.7.6", //版本号
"description": "A Vue.js project", //项目的描述
"author": "lhui609@163.com", //作者
"private": true,//这个很重要不能胡乱设置，为true代表npm将拒绝发布它，这是一种防止意外发布私有存储库的方法
"scripts": {
"dev": "webpack-dev-server --hot --inline --open --devtool eval-source-map",
"build": "webpack --progress --env.Generative=true"
},
"dependencies": {
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-remove-strict-mode": "^0.0.2",
"clamp": "^1.0.1",
"clean-webpack-plugin": "^0.1.18",
"echarts": "^4.1.0",
"element-ui": "2.7.0",
"filemanager-webpack-plugin": "^2.0.5",
"isomorphic-fetch": "^2.2.1",
"lodash.throttle": "^4.1.1",
"moment": "^2.22.2",
"popper.js": "^1.14.1",
"promise-polyfill": "^8.1.0",
"q": "^1.5.1",
"style-loader": "^1.0.0",
"tinycolor2": "^1.4.1",
"vue": "^2.5.2",
"vue-baidu-map": "^0.21.11",
"vue-clipboard2": "^0.3.0",
"vue-cropper": "^0.4.6",
"vue-router": "^3.0.1",
"vue-ueditor-wrap": "^2.1.2"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"bootstrap": "^3.3.1",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"cross-env": "^5.1.3",
"css-loader": "^0.28.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^2.30.1",
"install": "^0.10.4",
"node-notifier": "^5.1.2",
"node-sass": "^4.12.0",
"npm": "^6.4.0",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"sass-loader": "^7.3.1",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^1.1.1",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"vuex": "^3.0.1",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
scripts
"scripts": {
"dev": "webpack-dev-server --hot --inline --open --devtool eval-source-map",
"build": "webpack --progress --env.Generative=true"
}
scripts指定了运行脚本命令所要执行的命令。比如npm run dev将会执行开启本地服务，热加载，打开新页面，以及编译后的文件格式。npm run build将会执行打包项目的操作
dependencies：
应用能够正常运行所依赖的包。这种 dependencies 是最常见的，用户在使用 npm install 安装你的包时会自动安装这些依赖。安装使用npm install echarts --save
devDependencies：
开发应用时所依赖的工具包。通常是一些开发、测试、打包工具，例如 webpack、ESLint、Mocha。应用正常运行并不依赖于这些包，用户在使用 npm install 安装你的包时也不会安装这些依赖。安装使用npm install echarts --save-dev
安装依赖
(1)如果需要安装之前package.json中devdependencies 和 dependencies两个模块下所列举的依赖，可以通过执行 npm install 来实现
(2)如果拿到别人的项目，只需要安装之前package.json中dependencies 模块下所列举的依赖，可以通过执行npm install packagename来实现
(3)如果拿到别人的项目，只需要安装之前package.json中devdependencies 模块下所列举的依赖，可以通过执行npm install packagename -dev来实现
现在我们讲一下我们怎么控制我们所装依赖的版本号
^version 兼容某个版本，版本号中最左边的非0数字的右侧可以任意如果缺少某个版本号，则这个版本号的位置可以任意
~version 大概匹配某个版本，如果minor版本号指定了，那么minor版本号不变，而patch版本号任意
<=version 可以小于或等于某个版本
<version 必须小于某个版本
>=version 可大于或等于某个版本
>version必须大于某个版本
version必须匹配某个版本
engines
指定项目工作的环境。除非用户设置engine-strict标记，这个字段只是建议值。例如下面的代表的意思就是项目依赖的环境是要求node的版本号大于6.0.0
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},browserslist
browserslist是在不同的前端工具之间共用目标浏览器和 node 版本的配置工具。
当然我我使用的只是其中的一部分属性，比如还有config，repository，contributors， os，cpu，preferGlobal，publishConfig等等属性，有兴趣的小伙伴可以去深入的研究一下