>

다른 모듈에서 가져와 <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 가있는  화합. 그러나 라이브러리 크기에 비해 많은 오버 헤드 코드가 있습니다.


  • 답변 # 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}({});
    
    
    

관련 자료

  • 이전 php - 입력 값을 막대 차트에 전달하는 방법
  • 다음 cordova - 모바일에서 Wi-Fi 또는 데이터 연결 강도를 측정하는 방법이 있습니까?