导入动态命名的导出答案

【问题标题】：Import dynamically named exports导入动态命名的导出
【发布时间】：2019-12-15 18:41:45
【问题描述】：

是否可以动态导入命名导出？我有一个文件banana.js，其中包含数百个命名导出。我想按需导入它们。这可能吗？如果是，它会只加载那个导出而不是全部吗？

我知道可以从单个文件中动态导入它们，但我希望它们在同一个文件中。

下面的例子..

// banana.js
export const banana_1 = {
  ..
}
export const banana_2 = {
  ..
}

// main.js
const currentPage = 1
async getSomething(){
  let { `banana_${currentPage}` } = await import('./banana.js');    
  const foo = `banana_${currentPage}`    
}

我正在使用 Vue.js

【问题讨论】：

这些对象的有效载荷是多少？它们是 JSON 对象还是类定义？如果它们是 json 对象（或类似对象），我可能会建议使用 mongodb 之类的数据存储解决方案。这样您就可以通过查询动态加载这些对象。如果这些是类，据我所知 require / import 同步读取的内容是文件。
“它会只加载那个导出而不是全部吗？” - 它总是会加载整个模块，无论您在任何地方导入多少个导出变量。
let { `banana_${currentPage}` } = 不是有效的解构语法。但是是的，await import(…) 将返回一个命名空间对象，您可以在其上dynamically access properties in the usual way。使用例如const {["banana_"+currentPage]: foo} = ….
@Bergi 感谢您的反馈。所以总而言之，动态加载这些以提高速度是没有意义的。
@PerThomasson 如果您想通过仅动态加载部件来提高性能，则需要将它们拆分为单独的文件。然后你可以只加载你需要的那些模块。

标签： javascript dynamic-import

【解决方案1】：

据我所知，您可能必须在此处使用require('./banana.js')。请注意 require 是同步的，所以需要 await。如果你使用 eslint 并且它禁止使用 require，只需在该行末尾添加 // eslint-disable-line。顺便说一句，我根本不了解 Vue。

关于您导入的对象，您可能应该创建一个数组，而不是为每个导出添加一个数字后缀。

编辑：我刚刚意识到动态导入不仅可以通过require 实现，因此请忽略第一段。

【讨论】：

【解决方案2】：

根据您对我的问题的回答，我提供以下解决方案。我了解不想为了热加载某些 JSON 对象而部署和使用完整的数据库解决方案。我不确定您的用例和与您的项目相关的其他详细信息。

您可以使用 SQLite 等自包含数据库。而不是设置 NoSQL 或 SQL 服务器。相反，您可以将所需的内容存储到 SQLite 文件中。由于 Vue 需要 Node.js，您可以使用 Node.js SQLite3 库https://www.npmjs.com/package/sqlite3。

我希望这会有所帮助。

【讨论】：