vue-cli脚手架npm相关文件解读(7)dev-server.js

系列文章传送门:

1、build/webpack.base.conf.js

2、build/webpack.prod.conf.js

3、build/webpack.dev.conf.js

4、build/utils.js

5、build/vue-loader.conf.js

6、build/build.js

7、build/dev-server.js

8、build/check-versions.js

9、../config/index.js

下面是build/dev-server.js中相关代码和配置的说明

 项目地址:https://github.com/SmileSmith(感觉不错的话帮忙打个星哈 ~)

/*
 * npm run dev 调试执行文件,主要用于开发环境
 * 建议先查阅webapck.dev.conf.js  ../config/index.js
*/

// npm和node版本检查
require('./check-versions')()

var config = require('../config')
// 下面表示如果如果没有定义全局变量NODE_ENV,则将NODE_ENV设置为"development"
if (!process.env.NODE_ENV) {
  process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
}

var opn = require('opn') // opn插件是用来打开特定终端的,此文件用来在默认浏览器中打开链接 opn(url)
var path = require('path')
var express = require('express') // nodejs开发框架express,用来简化操作,可以当做一个功能强大的http-server
var webpack = require('webpack')
var proxyMiddleware = require('http-proxy-middleware') // http中间代理插件,此插件是用来代理请求的只能用于开发环境,目的主要是解决跨域请求后台api
var webpackConfig = process.env.NODE_ENV === 'testing'
  ? require('./webpack.prod.conf')
  : require('./webpack.dev.conf')

// default port where dev server listens for incoming traffic
// 下面是express监听的端口号,因为没有设置process.env.PORT,所以下面监听的就是config.dev.port即8080
// 需要自定义设置端口号,可以修改根目录下的package.json中的dev脚本,加上 set PORT=端口号&&
var port = process.env.PORT || config.dev.port
// automatically open browser, if not set will be false
// 默认打开浏览器,!!强制转成Boolean值,防止后续用到这个变量的地方可能出问题
var autoOpenBrowser = !!config.dev.autoOpenBrowser
// Define HTTP proxies to your custom API backend
// https://github.com/chimurai/http-proxy-middleware
// 配置反向代理的配置数据
var proxyTable = config.dev.proxyTable

// 创建express实例
var app = express()
// ※※※ Use express.Router to mock api by SmileSmith ※※※
// ※※※ 用express的router方法来mock发布一些资源 ※※※
var mockRoutes = express.Router()
mockRoutes.post('/getCurrentPeroid', function (req, res) {
  res.json({
    errno: 0 ,
    data: require('../mock/data.currentperoid.json')
  });
})
app.use('/api', mockRoutes) //api开头的请求用mock数据返回

// 把配置参数传递到webpack方法中,返回一个编译对象,这个编译对象上面有很多属性,建议看webpack官方文档
// 这里主要是用到里面的状态函数 如compilation,compile,after-emit这类的
var compiler = webpack(webpackConfig)

// 下面是webpack-dev-middleware和webpack-hot-middleware两兄弟,这两个是黄金组合
var devMiddleware = require('webpack-dev-middleware')(compiler, {
  publicPath: webpackConfig.output.publicPath, // 以webpack编译后的内容处理发布地址(/)的请求
  quiet: true // 使用friendly-errors-webpack-plugin插件这个必须设置为true,具体看wepback-dev-config.js
})

var hotMiddleware = require('webpack-hot-middleware')(compiler, {
  log: () => {}
})
// force page reload when html-webpack-plugin template changes
compiler.plugin('compilation', function (compilation) {
  compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) { // webpack任何插件都可以使用这种方式,里面可以传递钩子函数,用来在插件各个阶段做特殊处理,钩子函数种类很多
    hotMiddleware.publish({ action: 'reload' }) // 当插件html-webpack-plugin产出完成之后,强制刷新浏览器
    cb()
  })
})

// proxy api requests
// 下面是代理表的处理方法,请关注../config/index.js中开发环境proxyTab中的配置
Object.keys(proxyTable).forEach(function (context) {
  var options = proxyTable[context]
  if (typeof options === 'string') {
    options = { target: options }
  }
  app.use(proxyMiddleware(options.filter || context, options))
})

// handle fallback for HTML5 history API
// 使用H5的history来做返回,而不是浏览器url
// 用来解决单页面应用,点击刷新按钮和通过其他search值定位页面的404错误
app.use(require('connect-history-api-fallback')())

// serve webpack bundle output
// 让express用上webpack输出的模块中间件
app.use(devMiddleware)

// enable hot-reload and state-preserving
// compilation error display
// 让express用上webpack输出的热加载中间件
app.use(hotMiddleware)

// serve pure static assets
// 让express用上webpack输出在static中的静态文件
var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
app.use(staticPath, express.static('./static'))

var uri = 'http://localhost:' + port // 这个port上面提到,默认8080

//定义一个Promise用于返回,定义一个_resolve用于编译完成时的回调里面调用
var _resolve
var readyPromise = new Promise(resolve => {
  _resolve = resolve
})

console.log('> Starting dev server...')
// 等待模块编译完成就可以打开浏览器
devMiddleware.waitUntilValid(() => {
  console.log('> Listening at ' + uri + '\n')
  // when env is testing, don't need open it
  if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
    opn(uri)
  }
  _resolve() // readyPromise就可以返回resolve
})

// node.js监听端口
var server = app.listen(port)

module.exports = {
  ready: readyPromise, // (其它人)调用ready(),就能拿到一个promise对象
  close: () => {
    server.close()
  }
}

参考:http://www.cnblogs.com/ye-hcj/archive/2017/06.html

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏CSDN技术头条

深入理解 Java 多线程核心知识:跳槽面试必备

多线程相对于其他 Java 知识点来讲,有一定的学习门槛,并且了解起来比较费劲。在平时工作中如若使用不当会出现数据错乱、执行效率低(还不如单线程去运行)或者死锁...

1123
来自专栏邹立巍的专栏

Linux 的进程间通信:消息队列

Linux 环境提供了 XSI 和 POSIX 两套消息队列,本文将帮助您掌握以下内容:如何使用 XSI 消息队列,如何使用 POSIX 消息队列,它们的底层实...

7620
来自专栏腾讯IVWEB团队的专栏

使用 Node.js 实现一个简单的 ZooKeeper 客户端

Zookeeper 是一个分布式的、开源的协调服务,用在分布式应用程序中。它提出了一组简单的原语,分布式应用程序可以基于这些原语之上构建更高层的分布式服务用于实...

1.5K0
来自专栏JetpropelledSnake

Python入门之logging日志模块以及多进程日志

本篇文章主要对 python logging 的介绍加深理解。更主要是 讨论在多进程环境下如何使用logging 来输出日志, 如何安全地切分日志文件。 1. ...

9677
来自专栏比原链

Derek解读Bytom源码-protobuf生成比原核心代码

Gitee地址:https://gitee.com/BytomBlockchain/bytom

1053
来自专栏比原链

Derek解读Bytom源码-protobuf生成比原核心代码

Gitee地址:https://gitee.com/BytomBlockchain/bytom

1151
来自专栏有趣的django

RESTful API 设计指南

简介 REST(英文:Representational State Transfer,简称REST)描述了一个架构样式的网络系统,比如 web 应用程序。它首次...

3225
来自专栏IT笔记

深入理解 Java 多线程核心知识:跳槽面试必备

2987
来自专栏SDNLAB

Nova虚拟机启动

本来这一节打算写Neutron中各个OVS上的流表逻辑的,突然想起来之前学习Neutron时深入研究过的一个问题——虚拟机接入OVS是如何实现的?既然流表是为了...

3945
来自专栏Jackson0714

不惧面试:HTTP协议(1) - 基础扫盲

3007

扫码关注云+社区

领取腾讯云代金券