前端package.json文件介绍

首先附上一个在线项目的package.json文件代码，下面我们将一一介绍一下各个模块的功能

{
  "name": "Admin",//项目名称
  "version": "1.7.6", //版本号
  "description": "A Vue.js project", //项目的描述
  "author": "[email protected]", //作者
  "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等等属性，有兴趣的小伙伴可以去深入的研究一下