브라우저에서 작동하는 Typescript로 구현 된 자바 스크립트 라이브러리를 번들로 제공하는 방법, 가져 오기 및 <script> 태그가 필요합니까?

Question

Typescript에서 라이브러리 쓰기를 개발 중입니다. 이제이 라이브러리를 게시하고 싶습니다. 이건 내 웹팩 설정입니다

export default class Library { 

    public static someFunction(data: any) { 
     // Do something... 
    } 
} 

:

// Using require 
const Library = require('library'); 
Library.someFunction(); 

// Using import 
import Library from 'library'; 
Library.someFunction(); 

// Using script tag 
<script src="dist/library.js"></script> 
<script> 
    Library.someFunction(); 
</script> 

내 라이브러리의 주요 클래스는 정적 함수가있는 클래스 :

다른 사용자는 다음과 같은 방법으로 라이브러리를 포함합니다 예 :

번들 생성 브라우저에서

// Using require 
const Library1 = require('library'); 
Library1.Library.someFunction(); 
// Using import 
import * as Library2 from 'library'; 
Library2.Library.someFunction(); 

:

(function webpackUniversalModuleDefinition(root, factory) { 
    if(typeof exports === 'object' && typeof module === 'object') 
     module.exports = factory(); 
    else if(typeof define === 'function' && define.amd) 
     define("Library", [], factory); 
    else if(typeof exports === 'object') 
     exports["Library"] = factory(); 
    else 
     root["Library"] = factory(); 
})(this, function() { 
    ... 
}); 

하지만 내 모난이 프로젝트에 가져올 수있는 유일한 방법은 다음 코드를 사용

<script src="dist/library.js"></script> 
<script> 
    Library.Library.someFunction(); 
</script> 

어떻게이 문제를 해결하기 위해? 웹팩 config 항목

import {Library} from 'Library; 

export function someFunction(): void { 
    return Library.someFunction(); 
} 

그리고 변화 :

module.exports = { 
    entry: helpers.root('src/entry.ts'), 
    .... 
} 

지금 내가 가져올 수

Answer 1

OK, 나는 또 다른 파일 (entry.ts) 만 내보내기 기능을 생성하여 작업 할 수 있습니다 스크립트 태그를 사용하는 브라우저의 라이브러리 :

<script src="dist/library.js"></script> 
<script> 
    Library.someFunction(); 
</script> 

또한 Angular 2 프로젝트에서 가져올 수 있습니다.

import * as Library from 'library'; 
Library.someFunction(); 

이 생성 된 객체이다

{__esModule: true, someFunction: ƒ} 

이전에 개체에게이 방법으로 생성되었다 :

{__esModule: true, Library: ƒ} 

을