通常我們使用npm init命令來創建一個npm程序時，會自動生成一個package.json文件。package.json文件會描述這個NPM包的所有相關信息，包括作者、簡介、包依賴、構建等信息，

1.先看一下一個完整package.json文件

{
  "name": "by_iview2.0",
  "version": "1.0.0",
  "description": "sims by iview2.0",
  "author": "xie",
  "private": true,
  "scripts": {
    "dev": "node build/dev-server.js",
    "build": "node build/build.js"
  },
  "dependencies": {
    "mui": "^1.0.0",
    "iview": "^2.0.0-rc.4",
    "vue": "^2.2.2",
    "vue-router": "^2.2.0",
    "vue-resource":"^1.3.1"
  },
  "devDependencies": {
    "autoprefixer": "^6.7.2",
    "babel-core": "^6.22.1",
    "babel-loader": "^6.2.10",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-preset-env": "^1.2.1",
    "babel-preset-stage-2": "^6.22.0",
    "babel-register": "^6.22.0",
    "chalk": "^1.1.3",
    "mock-api":"^0.1.5",
    "connect-history-api-fallback": "^1.3.0",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.26.1",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.14.1",
    "extract-text-webpack-plugin": "^2.0.0",
    "file-loader": "^0.10.0",
    "friendly-errors-webpack-plugin": "^1.1.3",
    "function-bind": "^1.1.0",
    "html-webpack-plugin": "^2.28.0",
    "http-proxy-middleware": "^0.17.3",
    "opn": "^4.0.2",
    "optimize-css-assets-webpack-plugin": "^1.3.0",
    "ora": "^1.1.0",
    "rimraf": "^2.6.0",
    "semver": "^5.3.0",
    "url-loader": "^0.5.7",
    "vue-html5-editor": "^1.0.1",
    "vue-loader": "^11.1.4",
    "vue-style-loader": "^2.0.0",
    "vue-template-compiler": "^2.2.1",
    "webpack": "^2.2.1",
    "webpack-bundle-analyzer": "^2.2.1",
    "webpack-dev-middleware": "^1.10.0",
    "webpack-hot-middleware": "^2.16.1",
    "webpack-merge": "^2.6.1"
  }

2.主要屬性的介紹

1.script

通過設置這個可以使NPM調用一些命令腳本，封裝一些功能。

"scripts": {
    "dev": "node build/dev-server.js",
    "build": "node build/build.js"
  }

”dev”和”build”。運行”npm run dev”的時候執行的是build/dev-server.js文件，運行”npm run build”的時候執行的是build/build.js文件，后續會對這兩個文件開始進行代碼閱讀分析。

2.dependencies

指定依賴的其它包，這些依賴是指包發布后正常執行時所需要的，也就是線上需要的包。如果是開發中依賴的包，可以在devDependencies設置。

 "dependencies": {
    "mui": "^1.0.0",
    "iview": "^2.0.0-rc.4",
    "vue": "^2.2.2",
    "vue-router": "^2.2.0",
    "vue-resource":"^1.3.1"
  }

3.devDependencies

這些依賴只有在開發時候才需要,上線部署不需要打包進去。

    "autoprefixer": "^6.7.2",
    "babel-core": "^6.22.1",
    "babel-loader": "^6.2.10",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-preset-env": "^1.2.1",
    "babel-preset-stage-2": "^6.22.0",
    "babel-register": "^6.22.0",
    "chalk": "^1.1.3",
    "mock-api":"^0.1.5",
    "connect-history-api-fallback": "^1.3.0",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.26.1",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.14.1",
    "extract-text-webpack-plugin": "^2.0.0",
    "file-loader": "^0.10.0",
    "friendly-errors-webpack-plugin": "^1.1.3",
    "function-bind": "^1.1.0",
    "html-webpack-plugin": "^2.28.0",
    "http-proxy-middleware": "^0.17.3",
    "opn": "^4.0.2",
    "optimize-css-assets-webpack-plugin": "^1.3.0",
    "ora": "^1.1.0",
    "rimraf": "^2.6.0",
    "semver": "^5.3.0",
    "url-loader": "^0.5.7",
    "vue-html5-editor": "^1.0.1",
    "vue-loader": "^11.1.4",
    "vue-style-loader": "^2.0.0",
    "vue-template-compiler": "^2.2.1",
    "webpack": "^2.2.1",
    "webpack-bundle-analyzer": "^2.2.1",
    "webpack-dev-middleware": "^1.10.0",
    "webpack-hot-middleware": "^2.16.1",
    "webpack-merge": "^2.6.1"
  }