Nom d'importation de variable ES6 dans node.js?

est-il possible d'importer quelque chose dans le module fournissant un nom de variable tout en utilisant l'importation ES6?

Ie je veux importer un module à un runtime en fonction des valeurs fournies dans une configuration:

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

Pas avec la importdéclaration. importet exportsont définis de manière à pouvoir être analysés statiquement, ils ne peuvent donc pas dépendre des informations d'exécution.

Vous recherchez l' API du chargeur (polyfill) , mais je ne suis pas certain du statut de la spécification:

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

En plus de la réponse de Felix , je noterai explicitement que cela n'est actuellement pas autorisé par la grammaire ECMAScript 6 :

ImportDeclaration :

• import ImportClause FromClause;

• import ModuleSpecifier;

FromClause :

• depuis ModuleSpecifier

ModuleSpecifier :

• StringLiteral

Un ModuleSpecifier ne peut être qu'un StringLiteral , pas un autre type d'expression comme AdditiveExpression .

Bien que ce ne soit pas réellement une importation dynamique (par exemple, dans mon cas, tous les fichiers que j'importe ci-dessous seront importés et regroupés par webpack, non sélectionné au moment de l'exécution), un modèle que j'ai utilisé qui peut aider dans certaines circonstances est :

import Template1 from './Template1.js';
import Template2 from './Template2.js';

const templates = {
  Template1,
  Template2
};

export function getTemplate (name) {
  return templates[name];
}

Ou bien:

// 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;

Je ne pense pas que je puisse revenir à une valeur par défaut aussi facilement avec require(), ce qui génère une erreur si j'essaie d'importer un chemin de modèle construit qui n'existe pas.

De bons exemples et comparaisons entre require et import peuvent être trouvés ici: http://www.2ality.com/2014/09/es6-modules-final.html

Excellente documentation sur la réexportation depuis @iainastacio: http://exploringjs.com/es6/ch_modules.html#sec_all-exporting-styles

Je suis intéressé d'entendre des commentaires sur cette approche :)

Il existe une nouvelle spécification appelée importation dynamique pour les modules ES. En gros, vous venez d'appeler import('./path/file.js')et vous êtes prêt à partir. La fonction renvoie une promesse, qui résout avec le module si l'importation a réussi.

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

Cas d'utilisation

Les cas d'utilisation incluent l' importation de composants basés sur les routes pour React, Vue, etc. et la possibilité de charger paresseusement des modules , une fois qu'ils sont requis pendant l'exécution.

Informations complémentaires

Voici une explication sur les développeurs Google .

Compatibilité du navigateur (avril 2020)

Selon MDN, il est pris en charge par tous les principaux navigateurs actuels (sauf IE) et caniuse.com affiche un soutien de 87% sur la part de marché mondiale. Encore une fois pas de support dans IE ou Edge non chromé.

Je comprends la question spécifiquement posée pour ES6 importdans Node.js, mais ce qui suit pourrait aider les autres à rechercher une solution plus générique:

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

Notez que si vous importez un module ES6 et que vous devez accéder à l' defaultexportation, vous devrez utiliser l'un des éléments suivants:

let variableName = "es6.js";

// Assigning
const defaultMethod = require(`./utils/${variableName}`).default;

// Accessing
const something = require(`./utils/${variableName}`);
something.default();

Vous pouvez également utiliser la déstructuration avec cette approche qui peut ajouter plus de familiarité avec la syntaxe de vos autres importations:

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

Malheureusement, si vous souhaitez accéder defaultainsi que la déstructuration, vous devrez effectuer cette opération en plusieurs étapes:

// 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;

vous pouvez utiliser la notation non ES6 pour ce faire. C'est ce qui a fonctionné pour moi:

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

J'aime moins cette syntaxe, mais ça marche:
au lieu d'écrire

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

utilisez cette syntaxe:

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

L'importation dynamique () (disponible dans Chrome 63+) fera votre travail. Voici comment:

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

Je le ferais comme ça

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

./utils/test.js

export default () => {
  doSomething...
}

appel depuis un fichier

const variableName = 'test';
const package = require(`./utils/${variableName}`);
package.default();