Typescript 컴파일러 - 외부 라이브러리 번들

Question

TypeScript "응용 프로그램"을 하나의 JavaScript 파일로 묶어려고합니다.

저는 TSC (TypeScript 2.2 사용) 이외의 어떤 번들러를 사용하지 않습니다. 내 자신의 TS 파일을 제외하고, 내 응용 프로그램은 또한 immutablejs 같은 외부 모듈을 사용합니다.

가능한 모든 스레드를 읽었지만 TSC 만 사용하여 컴파일 된/transpiled javascript 파일에 외부 모듈 (node_modules에서)을 묶는 방법을 찾을 수 없습니다.

아래에서 내 최신 코드/configu 샘플과 내 시도 결과를 찾을 수 있습니다.

tsconfig.json

{ 
    "compilerOptions": { 
     "target":   "es5", 
     "module":   "system", 
     "removeComments": true, 
     "sourceMap":  true, 
     "allowJs":   true 
    } 
} 

app.ts - 참고 : ./something.ts가 성공적으로 번들로 제공됩니다.

/// <reference path="../node_modules/immutable/dist/immutable.d.ts" /> 

import * as something from "./something"; 
import * as Immutable from "immutable"; 

console.log(something.test); 

const map1 = Immutable.Map({ a: 1, b: '2', c: 'cu' }); 
console.log(map1.get('a')) 

1 # : TSC-번들 (https://www.npmjs.com/package/typescript-bundle)

만 immutableJs뿐만 아니라, 발생 오류를 번들하지 않습니다하지이 방법을 사용하여 : 이 필요가를 정의되어 있지 않습니다.

var dragonfly = (function() { 
    var main = null; 
    var modules = { 
     "require": { 
      factory: undefined, 
      dependencies: [], 
      exports: function (args, callback) { return require(args, callback); }, 
      resolved: true 
     } 
    }; 
    function define(id, dependencies, factory) { 
     return main = modules[id] = { 
      dependencies: dependencies, 
      factory: factory, 
      exports: {}, 
      resolved: false 
     }; 
    } 
    function resolve(definition) { 
     if (definition.resolved === true) 
      return; 
     definition.resolved = true; 
     var dependencies = definition.dependencies.map(function (id) { 
      return (id === "exports") 
       ? definition.exports 
       : (function() { 
        if(modules[id] !== undefined) { 
        resolve(modules[id]); 
        return modules[id].exports; 
        } else return require(id) 
       })(); 
     }); 
     definition.factory.apply(null, dependencies); 
    } 
    function collect() { 
     Object.keys(modules).map(function (key) { return modules[key]; }).forEach(resolve); 
     return (main !== null) 
     ? main.exports 
     : undefined 
    } 

    define("something", ["require", "exports"], function (require, exports) { 
     "use strict"; 
     Object.defineProperty(exports, "__esModule", { value: true }); 
     exports.test = "oie"; 
    }); 
    define("app", ["require", "exports", "something", "immutable"], function (require, exports, something, Immutable) { 
     "use strict"; 
     Object.defineProperty(exports, "__esModule", { value: true }); 
     console.log(something.test); 
     var map1 = Immutable.Map({ a: 1, b: '2', c: 'cu' }); 
     console.log(map1.get('a')); 
    }); 
    //# sourceMappingURL=app.js.map 
    return collect(); 
})(); 

# 2 - 모듈 TSC를 사용하여 = 시스템이 방법은 또한 immutableJs 번들하지 않는

(TSC의 SRC /가/app.js를 구축 --outfile -m 시스템을 app.ts)하지만, 또한 오류 발생 : 시스템

System.register("something", [], function (exports_1, context_1) { 
    "use strict"; 
    var __moduleName = context_1 && context_1.id; 
    var test; 
    return { 
     setters: [], 
     execute: function() { 
      exports_1("test", test = "oie"); 
     } 
    }; 
}); 
/// <reference path="../node_modules/immutable/dist/immutable.d.ts" /> 
System.register("app", ["something", "immutable"], function (exports_2, context_2) { 
    "use strict"; 
    var __moduleName = context_2 && context_2.id; 
    var something, Immutable, map1; 
    return { 
     setters: [ 
      function (something_1) { 
       something = something_1; 
      }, 
      function (Immutable_1) { 
       Immutable = Immutable_1; 
      } 
     ], 
     execute: function() {/// <reference path="../node_modules/immutable/dist/immutable.d.ts" /> 
      console.log(something.test); 
      map1 = Immutable.Map({ a: 1, b: '2', c: 'cu' }); 
      console.log(map1.get('a')); 
     } 
    }; 
}); 

# 3

을 정의되지 않은 - 모듈 TSC를 사용하여 = AMD

0 (TSC SRC/app.ts -m AMD --outfile/app.js 구축)

이 메소드는 immutableJs를 번들하지 않을뿐만 아니라 오류를 발생시키지 않습니다. define이 정의되지 않았습니다.

define("something", ["require", "exports"], function (require, exports) { 
    "use strict"; 
    exports.__esModule = true; 
    exports.test = "oie"; 
}); 
/// <reference path="../node_modules/immutable/dist/immutable.d.ts" /> 
define("app", ["require", "exports", "something", "immutable"], function (require, exports, something, Immutable) { 
    "use strict"; 
    exports.__esModule = true; 
    console.log(something.test); 
    var map1 = Immutable.Map({ a: 1, b: '2', c: 'cu' }); 
    console.log(map1.get('a')); 
}); 

결론 : 그것은 내 프로젝트의 미래 등등 웹팩, browserify, 꿀꺽, 이러한 인기 bundlers의 필요없이 외부 라이브러리를 번들 할 수 정말 중요 ...

합니까 누구든지 나를 도울 수 있니?

미리 감사드립니다.

TF!

Answer 1

방금 ​​게시물에 주목하여 면책 조항을 작성했습니다. typescript-bundle의 저자입니다. ImmutableJS는 다음과 같이 묶을 수 있습니다.

tsc-bundle --project ./tsconfig.json --importAs immutable=Immutable 

window 객체에서 불변의 해결을 시도 추가 해결을 만듭니다이 스위치 here

이에 대한 몇 가지 문서.이는 일반적으로 페이지에 종속 스크립트 (<script> 태그 사용)가 포함되어 있고 번들에서 참조하는 전역 이름 (이 경우 변경할 수 없음)이 필요하며 (에서 가져온 .d.ts 파일을 사용해야하는 경우) @ 유형/* "immutable"이라는 주변 모듈 사용)

위의 행은 다음과 같은 resolve() 함수를 발생시킵니다.

이 당신이 NPM의 @ 유형에 발견 할 것이다 가장 선언에 대해 작동

function resolve(definition) { 
     if (definition.resolved === true) 
      return; 
     definition.resolved = true; 
     var dependencies = definition.dependencies.map(function (id) { 
      return (id === "exports") 
       ? definition.exports 
       : (function() { 
        if(modules[id] !== undefined) { 
        resolve(modules[id]); 
        return modules[id].exports; 
        } else if(id === "immutable") { 
        return window["Immutable"]; 
        } else { 
        try { 
         return require(id); 
        } catch(e) { 
         throw Error("module '" + id + "' not found."); 
        } 
        } 
       })(); 
     }); 
     definition.factory.apply(null, dependencies); 
    } 

은/* 저장소 (UMD 가정) 및 번들 효과적으로 환경에서 모듈 (전역 변수 이름)을 당겨 할 수 있습니다.

당신이 도움이