package.json 里你不注意的细节

说明：

项目包的相关管理、项目的简介以及启动打包方式脚本的配置

项目简介：

  "name": "vue",  "version": "1.0.0",  "description": "麦壳后台管理系统",  "author": "macrolam",  "private": true,

项目依赖

这里分为开发环境下使用的：

"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",    "html-withimg-loader": "^0.1.16",    "less": "^2.7.3",    "less-loader": "^4.0.5",
   },

生产环境下使用的：

"devDependencies": {  "dependencies": {    "axios": "^0.17.1",    "element-theme": "^2.0.0",    "element-theme-chalk": "^2.0.2",    "element-ui": "^2.0.2",    "jquery": "^3.2.1",    "vue": "^2.5.2",    "vue-awesome": "^2.3.4",    "vue-axios": "^2.0.2",    "vue-event-calendar": "^1.5.2",    "vue-router": "^3.0.1",    "vuex": "^3.0.1"
  },

具体版本说明相关的查阅：

这里和npm 命令相关的操作是：
npm i 按照这份说明安装所有依赖包

脚本部分

  "scripts": {    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",    "start": "npm run dev",    "build": "node build/build.js"
  },

这里和npm 命令相关的操作是：
npm run 运行 package.json 中预定义的脚本

解释下：
第一句：在当前项目根目录中打开命令行执行：
npm run dev  等同执行了后边的：webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
意思是启动一个服务器并且执行dev下的配置文件，这里也执行了代码的打包压缩，只是放到内存了供你本地服务器上调试开发。所以在dist下是没有的哈。
第二句：
npm run start 等同执行了npm run dev，哈哈其实这个跟第一个一样哈。就是给不同项目过来的伙伴一个惯常操作命令而已。
第三句：
npm run build  等同执行了 node build/build.js
会node的小伙伴肯定知道，这个是使用node 跑一个脚本文件 build.js。
这里是打包命令，文件会放到dist目录下，上线时候打包下丢上去就可以了。

ps:

这里补充下vue-cli搭建的项目中本地服务器知识：

webpack-dev-server主要是启动了一个使用express的Http服务器。它的作用主要是用来伺服资源文件。此外这个Http服务器和client使用了websocket通讯协议，(看网络面板可以发现有websocket的使用不要不知道是哪里来的哈)原始文件作出改动后，webpack-dev-server会实时的编译，但是最后的编译的文件并没有输出到目标文件夹dist

附录

摘自网络上的一张表：
npm 和 yarn 操作不大一样的命令：

image.png

npm 和 yarn 操作一样的命令：

image.png

相关说明

这里摘自网络

什么是npm:

即：npm package manager ，是一种重用其他开发人员的代码的方法，也是一种与他人共享代码的方式，并且可以很容易地管理不同版本的代码。npm 开始作为 Node 包管理器，所以你会发现很多模块可以在服务器端使用。也有很多的包添加命令供您在命令行中使用。你还会发现可以在前端使用的软件包。

什么是yarn:

Yarn 对你的代码来说是一个包管理器， 你可以通过它使用全世界开发者的代码，或者分享自己的代码。 Yarn 做这些快捷、安全、可靠，所以你不用担心什么。通过 Yarn，你可以使用其他开发者针对不同问题的解决方案，使自己的开发过程更简单。 使用过程中遇到问题，你可以将其上报或者贡献解决方案。一旦问题被修复，Yarn会更新保持同步。

Yarn 是 Facebook, Google, Exponent 和 Tilde 开发的一款新的 JavaScript 包管理工具。它并没有试图完全取代 npm。Yarn 同样是一个从 npm 注册源获取模块的新的 CLI 客户端。注册的方式不会有任何变化 —— 你同样可以正常获取与发布包。它存在的目的是解决团队在使用 npm 面临的少数问题。当然，在 Node 版本断更替中，Npm 本身也在积极更新。

作者：麦壳儿UIandFE2
链接：https://www.jianshu.com/p/518e86ffc226