快速刷新问题:NextJs 无法与本地包一起正常工作。如何在开发时强制清除缓存?
Fast Refresh Issues: The NextJs is not working properly with local package. How can I force to clear cache while developing?
我有一个使用 NextJs(和 React)和 mobx-state-tree(但可以是 context 或 redux)作为包管理器构建的应用程序。所有商店都在一个名为 SMK(状态管理工具包)的 npm 包中创建和处理,我创建该包是为了使子商店可在我的移动和 Web 应用程序中重用。
工作原理:
- 在 SMK 上使用
models
、actions
和 views
创建子商店并将其作为模块导出。
- 使用
yarn add @my-repo/smk
添加 SMK。
- 在我的应用程序中创建根存储并从 SMK 导入子存储作为根存储的子存储。
- 构建并启动应用程序,一切正常。
但我需要 运行 并在本地发布 SMK 以便于开发。我以前使用的解决方案是yalc.
使用 yalc 并在本地 运行ning 它是这个过程:
- 在 SMK 中,运行s
yarn start
。 (这样做 nodemon --ignore src/index.ts -e js,ts,tsx,json --watch src/ --exec yalc push --scripts
)
- 在APP中,运行s
yalc add @my-repo/smk
。 (这将添加一个依赖项,如 "@my-repo/smk": "file:.yalc/@my-repo/smk"
)。
- 在APP中,运行s
yarn build
然后yarn start
瞧!一切都运行完美,我在 SMK 上本地所做的任何更改在 APP 上运行完美。
但是,当我 运行 yarn dev
做 next dev
作为 default of NextJs 它不起作用时。
这是我面临的错误:
错误解释:因为我只在本地添加了setTestingState
和testingState
,所以说不存在
可能的原因:fast refresh没有正确刷新缓存。
我试过:
- 添加
// @refresh reset
强制执行,但没有用。
- 停止和启动应用程序。
- 构建、启动然后 运行 开发。 (适用于构建而不适用于开发)
用yarn dev
和yalc
解决这个问题的solution/workaround是什么?
看起来这是 NextJs 上的一个错误,我们可以发现一些开发人员要求 NextJs 允许我们禁用快速刷新,看起来他们不关心或者只是不想更改它。
所以,我找到了一个第三方库,next-remote-watch,它正在为我解决这个问题。基本上,是替代 next dev
使用的替代脚本,它将快速简单地构建和激活观察者。
在package.json
使用
"scripts": {
"start": "next-remote-watch @my-repo/smk"
}
我有一个使用 NextJs(和 React)和 mobx-state-tree(但可以是 context 或 redux)作为包管理器构建的应用程序。所有商店都在一个名为 SMK(状态管理工具包)的 npm 包中创建和处理,我创建该包是为了使子商店可在我的移动和 Web 应用程序中重用。
工作原理:
- 在 SMK 上使用
models
、actions
和views
创建子商店并将其作为模块导出。 - 使用
yarn add @my-repo/smk
添加 SMK。 - 在我的应用程序中创建根存储并从 SMK 导入子存储作为根存储的子存储。
- 构建并启动应用程序,一切正常。
但我需要 运行 并在本地发布 SMK 以便于开发。我以前使用的解决方案是yalc.
使用 yalc 并在本地 运行ning 它是这个过程:
- 在 SMK 中,运行s
yarn start
。 (这样做nodemon --ignore src/index.ts -e js,ts,tsx,json --watch src/ --exec yalc push --scripts
) - 在APP中,运行s
yalc add @my-repo/smk
。 (这将添加一个依赖项,如"@my-repo/smk": "file:.yalc/@my-repo/smk"
)。 - 在APP中,运行s
yarn build
然后yarn start
瞧!一切都运行完美,我在 SMK 上本地所做的任何更改在 APP 上运行完美。
但是,当我 运行 yarn dev
做 next dev
作为 default of NextJs 它不起作用时。
这是我面临的错误:
错误解释:因为我只在本地添加了setTestingState
和testingState
,所以说不存在
可能的原因:fast refresh没有正确刷新缓存。
我试过:
- 添加
// @refresh reset
强制执行,但没有用。 - 停止和启动应用程序。
- 构建、启动然后 运行 开发。 (适用于构建而不适用于开发)
用yarn dev
和yalc
解决这个问题的solution/workaround是什么?
看起来这是 NextJs 上的一个错误,我们可以发现一些开发人员要求 NextJs 允许我们禁用快速刷新,看起来他们不关心或者只是不想更改它。
所以,我找到了一个第三方库,next-remote-watch,它正在为我解决这个问题。基本上,是替代 next dev
使用的替代脚本,它将快速简单地构建和激活观察者。
在package.json
使用
"scripts": {
"start": "next-remote-watch @my-repo/smk"
}