先看下目前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区别