package.json配置简介

我们先看一个常用的例子

{
// 包的名称
  "name": "buyer_wxs",
  // 包的版本号
  "version": "0.1.0",
  //不开源
  "private": true,
  // 指定了运行脚本命令的npm命令行缩写
  "scripts": {
    "serve": "vue-cli-service serve",   //正式服，直接运行npm run build
    "build": "vue-cli-service build --mode test",  
    "build:test": "vue-cli-service build --mode test",  // 测试服，相当于命令行：npm run build:test
    "test": "vue-cli-service build --mode test"
  },
  //项目运行必须安装的依赖生产环境的依赖包列表
  "dependencies": {
    "@xkeshi/vue-qrcode": "^1.0.0",
    "amfe-flexible": "^2.2.1",
    "axios": "^0.19.0",
    "clipboard": "^2.0.4",
    "core-js": "^2.6.5",
    "postcss-pxtorem": "^4.0.1",
    "qrcodejs2": "^0.0.2",
    "vant": "^2.2.7",
    "vue": "^2.6.10",
    "vue-axios": "^2.1.4",
    "vue-cookie": "^1.1.4",
    "vue-router": "^3.0.3",
    "vuex": "^3.0.1",
    "weixin-js-sdk": "^1.4.0-test"
  },
  //  // 开发环境的依赖包列表
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.11.0",
    "@vue/cli-plugin-eslint": "^3.11.0",
    "@vue/cli-service": "^3.11.0",
    "babel-eslint": "^10.0.1",
    "babel-plugin-import": "^1.12.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "less": "^3.10.3",
    "less-loader": "^5.0.0",
    "postcss-px-to-viewport": "^1.1.1",
    "style-resources-loader": "^1.2.1",
    "vue-cli-plugin-style-resources-loader": "^0.1.3",
    "vue-template-compiler": "^2.6.10"
  }
}

我们来详细说明一下文件中各个字段的含义与用法
简单关键字说明
name, version, description, main, author, license通过字面意思即可理解，

需要说明的是，

version标注了当前项目的版本号，如果是私有项目，不发布到仓库（repository）,此项关键字可以不用变更；

main是我们模块或者是项目的入口文件，有且只有一个文件，文件的路径是相对项目的根目录；

license是标注我们项目的许可证权限，如果是开源项目，请参考阮一峰开源许可证教程。

如果不想开源，可以使用

{ "license": "UNLICENSED" }

或者

{ "private": true }

重点关键字说明
scripts，dependencies，devDependencies

首先我们来看看scripts

scripts是npm提供给我们运行shell命令的入口

 "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --mode test",
    "build:test": "vue-cli-service build --mode test",
    "test": "vue-cli-service build --mode test"
  },

我们可以通过npm run build启动webpack --config webpack.config.js

这条命令等同于在命令行中输入webpack --config webpack.config.js

例子中syncbuild是前两步的合并，build为编译，sync为同步文件
这里的key为npm run时接受的参数，value代表着需要运行shell命令

dependencies与devDependencies看起来差不多，他们都是标注项目的依赖列表

不同的是，dependencies是项目运行时必要依赖，而devDependencies是项目开发时所需依赖

明确了以上的不同，就可以很清晰知道把项目依赖放在哪里了

平时使用的时候我们会通过

npm i --save react

安装依赖，此依赖会写入dependencies列表

如需将依赖写入devDependencies
这里还有一点需要注意，我们的项目在发布后，他人在使用时默认会将dependencies列表的依赖全部安装

npm i packagename
或者
npm i packagename --production

如果需要安装开发环境

npm i packagename --dev

这样会将项目的开发依赖包全部安装到本地