エクスポート活字体クラス（browserifyまたはWebPACKの）

Question

I持って活字体で次の例のクラス：

{ 
    "compilerOptions": { 
     "module": "umd", 
     "target": "es5", 
     "noImplicitAny": true, 
     "removeComments": false, 
     "preserveConstEnums": true, 
     "suppressImplicitAnyIndexErrors": true 
    }, 
    "files" :[ 
     "example.ts" 
    ] 
} 

次tsconfig.jsonを使用

export default class Greeter { 
    greeting: string; 

    constructor(message: string) { 
     this.greeting = message; 
    } 

    greet() { 
     return "Hello, " + this.greeting; 
    } 
} 

transpilerを使用して、次のJavaScriptを生成します。

(function (factory) { 
    if (typeof module === "object" && typeof module.exports === "object") { 
     var v = factory(require, exports); 
     if (v !== undefined) module.exports = v; 
    } 
    else if (typeof define === "function" && define.amd) { 
     define(["require", "exports"], factory); 
    } 
})(function (require, exports) { 
    "use strict"; 
    Object.defineProperty(exports, "__esModule", { value: true }); 
    var Greeter = (function() { 
     function Greeter(message) { 
      this.greeting = message; 
     } 
     Greeter.prototype.greet = function() { 
      return "Hello, " + this.greeting; 
     }; 
     return Greeter; 
    }()); 
    exports.Greeter = Greeter; 
}); 

私はたくさんのをテストしています異なるモジュール（umd、commonjs）を持つものではありませんが、同じコードで同時にNode.jsとBrowserでクラスが動作するようにすることはできません（requireはAngular、React、Windowオブジェクトで動作しますブラウザの）。私のような何かを達成しようとしています：

// With Node.js, Angular, React etc 

let Greeter = require("Greeter"); 
let instanceGreeter = new Greeter("My Name"); 
instanceGreeter.greet(); 

// And that works in the browser too with the same codebase 

var instanceGreeter = new Greeter("My Browser Name"); 
instanceGreeter.greet(); 

を、これは任意の標準に従うことによって可能ですか（モジュールオプションを使用していない）私は自分のコードでそれをエクスポートする必要がありますか？

Answer 1

多くの調査の後、私は自分のニーズにマッチするものを見つけることができませんでした。私は2つのJavaScriptファイルを生成する2つのtsconfig.jsonファイル（モジュールやウィンドウなど、すべてのタイプのファイル）を作成しました。 1つは、Webpack、Browserifyなどのようなバンドラを使用せずにブラウザで使用するためのもので、2番目のものはインポート、必要な作業などが必要です。

この方法の欠点は、あなたは、ウィンドウなどのバージョンにコンパイルしたい場合は、あなたのクラスに輸出のデフォルトのキーワードを削除する必要がありますのみすべてのディレクトリ上のtsconfig.jsonファイルが存在することができたよう

// If willing to export to window remove `export default` e.g 
// class Greeter { 
// instead of 
// export default class Greeter { 
export default class Greeter { 
    greeting: string; 

    constructor(message: string) { 
     this.greeting = message; 
    } 

    greet() { 
     return "Hello, " + this.greeting; 
    } 
} 

、私はビルド - を作成しました2つのフォルダ、すなわちcommonjsとウィンドウの指示フォルダ。

build-instructions 
├───commonjs 
| └── tsconfig.json 
├───window 
    └── tsconfig.json 

（必要とするモジュールのために働く、輸入など）commonjs/tsconfig.jsonは、次のようになります。

{ 
    "compilerOptions": { 
     "module": "commonjs", 
     "target": "es5", 
     "outDir":"../../build" 
    }, 
    "files" :[ 
     "../yourtypescriptfile.ts" 
    ] 
} 

と、（ブラウザで動作します）ウィンドウは次のようになります。NPMコマンドを実行すると

{ 
    "compilerOptions": { 
     "module": "none", 
     "target": "es5", 
     "outFile":"../../build/yourlibrary.window.js" 
    }, 
    "files" :[ 
     "../yourtypescriptfile.ts" 
    ] 
} 

# For CommonJS 
tsc --p ./path-to-folder/commonjs 

# For Window 
tsc --p ./path-to-folder/window 

このプロジェクトのルートフォルダには、次のような種類のJavaScriptファイルが作成されます。

var Greeter = (function() { 
    function Greeter(message) { 
     this.greeting = message; 
    } 
    Greeter.prototype.greet = function() { 
     return "Hello, " + this.greeting; 
    }; 
    return Greeter; 
}()); 

とモジュール用（あなたはUMD、commonjsまたはAMDのような使用モジュールに応じて）：：

define(["require", "exports"], function (require, exports) { 
    "use strict"; 
    Object.defineProperty(exports, "__esModule", { value: true }); 
    // If willing to export to window remove `export default` e.g 
    // class Greeter { 
    // instead of 
    // export default class Greeter { 
    var Greeter = (function() { 
     function Greeter(message) { 
      this.greeting = message; 
     } 
     Greeter.prototype.greet = function() { 
      return "Hello, " + this.greeting; 
     }; 
     return Greeter; 
    }()); 
    exports.default = Greeter; 
}); 

のような結果にブラウザ用タイプ、