先看下目前node包里的package.json文件配置vue
{ "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 property in package.json defines package entry point 定义包的出口
简单说: 供项目用import导入的入口,主要做用是暴露此依赖包的出口,好比vue源码里的package.json中这么定义的node
"main": "dist/vue.runtime.common.js", // 运行时用的common版本 "module": "dist/vue.runtime.esm.js", // 运行用的es版本
若是不定义main,项目中运用依赖包须要这样引用webpack
const VueLoaderPlugin = require('vue-loader/lib/plugin.js');
看了下vue-loader中该文件的出口定义git
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
运行 --save-dev 或者 -D 安装的 插件,被写入到 devDependencies 域里面去,而使用 --save 或者 -S 安装的插件,则是被写入到 dependencies 区块里面去.
npm install 【插件名】或 npm install 【插件名】--save 归属dependencies,表示代码运行时所须要的包。github
npm install 【插件名】--save-dev 归属 devDependencies,表示开发时依赖的插件(即不会打包至线上)。web
dependencies, 生产环境依赖,也就是依赖会被打包到web就用中
devDependencies, 开发环境依赖,不会被打包,是保证web就用能运行起来的根本。npm
区别: json
假设你是一名npm包的开发者,那你发布的包的package.json就须要认真分好所依赖的包究竟是dependencies仍是devDependencies。由于你发布的包是给别人使用的,别人不会去管你是用什么环境开发的,别人要的是最终开发出来的源码。因此,当别人npm命令去安装时:数组
npm install xxx -D
babel
只会把xxx里的dependencies的包下载下来,而不会去下载devDependencies里面的包。因此在发布npm包的时候,dependencies和devDependencies必定要严格区分开来!!
这个就好理解,下载的依赖包里包含的文件名数组,像我在cpp-cli-test这个npm包里的files就是
files: [ "dist", "src", "public" ]
由于我不想把npm包里的node_modules文件也上传,因此这里就只包含了三个文件夹
在开发脚手架时候会用到bin字段, 包的命令,好比cpp -V,
"main": "./bin/index.js", "bin": { "cpp": "./bin/index.js" // 全局注册cpp命令 },