是否可以将变量值注入 javascript 评论？

Question

TL;DR: 是否可以在评论

中注入常量变量（在运行时间内不会改变）

我遇到了一个非常独特的情况，我需要我的评论在其中具有特定的价值。

我在 React 中进行代码拆分，在 React 中命名块的方法是在导入旁边添加注释，如下所示：

const MyComponent = lazy(() =>
  import('./MyComponent' /* webpackChunkName: "MyComponent" */)
)

这使我的延迟加载块在生成的 ID 名称上具有可读名称。

我的代码库中有一个部分，我根据我的文件夹结构为我的组件生成延迟加载的路由，但我遇到了一个问题，我无法将我的块名称设置为由函数设置的变量。

这是我的函数：

function generateLink(label: string) {
  const path = label.replaceAll(' ', '');
  return {
    Element: lazy(
      () => import(`./pages/${path}`, /* webpackChunkName: "{{this should be path}}" */)
    ),
    label,
    path
  };

}

我是否可以将 path 变量注入该评论？

补充说明，此 generateLink 函数在运行期间不是运行，链接是静态的。

Answer 1

此问题已在

中得到解答

您可以使用占位符[request]，webpack 将自动使用解析后的文件名。

import(/* webpackChunkName: "[request]" */ `./pages/${path}`)

我查看了文档，它仍然存在。

例外：它将使用文件名，因此如果您有嵌套文件并且 path 变量也可以使用目录，那么您可能就不走运了。

Answer 2

遗憾的是，没有简单的方法可以将变量注入您的评论。但是，对于您的特定问题，有一个 webpack 解决方案，只需使用 Magic Comments

将 generateLink 函数更新为以下应该可以解决您的问题。

function generateLink(label: string) {
  const path = label.replaceAll(' ', '');
  return {
    Element: lazy(
      () => import(`./pages/${path}`, /* webpackChunkName: "[request]" */)
    ),
    label,
    path
  };
}

现在如果你的 path 是 HomePage，你的区块名称将解析为 /HomePage.[chunkId].js

只需确保您所有的文件名都是唯一的，否则 webpack 会在您的 non-unique 个文件名的块中添加一个数字后缀。

例如如果你有 2 个文件名 HomePage.jsx，那么你最终会得到 /HomePage0.[chunkId].js 和 /HomePage2.[chunkId].js

是否可以将变量值注入 javascript 评论？

Is it possible to inject a variable value into a javascript comment?

javascript

comments

webpack

react-lazy-load