Import dynamically named exports

Question

Is it possible to import named exports dynamically? I have a file, banana.js with hundreds of named exports. Id like to import them on demand. Is this possible? And if it is, will it only load that export and not all?

I know its possible to import them dynamically from individual files but I want them in the same file.

Example below..

// 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}`    
}

Fyi im using Vue.js

What is the payload of these objects? Are they JSON objects or class definitions? If they're json objects (or similar) I may recommend using a data storage solution like mongodb. That way you can dynamically load these objects via query. If these are classes, to my knowledge require / import synchronously reads the contents are the file. — duffmanseven, Dec 15 '19 at 20:42
"*will it only load that export and not all?*" - it will always load the entire module, no matter how many exported variables you import anywhere. — Bergi, Dec 15 '19 at 21:23
``let { `banana_${currentPage}` } =`` is not valid destructuring syntax. But yes, `await import(…)` will return a namespace object, on which you can [dynamically access properties in the usual way](https://stackoverflow.com/questions/4244896/dynamically-access-object-property-using-variable). Use e.g. `const {["banana_"+currentPage]: foo} = …`. — Bergi, Dec 15 '19 at 21:25
@Bergi Appreciate the feedback. So all in all there is no point in loading these dynamically in favor of speed. — Per, Dec 16 '19 at 13:24
@duffmanseven They are json objects so an alternative would be your suggestion. However Id prefer to skip extra complexity with a db. Thanks. — Per, Dec 16 '19 at 13:27
@PerThomasson If you want to improve performance by only loading parts dynamically, you will need to split them into separate files. Then you can load only those modules that you need. — Bergi, Dec 16 '19 at 15:21

score -1 · Answer 1 · answered Dec 15 '19 at 20:36

From what I know, you might have to use require('./banana.js') here. Please note that require is synchronous, so need for await. If you use eslint and it forbids usage of require, just add // eslint-disable-line to the end of that line. BTW, I don't know Vue at all.

About the object you import, you should probably make an array instead of suffixing each export with a number.

Edit: I just realized that dynamic imports are a thing not only possible with require, so ignore the first paragraph.

score -1 · Answer 2 · answered Dec 17 '19 at 03:10

Based on your response to my question I offer the following solution. I understand not wanting to deploy and use a full database solution for the sake of hot loading some JSON objects. I'm unsure of your use case and other details related to your project.

You can use a self contained database like SQLite. Instead of setting up a NoSQL or SQL server. You can instead just store what you need to the SQLite file. Since Vue requires Node.js you can use the Node.js SQLite3 library https://www.npmjs.com/package/sqlite3.

I hope this helps.

Import dynamically named exports

2 Answers2