带变量名的导入函数答案

【问题标题】：Import function with variable name带变量名的导入函数
【发布时间】：2021-07-13 03:36:20
【问题描述】：

今天想试试Svelte。

在我的代码中，我想动态导入一个文件，所以我看到了这个问题：Dynamically loading component using import or fetch 和这个REPL。

但我尝试将其更改为像这样进行“真正的”动态导入：[my REPL with the test]

function loadChatbox() {
        let nameOfFile = './ChatBox.svelte'
        import(nameOfFile).then(res => Chatbox = res.default)
}

我只是将import 中的字符串更改为变量字符串

但是代码不再起作用了：/（一个真实的请求被发送到服务器，它以 404 响应）

所以我的问题是：我可以这样导入吗？

【问题讨论】：

@connexo 我不确定，因为在real example 中，他使用then()。而here 文档说它返回了一个承诺
我认为这是因为您在 REPL 中运行它。因为这是一个网站，它会在使用变量（不存在）时尝试向svelte.dev/ChatBox.svelte 发出请求。我认为它仅适用于字符串，因为 svelte 编译器正在获取它，因此可以将其视为正常导入。尝试在您的机器上运行它，看看它是否有效。
@pabolo12 我无法编译template。我在编译时得到了Error: UMD and IIFE output formats are not supported for code-splitting builds：/
@pabolo12 我把inlineDynamicImports: true, 放到我的rollup.config.js 上，normal template 工作了。但是当我将代码更改为 my template 时：他也在尝试获取并获得 404。我认为如果 svelte 这样做是正常的（因为我知道他并没有真正使用.svelte 但 bundle.js 中的 js）但我该如何做到这一点？

【解决方案1】：

您的代码完全有效，但无法在 REPL 上运行，因为它不会模拟类似本地的环境（如果您从一个文件转到另一个文件，则 URL 不会更改，因此无法获取 @ 987654326@)。 Codesandbox 可以，你会看到它在那里运行良好：

【讨论】：