项目配置文件package.json里依赖组件的简介

解释我们的项目最外层都引入了什么组件 做什么用

{ //这个代码块里的都是项目描述，是创建者自定义的
  "name": "qqmusic",  //项目名称
  "version": "1.0.0",   //项目版本
  "description": "qq music app by vue", //项目描述
  "author": "yangbo", //项目作者
  "private": true, //是否为私有
  "scripts": { //这里是命名一些变量对应什么指令
    "dev": "node build/dev-server.js", //运行dev 相当于运行node build/dev-server.js
    "start": "node build/dev-server.js", //同上
    "build": "node build/build.js", //同上
    "lint": "eslint --ext .js,.vue src" //同上
  },
  "dependencies": { //这个代码块描述此 项目依赖 的插件；下面两个做什么的自行搜索
    "vue": "^2.2.6", 
    "vue-router": "^2.3.1"
  },
  "devDependencies": { //这个代码块里描述的是此项目 运行依赖 插件；注意根上面项目依赖的区分
    "autoprefixer": "^6.7.2", //这英文翻译过来就是：自动 预 修复者，专业称呼知道的可以回复下；它是一个css前缀处理工具，有了它我们就不用写很多前缀了
    "babel-core": "^6.22.1", //babel是es6编译工具，将es6 7语法编译成es5语法，以兼容不支持es6 7的浏览器，这个是babel的核心组件
    "babel-eslint": "^7.1.1", //eslint是一个约束编码者的代码风格工具，这个是babel版本的eslint，如果那里写的不符合eslint的要求，就会报错，练习这个建议用熟练的项目来练习
    "babel-loader": "^6.2.10", //这是babel的加载组件，有了它就可以让babel和webpack对我们的js文件进行处理转换
    "babel-plugin-transform-runtime": "^6.22.0", //babel用来修复自己转换不足的一个组件 https://segmentfault.com/q/1010000005596587?from=singlemessage&isappinstalled=1
    "babel-preset-env": "^1.3.2", //智能识别当前运行环境，不支持es6 7才进行转换，在高性能浏览器上会保留高性能的es6 7语法
    "babel-preset-stage-2": "^6.22.0", //stage0 1 2 3是babel编译范围的一个标准，2版本适合开发使用 http://www.cnblogs.com/chris-oil/p/5717544.html
    "babel-register": "^6.22.0", //官方介绍它可以让babel-core自动钩到我们需要编译的地方，懂得请回复，方便大家
    "chalk": "^1.1.3", // 代码的颜色是它帮忙实现的
    "connect-history-api-fallback": "^1.3.0", //解决单页面应用刷新和直接通过域名+参数访问时候出现404的不足 https://github.com/bripkens/connect-history-api-fallback
    "copy-webpack-plugin": "^4.0.1", //webpack的一个文件和目录复制工具，项目部分路径问题的解决者
    "css-loader": "^0.28.0", //css加载组件，默认css不支持@import ../path/test.css 这种在一个css中引入另一个css的方式，而有了它，就可以这样引入了 http://cache.baiducontent.com/c?m=9f65cb4a8c8507ed4fece763105392230e54f73f7e88885468d4e419ce3b46031437bae872750d5592846b6777f1140fbca77666725e60e19499c90bcabae23f2ffe30350042db12448459&p=8c769a47c09f05ff57ee957e610a86&newp=8b2a97118d9159ff57ee957e500793231610db2151d7d5166b82c825d7331b001c3bbfb42324130fd3c0786707ac4b59eff23570310221a3dda5c91d9fb4c57479dc7c6668&user=baidu&fm=sc&query=css-loader&qid=b877345400022555&p1=3
    "eslint": "^3.19.0", //这是官方eslint，用于统一代码风格的工具，写的不符合规范就给报错，再次建议，在自己有把握的熟练项目里练习它比较好
    "eslint-friendly-formatter": "^2.0.7", //个人理解为一个修复eslint导致编辑器打开文件异常的组件 https://www.npmjs.com/package/eslint-friendly-formatter
    "eslint-loader": "^1.7.1", //eslint加载器，类似babel-loder功能
    "eslint-plugin-html": "^2.0.0", //
    "eslint-config-standard": "^6.2.1", //eslint的一个js标准样式配置组件，用于配置如何规定js代码规范的 http://npm.taobao.org/package/eslint-config-standard
    "eslint-plugin-promise": "^3.4.0", //不清楚：难道是针对js的promise功能单独搞的组件？ 请高手回复 https://www.npmjs.com/package/eslint-plugin-promise
    "eslint-plugin-standard": "^2.0.1", //eslint标准生产组件 https://www.npmjs.com/package/eslint-plugin-standard
    "eventsource-polyfill": "^0.9.6", //不清楚：挺常见的单词，难道是解决跨域请求问题的？ 请高手回复 https://www.npmjs.com/package/eventsource
    "express": "^4.14.1", //一个nodeJS常用的框架，超好用，集成很多常用功能，类似jquery的能力
    "extract-text-webpack-plugin": "^2.0.0", //该组件可以解决webpak将css样式打包到js中出现样式错乱的问题 https://github.com/webpack-contrib/extract-text-webpack-plugin http://www.cnblogs.com/dyx-wx/p/6529447.html
    "file-loader": "^0.11.1", //webpack的文件加载组件，解决路径问题的关键组件，
    "friendly-errors-webpack-plugin": "^1.1.3", //报错的有个友好组件，当有报错，会将error信息显示在可视区域
    "html-webpack-plugin": "^2.28.0", //帮助我们生成最终html文件的一个组件 https://www.npmjs.com/package/html-webpack-plugin
    "http-proxy-middleware": "^0.17.3", //http代理中间件，这里用于辅助解决路径问题 https://www.npmjs.com/package/http-proxy-middleware
    "webpack-bundle-analyzer": "^2.2.1", //很有意思的一个组件，用于优化压缩和查找错误模块 https://www.npmjs.com/package/webpack-bundle-analyzer
    "semver": "^5.3.0", //不清楚：难道是版本规范工具？ http://semver.org/lang/zh-CN/
    "shelljs": "^0.7.6", //为nodeJS提供的一个仿UNIX的shell命令的组件 https://www.npmjs.com/package/shelljs
    "opn": "^4.0.2", //为nodeJS提供的一个跨平台打开文件的方法，
    "optimize-css-assets-webpack-plugin": "^1.3.0", //
    "ora": "^1.2.0", //不清楚：难道是提供一个识别参数文件的后缀功能？ https://zhidao.baidu.com/question/581436199.html
    "rimraf": "^2.6.0", //为nodeJS提供的一个UNIX命令，rm -rf 移除文件的功能
    "url-loader": "^0.5.8", //功能同file-loader，不过在它基础上增加了小于8kb的图片直接转换成base64码写进js，减少图片请求，节约资源
    "vue-loader": "^11.3.4", // vue的加载工具，它允许我们使用vue的格式写文件 https://github.com/vuejs/vue-loader
    "vue-style-loader": "^2.0.5", //webpack的vue.js样式加载模块 http://npm.taobao.org/package/vue-style-loader
    "vue-template-compiler": "^2.2.6", //vue编译模板，用于将vue2.0+编译成可供浏览器渲染的常规正常函数 https://npm.taobao.org/package/vue-template-compiler
    "webpack": "^2.3.3", //一款打包工具，还有其他功能，例如路径处理等
    "webpack-dev-middleware": "^1.10.0", //本地改动，webpack相关功能都会实时刷新 https://github.com/webpack/webpack-dev-middleware
    "webpack-hot-middleware": "^2.18.0", //开发时特有的一个中间件，我们本地测试文件的改动都会实时在内存缓存里存储，并没有写入磁盘；
    "webpack-merge": "^4.1.0" //webpack合并文件的组件，我们写很多js文件，最后webpack会将它们合并成一个js，减少网络请求次数 https://www.npmjs.com/package/webpack-merge
  },
  "engines": { // 引擎相关的内容
    "node": ">= 4.0.0", //要求node版本要大于指定版本，否则不给你运行~
    "npm": ">= 3.0.0" //要求npm版本大于指定版本
  },
  "browserslist": [ // 配置浏览器的信息查询范围，这些信息将给Autoprefixer babel-env-preset eslint-plugin-compat这些组件来使用 https://www.npmjs.com/package/browserslist
    "> 1%", //
    "last 2 versions", //每种浏览器的最近的两个版本
    "not ie <= 8" //IE8及以下版本不查询
  ]
}