TypeScript Deep Dive
  • README
  • 시작하기
    • 왜 타입스크립트인가
  • 자바스크립트
    • 비교 연산자
    • 참조 연산자
    • Null vs. Undefined
    • this
    • 클로저
    • Number
    • Truthy
  • 미래의 자바스크립트
    • 클래스
      • 즉시실행함수
    • 화살표 함수
    • 나머지 연산자
    • let
    • const
    • 비구조화 할당
    • 전개 연산자
    • for...of
    • 이터레이터
    • 템플릿 리터럴
    • 프로미스
    • 제네레이터
    • Async Await
  • 프로젝트
    • 컴파일러 제어
      • tsconfig.json
      • 파일 경로 지정
    • 선언
    • 모듈화
      • 파일을 이용한 모듈화
      • globals.d.ts
    • 네임스페이스
    • 동적 표현식 가져오기
  • Node.js 시작하기
  • Browser 시작하기
  • 타입스크립트 타입 시스템
    • 자바스크립트 마이그레이션 가이드
    • @types
    • 주변 선언
      • 파일 선언
      • 변수
    • 인터페이스
    • 열거형(Enums)
    • lib.d.ts
    • 함수
    • 콜러블(Callable)
    • 타입 표명(Type Assertion)
    • 신선도(Freshness)
    • 타입 가드
    • 리터럴(Literal)
    • 읽기 전용(readonly)
    • 제네릭
    • 타입 인터페이스
    • 타입 호환성
    • Never 타입
    • 구별된 유니온
    • 인덱스 서명(Index Signature)
    • 타입 이동하기
    • 예외 처리
    • 믹스인(Mixin)
  • JSX
    • React
    • Non React JSX
  • Options
    • noImplicitAny
    • strictNullChecks
  • 타입스크립트 에러
    • 에러 메세지
    • 공통 에러
  • NPM
  • 테스트
    • Jest
    • Cypress
  • Tools
    • Prettier
    • Husky
    • ESLint
    • Changelog
  • 팁
    • 문자열 Enums
    • 타입 단언
    • 상태 저장 함수
    • 커링
    • 제네릭 타입 예시
    • 객체 타입 설정
    • 유용한 클래스
    • Import / Export
    • 속성 Setters
    • outFile 주의사항
    • 제이쿼리 팁
    • 정적 생성자
    • 싱글톤 패턴
    • 함수 파라미터
    • 토글 생성
    • Import 여러개 하기
    • 배열 생성
    • 생성자에서 타입정의
  • 스타일 가이드
  • 타입스크립트 컴파일러 구조
    • Program
    • AST
      • TIP: Visit Children
      • TIP: SyntaxKind enum
      • Trivia
    • Scanner
    • Parser
      • Parser Functions
    • Binder
      • Binder Functions
      • Binder Declarations
      • Binder Container
      • Binder SymbolTable
      • Binder Error Reporting
    • Checker
      • Checker Diagnostics
      • Checker Error Reporting
    • Emitter
      • Emitter Functions
      • Emitter SourceMaps
    • Contributing
Powered by GitBook
On this page

Was this helpful?

  1. 프로젝트

동적 표현식 가져오기

Previous네임스페이스NextNode.js 시작하기

Last updated 5 years ago

Was this helpful?

동적 표현식 가져오기는 ECMAScript의 새로운 기능으로 프로그램의 임의의 지점에서 사용자가 비동기적으로 모듈을 요청할 수 있도록 합니다. TC39 자바스크립트 위원회는 3단계에 있는 제안서가 있으며 그것은 .

그 대신에, webpack 번들러의 특징중 하나는 을 허용하고 당신이 번들한 덩어리로 분할하여 나중에 비동기로 다운로드 할 수 있습니다. 다음 사례의 경우는 최소 부트스트랩 번들을 먼저 제공하고 나중에 추가기능을 비동기로 로드할 수 있습니다.

그것은 자연스러운 생각입니다 (만약 우리가 웹팩을 외부에서 구축한다면) 을 번들 덩어리를 자동으로 생성 하고 JS 최종 번들을 자동으로 코드 분할합니다. 그러나 그것은 우리가 작업하는 **tsconfig.json 형태** 에 의존하기 때문에 쉬운일이 아닙니다.

웹팩은 코드 분할중에 두개 이상의 유사한 기술을 사용할 수 있습니다. import() (ECMAScript에서 우선적으로 제안) 그리고 require.ensure() (오래된 웹팩 스펙) 그리고 예상한대로 타입스크립트는 무엇이든 import()문을 남겨둔 상태 로 트랜스파일 합니다.

타입스크립트 2.4 + 웹팩을 구성하는 방법을 한번 살펴보겠습니다.

나는 moment 라이브러리를 lazy 로드 하고 싶지만 코드 스플리팅에도 관심이 있습니다. 즉 필요할때만 로드되는 별도의 JS 청크에 moment 라이브러리가 있음을 의미합니다.

import(/* webpackChunkName: "momentjs" */ 'moment')
    .then(moment => {
        // lazyModule has all of the proper types, autocomplete works,
        // type checking works, code references work \o/
        const time = moment().format()
        console.log('TypeScript >= 2.4.0 Dynamic Import Expression:')
        console.log(time)
    })
    .catch(err => {
        console.log('Failed to load moment', err)
    })

Here is the tsconfig.json:

{
    "compilerOptions": {
        "target": "es5",
        "module": "esnext",
        "lib": ["dom", "es5", "scripthost", "es2015.promise"],
        "jsx": "react",
        "declaration": false,
        "sourceMap": true,
        "outDir": "./dist/js",
        "strict": true,
        "moduleResolution": "node",
        "typeRoots": ["./node_modules/@types"],
        "types": ["node", "react", "react-dom"]
    }
}

중요한 메모:

  • "module": "esnext" 을 사용하면 타입스크립트는 웹팩 코드 스플리팅에 입력 할 import()를 흉내내서 생성합니다.

자세한 내용을 보려면 여기를 클릭하십시요. .

당신이 볼 수 있는 전체 예제

자바스크립트에 import()를 제안
코드 스플리팅
타입스크립트 2.4 동적 표현식 가져오기
webpack 2의 동적 표현식 가져오기와 코드 스플리팅 통합 그리고 타입스크립트 2.4
여기를 클릭