ES6 variable import name in node.js?

Question

Is it possible to import something into a module by providing a variable name when using ES6 import?

those. I want to import some module at runtime depending on the values ​​presented in config:

import something from './utils/' + variableName; 

Answer 1

Not with the import statement. import and export defined in such a way that they are statically analyzed, so they cannot depend on runtime information.

You are looking for a bootloader API (polyfill) , but I'm a bit unclear about the state of the spec:

 System.import('./utils/' + variableName).then(function(m) { console.log(m); }); 

Answer 2

In addition to Felix's answer , I will clearly indicate that this is not currently permitted by ECMAScript 6 :

ImportDeclaration :

• import ImportClause FromClause;

• import ModuleSpecifier;

FromClause :

• from ModuleSpecifier

ModuleSpecifier :

• String Literal

The ModuleSpecifier module can only be a StringLiteral, and not any other expression of type AdditiveExpression.

Answer 3

Although this is actually not a dynamic import (for example, in my circumstances, all the files I import will be imported and packaged using webpack not selected at runtime), the template I used may help in some circumstances:

 import Template1 from './Template1.js'; import Template2 from './Template2.js'; const templates = { Template1, Template2 }; export function getTemplate (name) { return templates[name]; } 

or alternatively:

 // index.js export { default as Template1 } from './Template1'; export { default as Template2 } from './Template2'; // OtherComponent.js import * as templates from './index.js' ... // handy to be able to fall back to a default! return templates[name] || templates.Template1; 

I do not think that using require() I can return to the default by default, which causes an error if I try to import a constructed template path that does not exist.

Good examples and comparisons between requirement and import can be found here: http://www.2ality.com/2014/09/es6-modules-final.html

Excellent re-export documentation from @iainastacio: http://exploringjs.com/es6/ch_modules.html#sec_all-exporting-styles

I am interested to hear feedback on this approach :)

Answer 4

There is a new specification called dynamic import for ES modules. Essentially, you just call import('./path/file.js') and all import('./path/file.js') . The function returns a promise that is resolved with the module if the import was successful.

 async function import() { try { const module = await import('./path/module.js'); } catch (error) { console.error('import failed'); } } 

Application cases

Use cases include importing route-based components for React, Vue, etc., as well as the option of delayed loading of modules if needed at runtime.

Further information

Here is an explanation for Google developers .

Browser compatibility

According to MDN, it is supported by every current Chrome browser and in Firefox 66 beyond the flag.

Answer 5

for this you can use notation without ES6. this is what worked for me:

 let myModule = null; if (needsToLoadModule) { myModule = require('my-module').default; } 

Answer 6

I like this syntax less, but it works:
instead of writing

 import memberName from "path" + "fileName"; // this will not work!, since "path" + "fileName" need to be string literal 

use this syntax:

 let memberName = require("path" + "fileName"); 

Answer 7

I would do it like this:

 function load(filePath) { return () => System.import(`${filePath}.js`); // Note: Change .js to your file extension } let A = load('./utils/' + variableName) // Now you can use A in your module 

Answer 8

I understand the question specifically asked for import ES6 in Node.js, but the following may help others find a more general solution:

 let variableName = "es5.js"; const something = require('./utils/${variableName}'); 

Please note: if you import the ES6 module and you need access to export by default , you will need to use one of the following:

 let variableName = "es6.js"; // Assigning const defaultMethod = require('./utils/${variableName}').default; // Accessing const something = require('./utils/${variableName}'); something.default(); 

You can also use destructuring with this approach, which can add more syntax to your other imports:

 // Destructuring const { someMethod } = require('./utils/${variableName}'); someMethod(); 

Unfortunately, if you want to access by default as well as destructuring, you need to do this in a few steps:

 // ES6 Syntax Import defaultMethod, { someMethod } from "const-path.js"; // Destructuring + default assignment const something = require('./utils/${variableName}'); const defaultMethod = something.default; const { someMethod, someOtherMethod } = something; 

Answer 9

Dynamic Import () (available in Chrome 63+) will do your job. Here's how:

 let variableName = 'test.js'; let utilsPath = './utils/' + variableName; import(utilsPath).then((module) => { module.something(); }); 

Answer 10

Using ES6 Template Strings I managed to import dynamic variables, here is my boilerplate - this is universal Javascript, but it should work with various configurations:

 const myImg = './cute.jpg' <img src={require(`${myImg}`)} />