ES6 모듈을 조건부로 Import하려면 어떻게 해야 하나요?

ES6 모듈을 조건부로 Import하려면 어떻게 해야 하나요?

다음과 같은 작업을 수행해야 합니다.

if (condition) {
    import something from 'something';
}
// ...
if (something) {
    something.doStuff();
}

컴파일되지 .SyntaxError: ... 'import' and 'export' may only appear at the top level.

는 는는그용사 i를 사용해 보았다.System.import여기 보이는 바와 같이, 하지만 어디에 있는지System출신이다.ES6 제안이 받아들여지지 않은 건가요?해당 기사에서 "programmatic API"로 링크하면 사용되지 않는 문서 페이지로 덤프됩니다.

우리는 ECMA와 함께 동적 수입 제안을 하고 있습니다.이게 3단계에요.이것은 바벨 프리셋으로도 사용할 수 있습니다.

다음은 귀하의 사례에 따라 조건부 렌더링을 수행하는 방법입니다.

if (condition) {
    import('something')
    .then((something) => {
       console.log(something.something);
    });
}

이것은 기본적으로 약속을 돌려줍니다.약속의 해결이 모듈을 가질 것으로 예상됩니다.제안에는 여러 동적 가져오기, 기본 가져오기, js 파일 가져오기 등의 다른 기능도 있습니다.동적 가져오기에 대한 자세한 내용은 여기를 참조하십시오.

원하시면 require를 사용하셔도 됩니다.이것은 조건부 요구문을 갖는 방법입니다.

let something = null;
let other = null;

if (condition) {
    something = require('something');
    other = require('something').other;
}
if (something && other) {
    something.doStuff();
    other.doOtherStuff();
}

조건부로 Import할 수는 없지만 그 반대인 조건부로 export할 수 있습니다.사용 사례에 따라 다르므로 이 방법은 적합하지 않을 수 있습니다.

다음 작업을 수행할 수 있습니다.

api.module

import mockAPI from './mockAPI'
import realAPI from './realAPI'

const exportedAPI = shouldUseMock ? mockAPI : realAPI
export default exportedAPI

apiConsumer.js

import API from './api'
...

난 그걸 mixpanel 같은 분석용 libs에 사용합니다.왜냐하면 지금은 여러 빌드나 프런트엔드를 사용할 수 없기 때문입니다.가장 우아하지는 않지만 효과가 있다.믹스패널의 경우 초기화가 필요하기 때문에 환경에 따라 몇 가지 '가정'이 있습니다.

2020년 갱신

, 이제 '어울리다'라고요.import를 들어, '키워드'키워드'import()실행 시 모듈을 로드합니다.약속하다

예:

const mymodule = await import('modulename');
const foo = mymodule.default; // Default export
const bar = mymodule.bar; // Named export

또는 다음과 같이 입력합니다.

import('modulename')
    .then(mymodule => {
        const foo = mymodule.default; // Default export
        const bar = mymodule.bar; // Named export
    });

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Dynamic_Imports 를 참조해 주세요.

지금으로선 할 수 없다는 게 답인 것 같네요

http://exploringjs.com/es6/ch_modules.html#sec_module-loader-api

가능한 한 정적 분석을 유효하게 하는 것이 목적이라고 생각합니다만, 조건부로 Import된 모듈이 그것을 깨뜨립니다.또한 언급할 가치가 있습니다. 저는 바벨을 사용하고 있습니다. 제 생각엔System모듈 로더 API가 ES6 표준이 되지 않았기 때문에 Babel에서는 지원되지 않습니다.

모드를 의 중요한 eager:

if (normalCondition) {
  // this will be included to bundle, whether you use it or not
  import(...);
}

if (process.env.SOMETHING === 'true') {
  // this will not be included to bundle, if SOMETHING is not 'true'
  import(...);
}

JS에서 조건부로 Import 및 내보내기

const value = (
    await import(`${condtion ? `./file1.js` : `./file2.js`}`)
).default

export default value

require()실행 시 일부 모듈을 Import하는 방법으로 다음과 같은 정적 분석을 수행할 수 있습니다.import스트링 리터럴 패스와 함께 사용되는 경우.이는 번들에 대한 종속성을 선택하기 위해 번들러에 의해 필요합니다.

const defaultOne = require('path/to/component').default;
const NamedOne = require('path/to/component').theName;

완전한 정적 분석을 지원하는 동적 모듈 확인을 위해 먼저 인덱서(index.js)에서 모듈을 인덱스하고 호스트 모듈에서 인덱서를 가져옵니다.

// index.js
export { default as ModuleOne } from 'path/to/module/one';
export { default as ModuleTwo } from 'path/to/module/two';
export { SomeNamedModule } from 'path/to/named/module';

// host.js
import * as indexer from 'index';
const moduleName = 'ModuleOne';
const Module = require(indexer[moduleName]);

조건부 수입도 삼진법으로 달성할 수 있다.require()s:

const logger = DEBUG ? require('dev-logger') : require('logger');

이 예는 ES Lint 글로벌 문서(https://eslint.org/docs/rules/global-require에서 인용한 것입니다.

평가에서 가리는 것은 효과가 있었고, 정적 분석기로부터 숨겼습니다.

if (typeof __CLI__ !== 'undefined') {
  eval("require('fs');")
}

즉시 호출된 기능과 require 스테이트먼트를 사용하여 이를 달성할 수 있었습니다.

const something = (() => (
  condition ? require('something') : null
))();

if(something) {
  something.doStuff();
}

이 예에서는 다이내믹 Import의 구조를 명확하게 이해할 수 있습니다.

다이내믹 모듈 Import 예시

모듈 Import 및 Export에 대한 기본 지식 보유

JavaScript 모듈 Github

Javascript 모듈 MDN

안 돼, 안 돼!

다만, 그 문제에 부딪쳐 버리면, 코드의 구성 방법에 대해 재고할 필요가 있습니다.

ES6 모듈 이전에는 Common이 있었습니다.require() 구문을 사용한 JS 모듈.이들 모듈은 "동적"이었습니다.즉, 코드의 조건에 따라 새로운 모듈을 Import할 수 있습니다.- 출처: https://bitsofco.de/what-is-tree-shaking/

ES6 이후 지원을 중단한 이유 중 하나는 컴파일이 매우 어렵거나 불가능하기 때문일 것입니다.

동적 Import에 대한 자세한 내용은 아래 링크를 참조하십시오.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#dynamic_imports

이것이 질문의 목적이 아니라는 것을 알지만, Vite를 사용할 때 mock을 사용하는 방법은 다음과 같습니다.웹 팩이나 다른 제품에서도 같은 작업을 할 수 있다고 확신합니다.

같은 인터페이스를 가진 2개의 라이브러리가 있다고 가정합니다.link.js그리고.link-mock.js그 다음에, 다음과 같이 합니다.

인마이vite.config.js

export default defineConfig(({ command, mode }) => {
    
    const cfg = {/* ... */}

    if (process.env.VITE_MOCK == 1) {
        cfg.resolve.alias["./link"] = "./link-mock"; // magic is here!
    }

    return cfg;
}

코드:

import { link } from "./link";

콘솔에서는 다음을 호출합니다.

# to use the real link.js
npm run vite

# to use the mock link-mock.js
VITE_MOCK=1 npm run vite

또는

패키지.json 스크립트

{
    ....
    "scripts": {
        "dev": "vite",        
        "dev-mock": "VITE_MOCK=1 vite"
    }
}

언급URL : https://stackoverflow.com/questions/36367532/how-can-i-conditionally-import-an-es6-module