programing

es6 - 에일리어스 없이 명명된 모든 모듈을 Import합니다.

stoneblock 2023. 4. 4. 20:51

es6 - 에일리어스 없이 명명된 모든 모듈을 Import합니다.

아래와 같이 에일리어스를 가진 모든 명명된 모듈을 Import할 수 있는 것으로 알고 있습니다.

import * as name from "module-name";

참고 자료: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

사실 모듈을 A.js.로 재수출했는데 B.js. PFB에서도 동일한 모듈을 상속받았습니다.2단계 상속이므로 명명된 모듈을 Import하는 것은 큰 문제가 되지 않습니다.단, 이것을 5레벨의 상속(A -> B -> C -> D -> E)으로 할 때는 모든 파일 내의 모든 이름 있는 모듈을 Import하고 (재)내보내기를 모두 수행해야 합니다.이렇게 하는 대신

  • 휠을 반복하지 않고 모든 명명된 모듈의 범위를 모든 레벨로 복사할 수 있는 다른 방법이 있습니까(가져오기 및 내보내기)?
  • 이 설계의 배경에는 Opps 개념을 따르도록 하고 동일한 모듈의 재배열을 피하기 위한 것이 있습니다.

A.js

import React from 'react';
import I18n from 'i18n-js';
import m1 from 'module1';
import m2 from 'module2';

export default class A extends React.Component {}

export {React, I18n, m1, m2)

B.J.S.

import BaseComponent from './A';
import {React, I18n, m1, m2) from './A;

export default class B extends A {}

다음과 같이 에일리어스 없이 명명된 모듈을 모두 Import할 수 있는 방법이 있습니까?import {*} from './A'(B.Js의 2번째가 아닌)

JavaScript 솔루션:

import * as exports from 'foo';
Object.entries(exports).forEach(([name, exported]) => window[name] = exported);

주의: Import된 래퍼 오브젝트는 그대로 유지됩니다.


Node.js 솔루션:

Object.entries(require('foo')).forEach(([name, exported]) => global[name] = exported);

(B.js의 2nd가 아닌 '.A'에서 {*} Import와 같이 에일리어스 없이 명명된 모듈을 모두 Import할 수 있는 방법이 있습니까?

아니요.

또한 다음 URL에서 설명한 바와 같이 최종 js 파일에 "줄 수"를 저장하는 것보다 더 많이 재내보내기 위한 전체 아이디어는 다음과 같습니다.

왜냐하면 Import할 때마다 두 줄을 최종 js 파일에 넣기 때문입니다.다음보다 큰 Import 행이 10개 있는 경우 최종 js에 20개 행이 추가됩니다.생산을 생각하고 있을 때는 비용이 너무 많이 듭니다.

JS 미니어는 이치에 맞지 않습니다.

요약: 처음부터 그렇게 해서는 안 됩니다.

  1. export필요한 것만 내보냅니다.
  2. import필요한 곳이면 어디든 상관없습니다.
  3. 출력 JS 파일 크기를 최적화하려면 JS 미니어를 사용합니다.

여기 제가 한 미친 실험이 있습니다. 효과가 있지만, 제가 완전히 이해하지 못하는 방식으로 아마 위험할 것입니다.왜 우리가 이걸 하지 않는지 누가 설명해 줄 수 있나요?

var lodash = require("lodash");

function $localizeAll(name) {
    return `eval("var " + Object.getOwnPropertyNames(${name}).reduce((code, prop)=>{
        if (/^[a-zA-Z$_][a-zA-Z$_0-9]*$/.test(prop)) {
            return code.concat(\`\${prop} = ${name}["\${prop}"]\n\`);
        } else {
            console.warn("did not import '" + prop + "'");
            return code;
        }
    }, []).join(", ")+";")`
}

// this will make all exports from lodash available
eval($localizeAll("lodash"));

console.log(add(indexOf([1,2,6,7,12], 6), 5)); // => 7

2개의 레벨로 표시되기 때문에 조금 복잡하지만 기본적으로 범위 내의 지정된 이름을 가진 객체의 모든 속성을 반복하고 ID가 될 수 있는 이름을 가진 모든 속성을 해당 이름의 ID에 바인딩합니다.

var length = lodash["length"]
  , name = lodash["name"]
  , arguments = lodash["arguments"]
  , caller = lodash["caller"]
  , prototype = lodash["prototype"]
  , templateSettings = lodash["templateSettings"]
  , after = lodash["after"]
  , ary = lodash["ary"]
  , assign = lodash["assign"]
  , assignIn = lodash["assignIn"]
  , assignInWith = lodash["assignInWith"]
  , assignWith = lodash["assignWith"]
  , at = lodash["at"]
  , before = lodash["before"]
  , bind = lodash["bind"]
  , bindAll = lodash["bindAll"]
  , bindKey = lodash["bindKey"]
  //...
  , upperCase = lodash["upperCase"]
  , upperFirst = lodash["upperFirst"]
  , each = lodash["each"]
  , eachRight = lodash["eachRight"]
  , first = lodash["first"]
  , VERSION = lodash["VERSION"]
  , _ = lodash["_"]
  ;

에는 이것이 왜 생각인지에 몇 그림자는 그림자입니다).arguments를 참조해 주세요.

이것을 다음과 같이 사용할 수 있습니다(상기 내용은 좋지 않을 수 있습니다).

B.J.S.

import BaseComponent, * as extras from './A';

eval($localizeAll("extras"));

export default class B extends BaseComponent {}

어쨌든, 이것을 시도하지 않을 수 없었다;)

globaldiscope의 로 node.discope의 합니다.window수입하다

util 모듈에서 모든 기호를 가져오려면:

import * as util from "./util";
util.importAll(util, global);

사용중.js:

/**
 * Takes all functions/objects from |sourceScope|
 * and adds them to |targetScope|.
 */
function importAll(sourceScope, targetScope) {
  for (let name in sourceScope) {
    targetScope[name] = sourceScope[name];
  }
}

다음과 같은 많은 .또한 다음과 같은 많은 기능들이 있습니다.assert()etc:언어의 아직 없습니다.etc: etc: etc: etc: etc: etc: etc: etc: etc: etc: etc: etc: etc: etc: ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,하지만 다른 사람들이 말하듯이, 이것을 적게 사용하세요.

현재로선 이를 위한 깔끔한 방법이 없다.단, 다음과 같이 문제를 해결할 수 있습니다.

1) 에일리어스의 정의

import * as foo from "foo"

2) 모든 모듈의 기입

import {a,b,c,d,...} from "foo"

언급URL : https://stackoverflow.com/questions/34573779/es6-import-all-named-module-without-alias