package.json 中的 dependencies 和 devDependencies 什么区别？

首先，两个都是此项目的依赖。P10无知

那 package.json 文件里面的 devDependencies  和 dependencies 对象有什么区别呢？P10无知

dependencies 是需要发布到生产环境的，而 devDependencies  里面的插件只用于开发环境，不用于生产环境。P10无知

dependencies 是项目正常运行所需要的依赖，而devDependencies则是开发者开发时整个项目所需的依赖（如会有一些测试依赖之类的）。P10无知

在 package.json 文件里面体现出来的区别就是，使用 --save-dev 安装的 插件，被写入到 devDependencies 对象里面去，而使用 --save 安装的插件，责被写入到 dependencies 对象里面去。P10无知

1 2 3 4 5

npm install --save *****  //会下载到node_modules目录中，会修改package.json  dependencies会增加   npm install --save-dev *****  //会下载到node_modules目录中，会修改package.json  devDependencies会增加   npm install ****// 会下载到node_modules目录中，不会修改package.json  npm install ***** --save   //会下载到node_modules目录中，会修改package.json  dependencies会增加   npm install //会默认安装两种依赖

奇怪的问题

最近在基于 vue-element-admin 搞一个项目，项目的依赖中并没有mock相关的，但是发布之后居然还能使用，没有任何错误。
P10无知

package.json
P10无知

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113

{ "name": "vue-element-admin", "version": "4.3.1", "description": "A magical vue admin. An out-of-box UI solution for enterprise applications. Newest development stack of vue. Lots of awesome features", "author": "Pan <panfree23@gmail.com>", "scripts": { "dev": "vue-cli-service serve", "lint": "eslint --ext .js,.vue src", "build:prod": "vue-cli-service build", "build:stage": "vue-cli-service build --mode staging", "preview": "node build/index.js --preview", "new": "plop", "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml", "test:unit": "jest --clearCache && vue-cli-service test:unit", "test:ci": "npm run lint && npm run test:unit" }, "dependencies": { "axios": "0.18.1", "clipboard": "2.0.4", "codemirror": "5.45.0", "core-js": "3.6.5", "driver.js": "0.9.5", "dropzone": "5.5.1", "echarts": "4.2.1", "element-ui": "2.13.2", "file-saver": "2.0.1", "fuse.js": "3.4.4", "js-cookie": "2.2.0", "jsonlint": "1.6.3", "jszip": "3.2.1", "normalize.css": "7.0.0", "nprogress": "0.2.0", "path-to-regexp": "2.4.0", "pinyin": "2.9.0", "screenfull": "4.2.0", "script-loader": "0.7.2", "sortablejs": "1.8.4", "tui-editor": "1.3.3", "vue": "2.6.10", "vue-count-to": "1.0.13", "vue-i18n": "7.3.2", "vue-router": "3.0.2", "vue-splitpane": "1.0.4", "vuedraggable": "2.20.0", "vuex": "3.1.0", "xlsx": "0.14.1" }, "devDependencies": { "@vue/cli-plugin-babel": "4.4.4", "@vue/cli-plugin-eslint": "4.4.4", "@vue/cli-plugin-unit-jest": "4.4.4", "@vue/cli-service": "4.4.4", "@vue/test-utils": "1.0.0-beta.29", "autoprefixer": "9.5.1", "babel-eslint": "10.1.0", "babel-jest": "23.6.0", "babel-plugin-dynamic-import-node": "2.3.3", "chalk": "2.4.2", "chokidar": "2.1.5", "connect": "3.6.6", "eslint": "6.7.2", "eslint-plugin-vue": "6.2.2", "html-webpack-plugin": "3.2.0", "husky": "1.3.1", "lint-staged": "8.1.5", "mockjs": "1.0.1-beta3", "plop": "2.3.0", "runjs": "4.3.2", "sass": "1.26.2", "sass-loader": "8.0.2", "script-ext-html-webpack-plugin": "2.1.3", "serve-static": "1.13.2", "svg-sprite-loader": "4.1.3", "svgo": "1.2.0", "vue-template-compiler": "2.6.10" }, "browserslist": [ "> 1%", "last 2 versions" ], "bugs": { "url": "https://github.com/PanJiaChen/vue-element-admin/issues" }, "engines": { "node": ">=8.9", "npm": ">= 3.0.0" }, "keywords": [ "vue", "admin", "dashboard", "element-ui", "boilerplate", "admin-template", "management-system" ], "license": "MIT", "lint-staged": { "src/**/*.{js,vue}": [ "eslint --fix", "git add" ] }, "husky": { "hooks": { "pre-commit": "lint-staged" } }, "repository": { "type": "git", "url": "git+https://github.com/PanJiaChen/vue-element-admin.git" } }

main.js
P10无知

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54

import Vue from 'vue'   import Cookies from 'js-cookie'   import 'normalize.css/normalize.css' // a modern alternative to CSS resets   import Element from 'element-ui' import './styles/element-variables.scss'   import '@/styles/index.scss' // global css   import App from './App' import store from './store' import router from './router'   import i18n from './lang' // internationalization import './icons' // icon import './permission' // permission control import './utils/error-log' // error log   import * as filters from './filters' // global filters   /**  * If you don't want to use mock-server  * you want to use MockJs for mock api  * you can execute: mockXHR()  *  * Currently MockJs will be used in the production environment,  * please remove it before going online ! ! !  */ if (process.env.NODE_ENV === 'production') {   const { mockXHR } = require('../mock')   mockXHR() }   Vue.use(Element, { size: Cookies.get('size') || 'medium', // set element-ui default size i18n: (key, value) => i18n.t(key, value) })   // register global utility filters Object.keys(filters).forEach(key => { Vue.filter(key, filters[key]) })   Vue.config.productionTip = false   new Vue({ el: '#app', router, store, i18n, render: h => h(App) })

相关参考

package.json文件中dependencies和devDependencies的区别P10无知

本文由 微wx笑 创作，采用 署名-非商业性使用-相同方式共享 4.0 许可协议，转载请附上原文出处链接及本声明。
原文链接：https://www.ivu4e.cn/blog/front/2020-12-28/591.html

很赞哦！ (12) 赏 有话说 (0)