安装插件怎么判断是 --save还是 --save-dev

小伙伴很多时候肯定有这种感觉:

npm敲到一半的时候发现：诶 这个到底是 --save还是 --save-dev呢

1.首先要先了解package.json

在Node.js中，模块是一个库或框架，也是一个Node.js项目。Node.js项目遵循模块化的架构，当我们创建了一个Node.js项目，意味着创建了一个模块，这个模块的描述文件，被称为package.json。

2.什么是npm

npm 是一个包管理器，它让 JavaScript 开发者分享、复用代码更方便。

在程序开发中我们常常需要依赖别人提供的框架，亦或是方法库,写 JS 也不例外。这些可以重复的框架代码被称作包（package）或者模块（module），一个包可以是一个文件夹里放着几个文件，而这些文件就存放在package.json 。

3.如何生成package.json

$ npm init //项目初始化
$ npm init -y //快速生成package.json
    {
      "name": "vue-cli",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "dependencies": {
        "vue": "^2.5.17"
      },
      "devDependencies": {},
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
       "author": "",
      "license": "ISC"
    }

name – 包名.
version – 包的版本号。
description - -包的描述。
author - -包的作者
dependencies / devDependencies – 生产/开发环境依赖包列表。它们将会被安装在 node_module 目录下。
main - -main 字段指定了程序的主入口文件
license–授权
有兴趣的可以去了解一下package属性 此处为快速搭建

4. --save与 --save-dev的区别

—npm i 插件 ，会把插件安装到node_modules目录中，不会修改package.json,

—npm i 插件 --save (-S) ，项目发布上线之后还会依赖用到的插件，没有这些插件，项目不能运行

—自动更改package.json 写入dependencies 节点

—npm i 插件 -g是不会更改package中的内容 但是可以存在node_modules目录中

—没有package.json 还怎么开开心心的 clone呢

—npm i 插件 --save-dev(-D) ，安装到开发依赖中，项目上线之后不会用到的插件，例如’babel-loader’,项目解析完发布

—自动更改package.json 写入devDependencies 节点

dependencies(运行依赖)

也就是我们项目运行上线还会使用的插件 比如webpack axios vant Element UI框架

devDependencies(开发依赖)

也就是帮助开发的插件 比如babel live-server lodash loader类似的

奉上对比 希望对你有帮助哦

      {
      "name": "vue-cli",
      "version": "1.0.0",
      "description": "A Vue.js project",
      "author": "luwenjun <1351985377@qq.com>",
      "private": true,
      "scripts": {
        "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
        "start": "npm run dev",
        "build": "node build/build.js"
      },
      "dependencies": {
        "axios": "^0.18.0",
        "vue": "^2.5.2",
        "vue-router": "^3.0.1"
      },
      "devDependencies": {
        "autoprefixer": "^7.1.2",
        "babel-core": "^6.22.1",
        "babel-helper-vue-jsx-merge-props": "^2.0.3",
        "babel-loader": "^7.1.1",
        "babel-plugin-syntax-jsx": "^6.18.0",
        "babel-plugin-transform-runtime": "^6.22.0",
        "babel-plugin-transform-vue-jsx": "^3.5.0",
        "babel-preset-env": "^1.3.2",
        "babel-preset-stage-2": "^6.22.0",
        "chalk": "^2.0.1",
        "copy-webpack-plugin": "^4.0.1",
        "css-loader": "^0.28.0",
        "extract-text-webpack-plugin": "^3.0.0",
        "file-loader": "^1.1.4",
        "friendly-errors-webpack-plugin": "^1.6.1",
        "html-webpack-plugin": "^2.30.1",
        "node-notifier": "^5.1.2",
        "optimize-css-assets-webpack-plugin": "^3.2.0",
        "ora": "^1.2.0",
        "portfinder": "^1.0.13",
        "postcss-import": "^11.0.0",
        "postcss-loader": "^2.0.8",
        "postcss-url": "^7.2.1",
        "rimraf": "^2.6.0",
        "semver": "^5.3.0",
        "shelljs": "^0.7.6",
        "uglifyjs-webpack-plugin": "^1.1.1",
        "url-loader": "^0.5.8",
        "vue-loader": "^13.3.0",
        "vue-style-loader": "^3.0.1",
        "vue-template-compiler": "^2.5.2",
        "webpack": "^3.6.0",
        "webpack-bundle-analyzer": "^2.9.0",
        "webpack-dev-server": "^2.9.1",
        "webpack-merge": "^4.1.0"
      },
      "engines": {
        "node": ">= 6.0.0",
        "npm": ">= 3.0.0"
      },
      "browserslist": [
        "> 1%",
        "last 2 versions",
        "not ie <= 8"
      ]
    }