홈>2020-02-26 14:28

typescript - 가져 오기 및 창 사용을위한 컴파일 내보내기

다른 모듈에서 가져와 <script src=""/> 와 함께 사용할 수있는 typescript로 파일을 작성하는 방법 . 예 :

index.ts:

export class A {
   echo() {
     console.log('a');
   }
}

tsconfig.json:

{
  "compilerOptions": {
    "lib": ["es2017", "dom"],
    "target": "es5",
    "module": "commonjs",
  },
}

다음과 같이 출력을 생성하는 방법 :

class A { 
   echo() {
      console.log('a');
   }
}
if (typeof exports !== 'undefined) {
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.A = A;
// don't expose to global scope if module is imported via webpack or etc
} else if (typeof window !== 'undefined') {
    window.A = A
}

또한 컴파일러가 index.d.ts 를 생성하기를 원합니다 포함 :

export declare class A {
   echo()
}

내가 시도한 것 :

if 내부에서 내보내기를 사용할 수 없습니다 .ts 파일
변수 내보내기를 정의 할 수없고 맞춤 if를 사용할 수 없습니다.
나는 다른 module 를 시도 tsconfig.json :

또한 2 tsconfig를 생성하고 tsc를 2 번 실행할 수 있다고 생각했습니다. 하지만 내 index.ts 때 일부 내보내기 방법없이 js 파일을 생성 할 수 없습니다 export 포함 . 예 : "module"="none" 와 함께 여전히 생성합니다

Object.defineProperty(exports, "__esModule", { value: true });`

그리고 나는 얻는다

exports is not defined

atp를 보는 유일한 방법은 webpack을 추가하고 별도의 파일 main.js 를 만드는 것입니다. 수입 명세서와 window 가있는 화합. 그러나 라이브러리 크기에 비해 많은 오버 헤드 코드가 있습니다.

typescripttsconfig

답변 # 1

iife 로 롤업을 시도 할 수 있습니다 모드 :

$ npm i rollup typescript rollup-plugin-typescript rollup-plugin-uglify
$ ./node_modules/.bin/rollup -c rollup.config.js

rollup.config.js:

import typescript from 'rollup-plugin-typescript';
import { uglify } from "rollup-plugin-uglify";
export default {
    input: './index.ts',
    output: {file: './browser.js', format: 'iife', name: 'myBundle'},
    plugins: [
        typescript(),
        uglify()
    ]
}

index.ts:

// index.ts
export class A {
  echo() {
    console.log("a");
  }
}

출력browser.js:

var myBundle=function(o){"use strict";var n=(t.prototype.echo=function(){console.log("a")},t);function t(){}return o.A=n,o}({});

Python2.net

typescript - 가져 오기 및 창 사용을위한 컴파일 내보내기

관련 자료