Nativescript-vue + Typescript-HMR在Vue类组件上不起作用

Question

环境

• CLI：6.5.0
• 跨平台模块：6.5.1
• Android运行时：6.5.0
• iOS运行时：6.5.0

描述错误

使用vue类组件样式+打字稿保存任何文件时，它根本不会更新。给我以下错误：

File change detected. Starting incremental webpack compilation...
Successfully transferred bundle.609c813aedb0d81fb57e.hot-update.js on device emulator-5554.
Successfully transferred 609c813aedb0d81fb57e.hot-update.json on device emulator-5554.
JS: HMR: Checking for updates to the bundle with hmr hash 609c813aedb0d81fb57e.
JS: HMR: Ignored an update to unaccepted module: 
JS: HMR:          ➭ ./routes.ts
JS: HMR:          ➭ ./main.ts
JS: HMR: Cannot apply update with hmr hash 609c813aedb0d81fb57e.
JS: HMR: Aborted because ./routes.ts is not accepted
JS: Update propagation: ./routes.ts -> ./main.ts
Refreshing application on device emulator-5554...
Successfully transferred bundle.js on device emulator-5554.
Successfully transferred runtime.js on device emulator-5554.
Successfully transferred vendor.js on device emulator-5554.
JS: HMR: Cannot apply update. A previous update aborted. Application needs to be restarted in order to apply the changes.
Restarting application on device emulator-5554...

这将导致整个应用程序重新启动，而没有HRM更新。

要复制

基于本地脚本博客NativeScript-Vue with Class Components 链接上的更多示例。

1. npm install -g @ vue / cli @ vue / cli-init
2. vue init nativescript-vue / vue-cli-template hmrbug。 （选择打字稿）
3. npm i vue-class-component
4. npm i vue-property-decorator

下一个： 创建以下模板：

<Label text="Hello" textWrap="true" />

然后在文本中打个招呼

<Label text="Hello Hello" textWrap="true" />

检查错误。

预期的行为

使用著名的HMR，而无需重新启动整个应用程序。我认为这是一个严重的问题或错误，因为它在等待应用程序重新启动时会降低您作为开发人员的工作效率。

Answer 1

请使用tns debug android --no-hmr

在nativescript-vue中，不保证HMR。 HMR只能在更改样式文件时使用。

我的个人用途

我仅将tns debug android用于样式设置。如果进行任何其他更改，我将不信任HMR。

我添加了一个名为yarn devan的yarn脚本来加快键入过程。

我在package.json文件中添加了以下几行

{
  "scripts": {
    "dev": "tns debug android",
    "devan": "tns debug android --no-hmr",
    "devin": "tns debug ios --no-hmr",
    "un": "adb uninstall com.domain.yourapp"
  },
}

---

如果在nativescript-vue项目中使用typecipt文件，您将始终看到HMR错误消息。

JS: HMR: Checking for updates to the bundle with hmr hash 7d5f6392d6103f1496e6.
JS:  WARN  HMR: Ignored an update to unaccepted module: 
JS:  WARN  HMR:          ➭ ./routes/index.ts
JS:  WARN  HMR:          ➭ ./main.ts
JS:  ERROR  HMR: Cannot apply update with hmr hash 7d5f6392d6103f1496e6.
JS:  ERROR  HMR: Aborted because ./routes/index.ts is not accepted
JS: Update propagation: ./routes/index.ts -> ./main.ts

Answer 2

我让我的Nativescript-Vue + Typescript与HMR项目一起工作。请注意（根据NS-Vue的创建者严格要求），在处理样式时最好启用HMR。

以下是解决我的问题的问题和线索：https://github.com/Lyduz/nitibo/issues/19