預設的package.json檔案直接使用命令：npm init --yes生成

{
  "name": "pingdingshan",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

• name：包名字
• version：包版本，x.x.x的格式，符合語義化版本規則
• description：一些描述資訊
• main：入口檔案，一般是index.js
• scripts：指定了執行指令碼命令的npm命令列縮寫，預設是空的test
• author：作者資訊
• license：許可證，預設是ISC、有的預設是MIT

npm run 可列出package.json中scripts的所有指令碼命令
npm run test就會執行：echo “Error: no test specified” && exit 1

以我們公司專案的package.json檔案部分為例：

{
  "name": "h5-components",
  "version": "1.2.0",
  "description": "",
  "main": "./lib/index",
  "module": "./es/index",
  "files": [
    "lib",
    "es",
    "dist",
    "assets"
  ],
  "repository": "http://.../h5-components.git",
  "author": "",
  "license": "MIT",
  "scripts": {
    "dll": "webpack --config webpack.dll.config.js",
    "rccompile": "rc-tools run compile --babel-runtime --copy-files",
    "dev": "webpack-dev-server --env.api dev",
    "rcdist": "rc-tools run dist",
    "ucs": "yarn upgrade h5-css",
    "rclint": "rc-tools run lint",
    "build": "yarn rccompile && git add . && git commit -m '[compile]' && git pull && git push"
  },
  "config": {
    "port": 8089,
    "entry": {
      "h5-components": [
        "./index.js"
      ]
    }
  },
  "dependencies": {
    "antd-mobile": "^2.2.0",
    "classnames": "^2.2.1",
    "exif-js": "^2.3.0"
  },
  "devDependencies": {
    "file-loader": "^1.1.5",   
    "less-loader": "^4.1.0",
    "lodash": "^4.17.4",
    "lodash-webpack-plugin": "^0.11.4",
    "mini-css-extract-plugin": "^0.4.1"   
  },
  "sideEffects": [
    "*.scss"
  ],
  "browserslist": [
    "iOS >= 8",
    "Firefox >= 20",
    "Android > 4.2",
    "> 1%",
    "last 2 versions",
    "not ie <= 10"
  ]
}

 

• module：es6編譯入口檔案
• main：es5編譯入口檔案
• files：包含在專案中的檔案(夾)陣列，可以宣告一個.gitignore來忽略部分檔案
• repository：專案程式碼存放的地方
• config：欄位用於新增命令列的環境變數。
• dependencies：在生產環境中需要用到的依賴
• devDependencies：在開發、測試環境中用到的依賴
• sideEffects：如果沒有這個值，打包時會出錯，參照css issue
• browserslist：指定該模板供瀏覽器使用的版本