如何热重载包装在本机导入上下文中的模块？

Posted 2023-03-15

【中文标题】如何热重载包装在本机导入上下文中的模块？

【英文标题】：How do I hot reload a module wrapped in a native import context?

【发布时间】：2019-09-28 20:43:05

【问题描述】：

我有如下函数一个文件@/lang/index.js:

async function fetchMessages(locale) 
  const module = await import(/*
    webpackChunkName: "lang/[request]",
    webpackExclude: /index/
  */ `@/lang/$locale`)

  return module.default

我想热重载这个函数导入的模块。我尝试了几种不同的 module.hot.accept() 变体，但都没有成功。

这是我在同一文件末尾的热重载代码，但不起作用：

if (process.env.NODE_ENV !== "production" && module.hot) 
  module.hot.accept(["./en-US"], () => 
    const  locale  = i18n
    fetchMessages(locale).then((strings) => 
      i18n.setLocaleMessage(locale, strings)
    )
  )

有什么想法吗？我想在检测到更改时热重新加载我的语言文件。

谢谢！

【问题讨论】：

我找到了问题的根源，index.js 不是en-US.js 的直接父母。对于每个import() 表达式，都会创建一个新的“模块”。如果我为该模块使用 Webpack 的内部标识符 ("./src/lang lazy recursive ^\\.\\/.*$ exclude: index")，那么它将起作用，但编译器会尝试将该字符串解析为模块并引发错误。

【参考方案1】：

Webpack 目前有一个针对此“错误”的未解决问题。经过一番搜索，我找到了Webpack#8637。

该页面的一些解决方法包括：

创建一个包含导入上下文的单独文件，接受该单独文件。 使用module.hot.accept(module.children[0].id, ...)

我目前使用的解决方案是找到生成的上下文标识符，并将其保存到一个变量中，然后传递给module.hot.accept()，如下所示：

const asyncChunkId = "./src/lang lazy recursive ^\\.\\/.*$ exclude: index"
module.hot.accept(asyncChunkId, () =>  /* ... */ )

它相当脆弱，但现在可以完成这项工作。