programing

ES6 모듈 가져오기에 옵션 전달

codeshow 2023. 9. 24. 13:11
반응형

ES6 모듈 가져오기에 옵션 전달

ES6 수입에 옵션을 전달할 수 있습니까?

이 내용을 어떻게 번역합니까?

var x = require('module')(someoptions);

ES6로?

이것을 단 하나로 할 수 있는 방법은 없습니다.importstatement, 호출을 허용하지 않습니다.

따라서 직접 호출하지는 않지만 기본적으로 기본 내보내기에서 commonjs가 수행하는 작업과 동일하게 수행할 수 있습니다.

// module.js
export default function(options) {
    return {
        // actual module
    }
}

// main.js
import m from 'module';
var x = m(someoptions);

또는 모나딕 약속을 지원하는 모듈 로더를 사용하면 다음과 같은 작업을 수행할 수 있습니다.

System.import('module').ap(someoptions).then(function(x) {
    …
});

새로운 연산자를 사용하면 다음과 같이 될 수 있습니다.

const promise = import('module').then(m => m(someoptions));

아니면

const x = (await import('module'))(someoptions)

그러나 동적 가져오기가 아니라 정적 가져오기를 원할 수 있습니다.

개념.

ES6를 사용한 솔루션을 소개합니다.

@Bergi의 응답과 매우 일치하며, 이것은 전달된 매개 변수가 필요한 가져오기를 만들 때 사용하는 "템플릿"입니다.class포고문들이것은 제가 작성하고 있는 동형 프레임워크에서 사용되므로 브라우저와 node.js에서 transpiler와 함께 작동할 것입니다. (저는 다음을 사용합니다).Babel와 함께Webpack):

./MyClass.js

export default (Param1, Param2) => class MyClass {
    constructor(){
        console.log( Param1 );
    }
}

./main.js

import MyClassFactory from './MyClass.js';

let MyClass = MyClassFactory('foo', 'bar');

let myInstance = new MyClass();

위의 내용이 출력됩니다.foo콘솔로

편집

실제 세계의 예

실제 예를 들어 프레임워크 내의 다른 클래스 및 인스턴스에 액세스하기 위한 네임스페이스를 전달하는 데 사용합니다.단순히 함수를 만들고 객체를 인수로 전달하는 것이기 때문에 클래스 선언과 함께 사용할 수 있습니다.

export default (UIFramework) => class MyView extends UIFramework.Type.View {
    getModels() {
        // ...
        UIFramework.Models.getModelsForView( this._models );
        // ...
    }
}

수입이 좀 더 복잡해서.automagical제 경우에는 전체적인 틀이지만 근본적으로 이런 일이 일어나고 있습니다.

// ...
getView( viewName ){
    //...
    const ViewFactory = require(viewFileLoc);
    const View = ViewFactory(this);
    return new View();
}
// ...

도움이 됐으면 좋겠네요!

es6를 사용하여 디버그 모듈을 사용하는 @Bergi의 답변을 바탕으로 다음과 같은 것이 될 것입니다.

// original
var debug = require('debug')('http');

// ES6
import * as Debug from 'debug';
const debug = Debug('http');

// Use in your code as normal
debug('Hello World!');

저는 이 스레드에서 유사한 것을 찾고 있으며 적어도 일부 경우에 대해 일종의 해결책을 제안하고 싶습니다(그러나 아래 설명 참조).

용례

로드 즉시 인스턴스화 로직을 실행하는 모듈이 있습니다.이 init 로직을 호출과 동일한 모듈 외부에서 호출하는 것을 좋아하지 않습니다.new SomeClass(p1, p2)아니면new ((p1, p2) => class SomeClass { ... p1 ... p2 ... })등).

저는 이 init 로직이 한 번 실행되는 것이 좋습니다. 일종의 단일 인스턴스화 흐름이지만 특정 매개 변수화된 컨텍스트마다 한 번씩 실행되는 것이 좋습니다.

service.js매우 기본적인 범위에 있습니다.

let context = null;                  // meanwhile i'm just leaving this as is
console.log('initialized in context ' + (context ? context : 'root'));

모듈 A는 다음을 수행합니다.

import * as S from 'service.js';     // console has now "initialized in context root"

모듈 B는 다음을 수행합니다.

import * as S from 'service.js';     // console stays unchanged! module's script runs only once

현재까지는 양호합니다. 두 모듈 모두 서비스가 가능하지만 한 번만 초기화되었습니다.

문제

모듈 C와 같이 다른 인스턴스로 실행하고 다른 컨텍스트에서 다시 한 번 자체를 시작하는 방법은 무엇입니까?

해결책?

이것이 바로 제가 생각하고 있는 것입니다. 쿼리 매개 변수를 사용하는 것입니다.이 서비스에서 우리는 다음을 추가합니다.

let context = new URL(import.meta.url).searchParams.get('context');

모듈 C는 다음을 수행합니다.

import * as S from 'service.js?context=special';

모듈이 다시 imported되고 기본 init 로직이 실행되며 콘솔에서 다음을 확인할 수 있습니다.

initialized in context special

비고: 저는 이 방법을 많이 사용하지 말고 마지막 수단으로 남겨두라고 조언하고 싶습니다. 왜죠?두 번 이상 수입된 모듈은 규칙이라기보다는 예외에 가깝기 때문에 다소 예상치 못한 행동이므로 소비자를 혼란스럽게 하거나 심지어는 자신의 '단일톤' 패러다임을 깨뜨릴 수도 있습니다.

es6 module loader를 사용할 수 있다고 생각입니다.http://babeljs.io/docs/learn-es6/

System.import("lib/math").then(function(m) {
  m(youroptionshere);
});

이 두 줄만 더하면 됩니다.

import xModule from 'module';
const x = xModule('someOptions');

디버그 모듈을 예로 든 이 질문에 대한 제 의견은 다음과 같습니다.

이 모듈의 npm 페이지에는 다음과 같은 내용이 있습니다.

var debug = require('debug')('http')

위의 행에서 문자열이 가져온 모듈로 전달되어 구성됩니다.ES6에서 동일한 작업을 수행하는 방법은 다음과 같습니다.

import { debug as Debug } from 'debug'

const debug = Debug('http');

누군가에게 도움이 되길 바랍니다.

CJS 를했습니다)를 할 때 했습니다.require() ESM () import- 가 있을 때 과 같습니다.) - Redis 를.

CJS

const RedisStore = require('connect-redis')(session);

ESM 당량

import connectRedis from 'connect-redis';
const RedisStore = connectRedis(session);

모듈 지정자에서 매개변수를 직접 전달할 수 있습니다.

import * as Lib from "./lib?foo=bar";

cf: https://flaming.codes/en/posts/es6-import-parameter 포함

언급URL : https://stackoverflow.com/questions/29923879/pass-options-to-es6-module-imports

반응형