我们在开发vue.js的mvvp项目时候，会执行npm install ,npm build,npm dev等等。其实这些都和package.json有关。

{
"name": "mfw-ui",
"version": "1.0.0",
"description": "My Framework ui",
"author": "hongming.zhao <1183483051@qq.com>",
"private": true,
"scripts": {
"dev": "node build/dev-server.js",
"test": "node build/test.js",
"build": "node build/build.js"
},
"dependencies": {
"@antv/g2": "^3.5.8-beta.1",
"ajv": "^6.2.1",
"ajv-keywords": "^3.1.0",
"async-validator": "^1.8.2",
"autoprefixer": "^8.1.0",
"axios": "^0.18.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"babel-register": "^6.26.0",
"chalk": "^2.3.2",
"clipboard": "^2.0.1",
"connect-history-api-fallback": "^1.5.0",
"copy-webpack-plugin": "^4.5.1",
"css-loader": "^0.28.10",
"echarts": "^4.2.1",
"element-ui": "^2.11.1",
"eventsource-polyfill": "^0.9.6",
"express": "^4.16.3",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.11",
"file-saver": "^1.3.3",
"friendly-errors-webpack-plugin": "^1.6.1",
"function-bind": "^1.1.1",
"handsontable": "^0.37.0",
"html-webpack-plugin": "^3.0.6",
"http-response-object": "^3.0.1",
"js-cookie": "^2.2.0",
"js-md5": "^0.7.3",
"moment": "^2.21.0",
"node-sass": "^4.8.2",
"opn": "^5.2.0",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^2.0.0",
"prettier": "^1.12.1",
"sass-loader": "^6.0.7",
"script-loader": "^0.7.2",
"semver": "^5.5.0",
"shelljs": "^0.8.1",
"sync-request": "^6.0.0",
"then-request": "^6.0.0",
"tinymce": "^5.0.14",
"url-loader": "^1.0.1",
"vue": "^2.5.16",
"vue-axios": "^2.0.2",
"vue-baidu-map": "^0.21.22",
"vue-clock2": "^1.1.5",
"vue-core-image-upload": "^2.4.5",
"vue-count-to": "^1.0.13",
"vue-i18n": "^7.6.0",
"vue-loader": "^14.2.1",
"vue-moment": "^3.2.0",
"vue-router": "^3.0.1",
"vue-style-loader": "^4.0.2",
"vue-template-compiler": "^2.5.16",
"vuex": "^3.0.1",
"webpack": "^3.11.0",
"webpack-merge": "^4.1.2",
"xlsx": "^0.12.5"
},
"devDependencies": {
"http-proxy-middleware": "^0.18.0",
"webpack-bundle-analyzer": "^2.11.1",
"webpack-dev-middleware": "^2.0.6",
"webpack-hot-middleware": "^2.21.2"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 5.0.0"
}
}

对package.json的说明：

 name - 包名.
    version - 包的版本号。
    description - 包的描述。
    homepage - 包的官网URL。
    author - 包的作者，它的值是你在https://npmjs.org网站的有效账户名，遵循“账户名<邮件>”的规则，例如：zhangsan <zhangsan@163.com>。
    contributors - 包的其他贡献者。
    dependencies / devDependencies - 生产/开发环境依赖包列表。它们将会被安装在 node_module 目录下。
    repository - 包代码的Repo信息，包括type和URL，type可以是git或svn，URL则是包的Repo地址。
    main - main 字段指定了程序的主入口文件，require('moduleName') 就会加载这个文件。这个字段的默认值是模块根目录下面的 index.js。
    keywords - 关键字

当我们执行npm install其实就是执行dependencies的过程，生成一个node-moudel的文件夹，里面放置的是对应引入的插件。

当我们执行npm build和npm dev其实都是执行的scripte里面的内容

package.json里面

"dev": "node build/dev-server.js",

"build": "node build/build.js",

意思：运行”npm run dev”的时候执行的是build/dev-server.js文件，

运行”npm run build”的时候执行的是build/build.js文件。

├─build
│
├─build.js
│
├─check-versions.js
│
├─dev-client.js
│
├─dev-server.js
│
├─utils.js
│
├─vue-loader.conf.js
│
├─webpack.base.conf.js
│
├─webpack.dev.conf.js
│
├─webpack.prod.conf.js
│
└─webpack.test.conf.js
├─config
│
├─dev.env.js
│
├─index.js
│
├─prod.env.js
│
└─test.env.js
├─...
└─package.json
以上是关于bulid与run的所有文件

build文件夹分析

build/dev-server.js

npm run dev 执行的文件build/dev-server.js文件，执行了：

• 检查node和npm的版本
• 引入相关插件和配置
• 创建express服务器和webpack编译器
• 配置开发中间件（webpack-dev-middleware）和热重载中间件（webpack-hot-middleware）
• 挂载代理服务和中间件
• 配置静态资源
• 启动服务器监听特定端口（8080）
• 自动打开浏览器并打开特定网址（localhost:8080）

说明： express服务器提供静态文件服务，不过它还使用了http-proxy-middleware，一个http请求代理的中间件。前端开发过程中需要使用到后台的API的话，可以通过配置proxyTable来将相应的后台请求代理到专用的API服务器。

build/webpack.base.conf.js

dev-server依赖的webpack配置是webpack.dev.conf.js文件，

测试环境下使用的是webpack.prod.conf.js

webpack.dev.conf.js中又引用了webpack.base.conf.js

webpack.base.conf.js主要完成了下面这些事情：

1. 配置webpack编译入口
2. 配置webpack输出路径和命名规则
3. 配置模块resolve规则
4. 配置不同类型模块的处理规则

这个配置里面只配置了.js、.vue、图片、字体等几类文件的处理规则，如果需要处理其他文件可以在module.rules里面配置。

build/webpack.dev.conf.js

在webpack.base.conf的基础上增加完善了开发环境下面的配置，主要包括下面几件事情：

将hot-reload相关的代码添加到entry chunks
合并基础的webpack配置
使用styleLoaders
配置Source Maps
配置webpack插件

build/check-versions.js和build/dev-client.js

最后是build文件夹下面两个比较简单的文件，

dev-client.js似乎没有使用到，代码也比较简单，这里不多讲。

check-version.js完成对node和npm的版本检测

build/utils.js和build/vue-loader.conf.js

webpack配置文件中使用到了utils.js和vue-loader.conf.js这两个文件，utils主要完成下面3件事：

1. 配置静态资源路径
2. 生成cssLoaders用于加载.vue文件中的样式
3. 生成styleLoaders用于加载不在.vue文件中的单独存在的样式文件

vue-loader.conf则只配置了css加载器以及编译css之后自动添加前缀。

build/build.js

构建环境下的配置，

build.js主要完成下面几件事：

1. loading动画
2. 删除创建目标文件夹
3. webpack编译
4. 输出信息

build/webpack.prod.conf.js

构建的时候用到的webpack配置来自webpack.prod.conf.js，该配置同样是在webpack.base.conf基础上的进一步完善。主要完成下面几件事情：

1. 合并基础的webpack配置
2. 使用styleLoaders
3. 配置webpack的输出
4. 配置webpack插件
5. gzip模式下的webpack插件配置
6. webpack-bundle分析

说明： webpack插件里面多了丑化压缩代码以及抽离css文件等插件。

config文件夹分析

config/index.js

config文件夹下最主要的文件就是index.js了，

在这里面描述了开发和构建两种环境下的配置，前面的build文件夹下也有不少文件引用了index.js里面的配置。

config/dev.env.js、config/prod.env.js和config/test.env.js

这三个文件就简单设置了环境变量而已，没什么特别的。

这是webpack的基本入门，webpack还有很多插件，还需要去探索

参考：关于vue的npm run dev和npm run build

最后

以上就是激动天空为你收集整理的npm install和npm run dev以及npm run build的区别  build文件夹分析的全部内容，希望文章能够帮你解决npm install和npm run dev以及npm run build的区别  build文件夹分析所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。