Node.js'de ES6 değişken içe aktarma adı?

ES6 içe aktarımını kullanırken değişken adı sağlayan modüle bir şey aktarmak mümkün müdür?

Yani bir yapılandırmada sağlanan değerlere bağlı olarak bir çalışma zamanında bazı modülleri içe aktarmak istiyorum:

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

Açıklamayla değil import. importveexport statik olarak analiz edilebilecek şekilde tanımlanırlar, bu nedenle çalışma zamanı bilgilerine bağlı olamazlar.

Yükleyici API'sini (polyfill) arıyorsunuz , ancak spesifikasyonun durumu hakkında biraz emin değilim:

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

Felix'in cevabına ek olarak , buna şu anda ECMAScript 6 dilbilgisi tarafından izin verilmediğini açıkça belirteceğim :

İthalat Beyanı :

• içe ImportClause FromClause;

• ModuleSpecifier'ı içe aktarın;

FromClause :

• dan ModuleSpecifier

ModuleSpecifier :

• StringLiteral

Bir ModuleSpecifier yalnızca olabilir StringLiteral , bir gibi ifade olmayan başka türlü AdditiveExpression .

Bu aslında dinamik bir içe aktarma olmasa da (örneğin, benim durumumda, aşağıda içe aktardığım tüm dosyalar çalışma zamanında seçilmeden, web paketi tarafından içe aktarılacak ve gruplanacak), bazı durumlarda yardımcı olabilecek kullandığım bir kalıp :

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

const templates = {
  Template1,
  Template2
};

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

Veya alternatif olarak:

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

Varsayılana geri dönebileceğimi sanmıyorum require(), bu da var olmayan bir yapılandırılmış şablon yolunu içe aktarmaya çalışırsam bir hata verir.

Required ve import arasında iyi örnekler ve karşılaştırmalar burada bulunabilir: http://www.2ality.com/2014/09/es6-modules-final.html

@İainastacio'dan yeniden dışa aktarmayla ilgili mükemmel belgeler: http://exploringjs.com/es6/ch_modules.html#sec_all-exporting-styles

Bu yaklaşımla ilgili geri bildirim almakla ilgileniyorum :)

ES modülleri için dinamik içe aktarma adı verilen yeni bir spesifikasyon var . Temel olarak, sadece ara import('./path/file.js')ve gitmekte fayda var. Fonksiyon, içe aktarma başarılı olursa modül ile çözülen bir söz verir.

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

Kullanım durumları

Kullanım durumları arasında React, Vue vb. İçin rota tabanlı bileşen içe aktarma ve modülleri geç yükleme yeteneği bulunur çalışma zamanı sırasında gerekli olduklarında .

Daha fazla bilgi

İşte Google Developers hakkında bir açıklama .

Tarayıcı uyumluluğu (Nisan 2020)

MDN'ye göre, mevcut tüm büyük tarayıcılar (IE hariç) tarafından desteklenmektedir ve caniuse.com , küresel pazar payında% 87 destek göstermektedir. Yine IE veya krom olmayan Edge'de destek yok.

Node.js'de özellikle ES6 için sorulan soruyu anlıyorum import, ancak aşağıdakiler başkalarının daha genel bir çözüm aramasına yardımcı olabilir:

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

Bir ES6 modülünü içe aktarıyorsanız ve dışa aktarmaya erişmeniz defaultgerekiyorsa, aşağıdakilerden birini kullanmanız gerekeceğini unutmayın:

let variableName = "es6.js";

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

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

Bu yaklaşımla, diğer içe aktarmalarınıza daha fazla sözdizimi aşinalığı ekleyebilecek yok etme özelliğini de kullanabilirsiniz:

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

Ne yazık ki, defaultyıkmanın yanı sıra erişmek istiyorsanız , bunu birkaç adımda gerçekleştirmeniz gerekecek:

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

bunu yapmak için ES6 olmayan gösterimi kullanabilirsiniz. bu benim için çalıştı:

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

Bu sözdizimini daha az sevdim ama işe yarıyor:
yazmak yerine

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

şu sözdizimini kullanın:

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

Dinamik içe aktarma () (Chrome 63+ sürümünde mevcuttur) işinizi yapar. Bunu nasıl yapacağınız aşağıda açıklanmıştır:

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

Böyle yapardım

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...
}

dosyadan ara

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