在上一篇笔记中:Vuex源码学习笔记(一)
我们从Github上找到了Vuex的源码,并clone了到本地,接着大致了解了每个文件夹的所存放的代码的作用,Vuex项目的架构也十分的整洁清晰,一目了然。最后我们使用npm run dev
命令运行起了Vuex的项目。
今天我们将从npm run dev
命令开始,来探究Vuex的开发的流程
注意:我们需要切换到4.0分支,本期主要分析Vuex4源码,也就是Vue3配套使用的Vuex。
首先我们可以从package.json
文件看到:
"scripts": {
"dev": "node examples/server.js",
...
}
npm run dev
命令实际就是使用node运行了examples
文件夹下的server.js
文件
我们先来看server.js文件:
const express = require('express')
const webpack = require('webpack')
const webpackDevMiddleware = require('webpack-dev-middleware')
const webpackHotMiddleware = require('webpack-hot-middleware')
const WebpackConfig = require('./webpack.config')
const app = express()
const compiler = webpack(WebpackConfig)
app.use(webpackDevMiddleware(compiler, {
publicPath: '/__build__/', // 发布目录
stats: {
colors: true, // 是否以不同的颜色输出
chunks: false // 是否添加关于chunk的信息。设置为false更少输出。
}
}))
app.use(webpackHotMiddleware(compiler))
// Step1: 设置当前目录为静态目录
app.use(express.static(__dirname))
// Step2: 如果没有匹配到静态文件则跳转到首页
app.use((req, res, next) => {
res.redirect('/')
})
const port = process.env.PORT || 8080
module.exports = app.listen(port, () => {
console.log(`Server listening on http://localhost:${
port}, Ctrl+C to stop`)
})
注意,此webpack使用的版本为4.x版本,现在最新的webpack为5.x版本。
webpack主要有三种开发模式,分别为:
- webpack的watch模式
- webpack-dev-server
- webpack-dev-middleware
这个server.js
文件使用的就是webpack的webpack-dev-middleware开发模式。
然后使用express启动一个本地服务器,访问http://localhost:8080,将会打开根目录的examples文件夹下的index.html文件,打开http://localhost:8080/composition/counter,将会打开composition/counter下的index.html文件。
然后我们打开composition/counter下的index.html文件可以看到:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>vuex counter example</title>
<link rel="stylesheet" href="/global.css">
</head