Typescript Compiler - Externe Bibliotheken bündeln

Question

Ich habe versucht, meine TypeScript "Anwendung" in eine einzige Javascript-Datei zu bündeln.

Ich verwende keine Bundler aber TSC (mit TypeScript 2.2). Neben meinen eigenen ts-Dateien verwendet meine Anwendung auch externe Module wie immutablejs.

ich alle möglichen Thread, Dokumentation lesen, aber ich eine Möglichkeit, externe Module zu bündeln nicht finden können (von node_modules) in meine kompilierte/transpiled Javascript-Datei nur TSC verwenden.

Unten finden Sie ein Beispiel meines neuesten code/configu sowie die Ergebnisse meiner Versuche.

tsconfig.json

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

app.ts - Anmerkung: ./something.ts erfolgreich gebündelt.

/// <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 #: Verwendung von TSC-Bündel (https://www.npmjs.com/package/typescript-bundle)

dieses Verfahren nicht nur nicht immutableJs sowie geworfen den Fehler Bundle: erfordern nicht definiert.

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 Verwendung mit Modulsystem = (TSC src/app.ts -m System --outfile/app.js bauen)

diese Methode nicht auch immutableJs bündeln aber auch den Fehler ausgelöst: System nicht

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 definiert ist - unter Verwendung von TSC mit module = amd (TSC src/app.ts -m amd --outfile bauen/app.js)

Diese Methode bündelt nicht nur immutableJs, sondern wirft auch den Fehler: define ist nicht definiert.

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')); 
}); 

Fazit: Es ist wirklich wichtig für die Zukunft meines Projektes externe Bibliotheken bündeln kann, ohne die Notwendigkeit dieser beliebten Bündler wie webpack, browserify, schluck, etc ...

Does kann mir jemand helfen?

Vielen Dank im Voraus,

TF!

Answer 1

Gerade bemerkte ich Ihren Beitrag, und Haftungsausschluss, ich bin der Autor von Typescript-Bundle. Sie können ImmutableJS wie folgt bündeln.

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

Ein Teil der Dokumentation über diesen Schalter here

Dies wird eine zusätzliche Resolver erstellen, die aus dem Fenster Objekt unveränderlich versucht zu lösen.Dies ist normalerweise der Fall, wenn Sie abhängige Skripte auf Ihrer Seite einschließen (über ein <script>-Tag) und den in Ihrem Paket referenzierten globalen Namen (Unveränderlich in diesem Fall) benötigen (und Sie müssen von .d.ts-Dateien Gebrauch machen, die gezogen werden) @ types/* mit dem Umgebungsmodul namens "unveränderbar")

Die obige Zeile führt zu der folgenden resolve() -Funktion.

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); 
    } 

Diese meisten Erklärungen gegen Sie arbeitet in den npm @ Typen/* Repository (angenommen UMD) und ermöglicht das Bündel, um effektiv das Modul aus der Umgebung zu ziehen (globale Variablenname) zu finden.

Hoffe, dass Sie diese