Vuex源码学习笔记 - Vuex开发运行流程（二）

最新推荐文章于 2024-05-29 11:13:34 发布

小帅的编程笔记

最新推荐文章于 2024-05-29 11:13:34 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏：小帅的编程笔记文章标签：前端 vuex 源码

本文链接：https://blog.youkuaiyun.com/cmdfas/article/details/121446600

在上一篇笔记中：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