node.js의 ES6 변수 가져 오기 이름?

ES6 가져 오기를 사용하는 동안 변수 이름을 제공하는 모듈로 무언가를 가져올 수 있습니까?

즉, 구성에 제공된 값에 따라 런타임에 일부 모듈을 가져오고 싶습니다.

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

import성명서가 아닙니다 . import그리고 export그들은 정적 분석 가능한 것을 그들이 런타임 정보에 의존하지 수 같은 방식으로 정의된다.

loader API (polyfill)를 찾고 있지만 사양 상태에 대해 약간 불분명합니다.

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

Felix의 답변 외에도 ECMAScript 6 문법 에서 현재 허용되지 않는다는 점을 분명히 밝힙니다 .

ImportDeclaration :

• import ImportClause FromClause;

• import ModuleSpecifier;

FromClause :

• 에서 ModuleSpecifier

ModuleSpecifier :

• StringLiteral

ModuleSpecifier은 단지가 될 수 StringLiteral , 같은 표현이 아닌 다른 종류의 AdditiveExpression .

이것은 실제로 동적 가져 오기는 아니지만 (예 : 내 상황에서 아래에서 가져 오는 모든 파일은 런타임에 선택되지 않고 웹팩에 의해 가져 와서 번들로 제공됩니다) 일부 상황에서 도움이 될 수있는 패턴은 다음과 같습니다. :

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

const templates = {
  Template1,
  Template2
};

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

또는 대안으로 :

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

require()존재하지 않는 구성된 템플릿 경로를 가져 오려고하면 오류가 발생하는을 사용 하여 쉽게 기본값으로 돌아갈 수 있다고 생각 하지 않습니다.

require와 import 간의 좋은 예와 비교는 여기에서 찾을 수 있습니다 : http://www.2ality.com/2014/09/es6-modules-final.html

@iainastacio에서 다시 내보내기에 대한 우수한 문서 : http://exploringjs.com/es6/ch_modules.html#sec_all-exporting-styles

이 접근법에 대한 피드백을 듣고 싶습니다. :)

ES 모듈에 대한 동적 가져 오기 라는 새로운 사양이 있습니다. 기본적으로 전화 만하면 import('./path/file.js')됩니다. 함수는 가져 오기가 성공하면 모듈로 해결되는 promise를 반환합니다.

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

사용 사례

사용 사례에는 React, Vue 등에 대한 경로 기반 구성 요소 가져 오기 및 런타임 중에 필요한 경우 모듈 을 지연로드 하는 기능이 포함 됩니다.

추가 정보

다음은 Google 개발자 에 대한 설명입니다 .

브라우저 호환성 (2020 년 4 월)

MDN 에 따르면 현재 모든 주요 브라우저 (IE 제외)에서 지원되며 caniuse.com 은 전 세계 시장 점유율에서 87 %의 지원을 보여줍니다. IE 또는 non-chromium Edge에서는 다시 지원되지 않습니다.

importNode.js의 ES6 에 대해 구체적으로 묻는 질문을 이해 하지만 다음은 더 일반적인 솔루션을 찾는 다른 사람들에게 도움이 될 수 있습니다.

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

ES6 모듈을 가져 오는 중이고default 내보내기 에 액세스 해야하는 경우 다음 중 하나를 사용해야합니다.

let variableName = "es6.js";

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

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

다른 가져 오기에 더 많은 구문 친숙성을 추가 할 수있는이 접근 방식으로 구조 해제를 사용할 수도 있습니다.

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

안타깝게도 액세스 default및 구조 해제를 원할 경우 여러 단계로이 작업을 수행해야합니다.

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

비 ES6 표기법을 사용하면됩니다. 이것은 나를 위해 일한 것입니다.

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

덜이 같은 문법 I,하지만 작동 :
대신 작성

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

다음 구문을 사용하십시오.

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

동적 import () (Chrome 63 이상에서 사용 가능)가 작업을 수행합니다. 방법은 다음과 같습니다.

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

나는 이렇게 할 것이다

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

파일에서 호출

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