npm包裏的package.json文件

先看下目前node包裏的package.json文件配置

{
  "name": "webpack-learn", // 包名 通常採用中劃線或者下劃線，不建議採用小駝峯的形式命名
  "version": "1.0.0", // 版本
  "description": "vue webpack",
  "main": "dist/main.js",
  "module": "dist/main.js",
  "scripts": {
    "dev": "webpack-dev-server --progress --config build/webpack.config.dev.js --inline --hot",
    "build": "webpack --progress --config build/webpack.config.prod.js",
  },
  "keywords": [
    "webpack init project",
    "webpack",
    "init Project",
    "vue"
  ],
  "engines": {
    "node": ">= 6" // node環境要求
  },
  "author": "cpp",
  "license": "ISC",
  "homepage": "https://github.com/niaogege/webpack-learn", // 項目介紹主頁
  "repository": {
    "type": "git",
    "url": "https://github.com/niaogege/webpack-learn.git"
  },
  "files": [
    "dist",
    "src",
    "public"
  ],
  "dependencies": {
    "vue": "^2.6.12"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^8.2.2",
    "clean-webpack-plugin": "^3.0.0",
    ...
  }
}

main / module

Main property in package.json defines package entry point 定義包的出口
簡單說: 供項目用import導入的入口，主要做用是暴露此依賴包的出口，好比vue源碼裏的package.json中這麼定義的

"main": "dist/vue.runtime.common.js", // 運行時用的common版本
  "module": "dist/vue.runtime.esm.js", // 運行用的es版本

若是不定義main，項目中運用依賴包須要這樣引用

const VueLoaderPlugin = require('vue-loader/lib/plugin.js');

看了下vue-loader中該文件的出口定義

const webpack = require('webpack')
  let VueLoaderPlugin = null
  if (webpack.version && webpack.version[0] > 4) {
    // webpack5 and upper
    VueLoaderPlugin = require('./plugin-webpack5')
  } else {
    // webpack4 and lower
    VueLoaderPlugin = require('./plugin-webpack4')
  }
  module.exports = VueLoaderPlugin

devDependencies / dependencies

運行 --save-dev 或者 -D 安裝的 插件，被寫入到 devDependencies 域裏面去，而使用 --save 或者 -S 安裝的插件，則是被寫入到 dependencies 區塊裏面去.
npm install 【插件名】或 npm install 【插件名】--save 歸屬dependencies，表示代碼運行時所須要的包。

npm install 【插件名】--save-dev 歸屬 devDependencies，表示開發時依賴的插件（即不會打包至線上）。

dependencies, 生產環境依賴，也就是依賴會被打包到web就用中
devDependencies, 開發環境依賴，不會被打包，是保證web就用能運行起來的根本。

區別:

假設你是一名npm包的開發者，那你發佈的包的package.json就須要認真分好所依賴的包究竟是dependencies仍是devDependencies。由於你發佈的包是給別人使用的，別人不會去管你是用什麼環境開發的，別人要的是最終開發出來的源碼。因此，當別人npm命令去安裝時：

npm install xxx -D

只會把xxx裏的dependencies的包下載下來，而不會去下載devDependencies裏面的包。因此在發佈npm包的時候，dependencies和devDependencies必定要嚴格區分開來!!

files

這個就好理解，下載的依賴包裏包含的文件名數組，像我在cpp-cli-test這個npm包裏的files就是

files: [
    "dist",
    "src",
    "public"
]

由於我不想把npm包裏的node_modules文件也上傳，因此這裏就只包含了三個文件夾

bin

在開發腳手架時候會用到bin字段, 包的命令，好比cpp -V,

"main": "./bin/index.js",
  "bin": {
    "cpp": "./bin/index.js" // 全局註冊cpp命令
  },

參考連接

• Main property in package.json defines package entry point
• package.json中的dependencies和devDependencies區別