0%

2021-05-29 解决 vite 下 vuex-module-decorators 的热更新问题

解决 vite 下 vuex-module-decorators 的热更新问题

vite 官方文档:https://cn.vitejs.dev/

vuex 官方文档:https://vuex.vuejs.org/zh/

vuex-module-decorators 地址:https://github.com/championswimmer/vuex-module-decorators

前言

最近使用了 vuex-module-decorators 这个包来写项目,在用 vue-cli(webpack) 搭建的项目下表现良好,但是在 vite 中遇到了点问题,下面来从源码看下怎么解决问题。

在此之前,先说下 vuex-module-decorators 这个包是用来干嘛的,主要功能就是用装饰器和 TypeScript 来写 vuex ,与原生 vuex 相比,好处就是多了类型提示,使用起来更加方便。我这里从官方文档摘抄一个例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
interface StoreType {
mm: MyModule
}
// Declare empty store first
const store = new Vuex.Store<StoreType>({})

// Create module later in your code (it will register itself automatically)
// In the decorator we pass the store object into which module is injected
// NOTE: When you set dynamic true, make sure you give module a name
@Module({ dynamic: true, store: store, name: 'mm' })
class MyModule extends VuexModule {
count = 0

@Mutation
incrCount(delta) {
this.count += delta
}
}

发现问题

接下来我会说下为什么 vuex-module-decorators 在 vue-cli(webpack) 搭建的项目下表现良好。

原因出在 webpack 的热更新机制。

在 webpack 中,如果修改了 css 则是不刷新页面的热更新,如果修改了 js ,则会刷新页面重新加载。这就是说,vuex-module-decorators 不支持热更新的问题被 webpack 掩盖了。

在 vite 中,源码出现改动时只会更新必要的部分,因此不会重新加载整个页面,但由于 vuex-module-decorators 不支持热更新,因此会出现重复注册 vuex module 的问题。在控制台会报如下警告。

1
[vuex] duplicate namespace  "app" for the namespaced module

解决问题

由于原项目已经年久失修,所以直接 fork 一个分支来改。

原项目使用 TypeScript 来编写,良好的类型提示使得没接触过这个项目的人也能快速看懂。

当然了,这里我们没必要看懂整个项目,只要找下 vuex module 是怎么注册的就行了。

通过翻看源码,我发现了如下内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// src/module/index.ts
function registerDynamicModule<S>(module: Mod<S, any>, modOpt: DynamicModuleOptions) {
if (!modOpt.name) {
throw new Error('Name of module not provided in decorator options')
}

if (!modOpt.store) {
throw new Error('Store not provided in decorator options when using dynamic option')
}

modOpt.store.registerModule(
modOpt.name, // TODO: Handle nested modules too in future
module,
{ preserveState: modOpt.preserveState || false }
)
}

这里就是 vuex-module-decorators 注册 DynamicModule 的源码,我们可以注意到这里完全没有对热更新做任何处理。

通过查阅 vuex 文档和 vite 文档,我发现 vuex 是支持热更新的,故只要做对 vite 的兼容就行了。

修改后的代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
function registerDynamicModule<S>(dynamicModule: Mod<S, any>, modOpt: DynamicModuleOptions) {
if (!modOpt.name) {
throw new Error('Name of module not provided in decorator options')
}

if (!modOpt.store) {
throw new Error('Store not provided in decorator options when using dynamic option')
}
if (import.meta.hot) { // 必需的条件守卫, 这样代码就可以在生产环境中被 tree-shaking 优化
// vite 的热更新
if (modOpt.store.hasModule(modOpt.name)) {
// 如果遇到重复模块则热更新
modOpt.store.hotUpdate({
modules: {
[modOpt.name]: dynamicModule
}
})
return
}
modOpt.store.registerModule(modOpt.name, dynamicModule, {
preserveState: modOpt.preserveState || false
})
return
}
modOpt.store.registerModule(modOpt.name, dynamicModule, {
preserveState: modOpt.preserveState || false
})
}

在项目中更新依赖后跑通了,也没有提示警告,页面也没有丢失状态,修改很成功。

修改后的包已经发布到了 GitHub,见 https://github.com/CaoMeiYouRen/vuex-module-decorators

由于懒得发布到 npm 了,所以直接从 GitHub 下载。

使用方法如下:

1
2
3
4
5
6
7
// package.json
{
"dependencies": {
"vuex-module-decorators": "CaoMeiYouRen/vuex-module-decorators"
}
}
// 或者是 "vuex-module-decorators": "git+https://github.com/CaoMeiYouRen/vuex-module-decorators.git" 也一样,GitHub访问太慢的可以用镜像

兼容 webpack

本来的话应该到此就行结束了,不过之后我还是注意了一下在 webpack 下的情况。

在 cjs 中 import.meta.hot 是不存在的,所以上面的代码要兼容 webpack 的话应该改成这样。

但我不太清楚 webpack 能不能解析 import.meta ,如果不能的话把 import.meta.hot 删除,然后重新编译即可。【或者直接使用原版不就完事了】

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
function registerDynamicModule<S>(dynamicModule: Mod<S, any>, modOpt: DynamicModuleOptions) {
if (!modOpt.name) {
throw new Error('Name of module not provided in decorator options')
}

if (!modOpt.store) {
throw new Error('Store not provided in decorator options when using dynamic option')
}
if (import.meta.hot || module.hot) { // 此处添加 module.hot 来支持 webpack 热更新。
// vite 的热更新
if (modOpt.store.hasModule(modOpt.name)) {
// 如果遇到重复模块则热更新
modOpt.store.hotUpdate({
modules: {
[modOpt.name]: dynamicModule
}
})
return
}
modOpt.store.registerModule(modOpt.name, dynamicModule, {
preserveState: modOpt.preserveState || false
})
return
}
modOpt.store.registerModule(modOpt.name, dynamicModule, {
preserveState: modOpt.preserveState || false
})
}

本文作者:草梅友仁
本文地址: https://blog.cmyr.ltd/archives/123b92.html
版权声明:转载请注明出处!

坚持原创技术分享,您的支持将鼓励我继续创作!