Typescriptコンパイラ - バンドルする外部ライブラリ

Question

TypeScriptの "アプリケーション"を1つのjavascriptファイルにバンドルしようとしています。

私はTSC（TypeScript 2.2を使用）以外のバンドラを使用していません。私の独自のTSファイルとは別に、私のアプリケーションはimmutablejsのような外部モジュールも使用しています。

私はすべての可能なスレッドのドキュメントを読んでいますが、私は外部モジュールを（node_modulesから）私のコンパイル/トランスビルドされたjavascriptファイルにTSCのみを使ってバンドルする方法を見つけることができません。

私の最新のコード/ 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＃：このメソッドはimmutableJsバンドルならびにエラーをスローしていないだけでなく、TSC-バンドル（https://www.npmjs.com/package/typescript-bundle）

使用：はに定義されていない必要。

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システムは/ app.jsを構築--outfile）

この方法はまた、immutableJsをバンドルしないが使用して、モジュールとTSC = AMD（TSCのsrc/app.ts -m AMD --outfile構築/ app.js）

0 - システムが定義されていない

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：また、エラーがスローさ

このメソッドは、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、がぶ飲み、などの人気bundlersを必要とせずに外部のライブラリをバンドルすることができるため非常に重要です ...

ん誰でも私を助けることができますか？

ありがとうございます。

TF！

Answer 1

私はあなたの投稿に気づき、免責事項、私はtypescript-bundleの作者です。 ImmutableJSを以下のものにバンドルすることができます。

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

このスイッチに関するいくつかのドキュメントhere

これは、ウィンドウオブジェクトから不変解決しようとする追加のリゾルバを作成します。あなたのページに（<script>タグを介して）従属スクリプトを組み込み、あなたのバンドルで参照されているグローバル名（この場合は不変）が必要な場合（そして、あなたが引っ張った.d.tsファイルを利用する必要がある場合） @種類/ *と "immutable"という名前の周囲モジュール）

上記の結果は、次の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); 
    } 

これは、NPMの@タイプ/ *リポジトリに見つける最も宣言不利に働く（UMDを仮定）とのバンドルが効果的に環境（グローバル変数名）からモジュールを引くことができます。

はあなたがこの便利