如何使用ES6模块导入文件，并以字符串形式读取其内容？

Question

在我的标准 React 应用程序中，我需要实现以下目标：导入位于 src 文件夹中的文件，以便简单地将其内容作为字符串读取。例如，假设我的文件中有以下代码：

alert('hey') 

然后在其他一些文件中，我想用伪代码做这样的事情：

import * as string from './someFile.js'

console.log(string)

console.log 的输出应该是 JS 代码，作为字符串：

alert('hey')

如果我可以将该文件放入我的公共文件夹中，我就可以执行 http 请求并按照我的意愿读取它。但问题当然是，该文件是构建过程的一部分（在 src 文件夹内）

这可以吗？

Answer 1

我可以思考：

1. 使用以下代码定义constants.js文件：

   export default "alert('vasia')";
   

2. 从某个反应文件导入此文件：

   import vasia from "./constants";
   
   const App = () => {
     console.log(eval(vasia));
   }
   

这就是您正在寻找的吗？

但是，必须警告你：“eval”是邪恶的！

Answer 2

我想做同样的事情，但不幸的是发现从 2023 年开始在纯 JS 中这是不可能的。

有一个关于“导入断言”的第 3 阶段 TC39 提案，可在“基于 Chromium”的浏览器中使用，但仅允许导入 JSON 文件，因此在这种特殊情况下它肯定没有帮助。 我相信您现在最好的选择是使用 Fetch API 异步获取文件的内容。

async function getSampleText() {
    const response = await fetch('someFile.js');
    console.log(
        await response.text()
    );
}