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 미니어는 이치에 맞지 않습니다.
요약: 처음부터 그렇게 해서는 안 됩니다.
- 너
export
필요한 것만 내보냅니다. - 너
import
필요한 곳이면 어디든 상관없습니다. - 출력 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 {}
어쨌든, 이것을 시도하지 않을 수 없었다;)
global
discope의 로 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
'programing' 카테고리의 다른 글
Ajax 호출 성공 후 Slik js 재초기화 (0) | 2023.04.04 |
---|---|
어레이 필드에 고유한 값 또는 MongoDB 내의 다른 어레이가 포함되어 있는지 확인하는 방법 (0) | 2023.04.04 |
워드프레스 범주에서 루프 (0) | 2023.04.04 |
archive.php 페이지에서 사용자 지정 카테고리 이름 또는 ID 가져오기 Wordpress (0) | 2023.03.25 |
Angular를 위한 사용 사례JS 및 JQuery (0) | 2023.03.25 |