Nama impor variabel ES6 di node.js?

apakah mungkin untuk mengimpor sesuatu ke modul yang menyediakan nama variabel saat menggunakan impor ES6?

Yaitu saya ingin mengimpor beberapa modul saat runtime tergantung pada nilai yang diberikan dalam konfigurasi:

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

Tidak dengan importpernyataannya. importdan exportdidefinisikan sedemikian rupa sehingga dapat dianalisis secara statis, sehingga tidak dapat bergantung pada informasi waktu proses.

Anda mencari API pemuat (polyfill) , tetapi saya agak tidak jelas tentang status spesifikasinya:

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

Selain jawaban Felix , saya akan mencatat secara eksplisit bahwa ini saat ini tidak diizinkan oleh tata bahasa ECMAScript 6 :

ImportDeclaration :

• import ImportClause FromClause;

• import ModuleSpecifier;

FromClause :

• dari ModuleSpecifier

ModuleSpecifier :

• StringLiteral

Sebuah ModuleSpecifier hanya bisa menjadi StringLiteral , tidak ada jenis lain dari ekspresi seperti AdditiveExpression .

Meskipun ini sebenarnya bukan impor dinamis (misalnya dalam keadaan saya, semua file yang saya impor di bawah ini akan diimpor dan digabungkan oleh webpack, tidak dipilih saat runtime), pola yang telah saya gunakan yang mungkin membantu dalam beberapa keadaan adalah :

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

const templates = {
  Template1,
  Template2
};

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

atau sebagai alternatif:

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

Saya tidak berpikir saya bisa kembali ke default semudah dengan require(), yang menimbulkan kesalahan jika saya mencoba mengimpor jalur template yang dibangun yang tidak ada.

Contoh dan perbandingan yang baik antara Requirement dan Import dapat ditemukan di sini: http://www.2ality.com/2014/09/es6-modules-final.html

Dokumentasi yang sangat baik tentang mengekspor ulang dari @iainastacio: http://exploringjs.com/es6/ch_modules.html#sec_all-exporting-styles

Saya tertarik untuk mendengar umpan balik tentang pendekatan ini :)

Ada spesifikasi baru yang disebut impor dinamis untuk modul ES. Pada dasarnya, Anda hanya menelepon import('./path/file.js')dan Anda siap berangkat. Fungsi mengembalikan janji, yang diselesaikan dengan modul jika impor berhasil.

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

Kasus penggunaan

Kasus penggunaan termasuk pengimporan komponen berbasis rute untuk React, Vue, dll. Dan kemampuan untuk memuat modul secara malas , setelah modul tersebut diperlukan selama runtime.

Informasi lebih lanjut

Berikut penjelasan tentang Google Developers .

Kompatibilitas browser (April 2020)

Menurut MDN , ini didukung oleh setiap browser utama saat ini (kecuali IE) dan caniuse.com menunjukkan 87% dukungan di seluruh pangsa pasar global. Sekali lagi tidak ada dukungan di IE atau non-chromium Edge.

Saya memahami pertanyaan yang secara khusus ditanyakan untuk ES6 importdi Node.js, tetapi yang berikut ini mungkin membantu orang lain mencari solusi yang lebih umum:

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

Perhatikan jika Anda mengimpor modul ES6 dan perlu mengakses defaultekspor, Anda perlu menggunakan salah satu dari berikut ini:

let variableName = "es6.js";

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

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

Anda juga dapat menggunakan destructuring dengan pendekatan ini yang dapat menambahkan lebih banyak sintaks yang familiar dengan impor Anda yang lain:

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

Sayangnya, jika Anda ingin mengakses defaultserta merusak, Anda perlu melakukan ini dalam beberapa langkah:

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

Anda dapat menggunakan notasi non-ES6 untuk melakukannya. inilah yang berhasil untuk saya:

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

Saya kurang suka sintaks ini, tetapi berfungsi:
alih-alih menulis

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

gunakan sintaks ini:

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

Impor dinamis () (tersedia di Chrome 63+) akan melakukan tugas Anda. Begini caranya:

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

Saya akan melakukannya seperti ini

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

panggilan dari file

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