Typescript編譯器 - 捆綁外部庫

Question

我一直在試圖將我的TypeScript「應用程序」捆綁到一個JavaScript文件中。

我沒有使用任何捆綁器，但TSC（使用TypeScript 2.2）。除了我自己的ts文件外，我的應用程序還使用諸如immutablejs之類的外部模塊。

我閱讀每一個可能的線程，文檔，但我找不到一種方法來將外部模塊（從node_modules）捆綁到僅使用TSC編譯/轉譯的JavaScript文件中。

向下可以找到我最近的代碼/配置樣本以及我的嘗試結果。

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與模塊=系統（TSC的src/app.ts -m系統--outfile建立/ app.js）

這種方法也沒有捆綁immutableJs但也拋出的錯誤：系統沒有定義

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

結論：這對我的項目今後能捆綁外部庫，而不需要這些流行捆紮機等的WebPack，browserify，一飲而盡，等真的很重要...

不任何人都可以幫助我？

在此先感謝，

TF！

Answer 1

剛剛注意到您的帖子和免責聲明，我是typescript-bundle的作者。您可以將ImmutableJS與以下內容捆綁在一起。

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

這個開關here

這將創建一個試圖解決從窗口對象不可改變的額外解析器有些文檔。如果您在頁面中包含依賴腳本（通過<script>標記）並且需要在您的包中引用該全局名稱（此例中爲不可變）（通常情況下是這種情況），並且您需要使用從中提取的.d.ts文件@ types/*與環境模塊名爲「不可變」）

上面的行會導致下面的resolve（）函數。

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），並允許束有效地拉動從環境的模塊（全局變量名）。

希望對您有所幫助