ブラウザとnodejで使用できるtypescriptライブラリの作成

Question

ブラウザとnodejの両方で使用できるライブラリを作成したいと思います。引数のためにのは、これが私のライブラリであるとしましょう：

export default class MyClass { 
    public getString(): string { 
     return "Message"; 
    } 
} 

ES2015モジュールは、現在のようなブラウザでサポートされていないと私はrequirejsまたは任意の他のモジュールローダブラウザに依存したくない - I scriptタグを使用して生成された.jsファイルを含めるだけで、このライブラリを消費したいと考えています。私が望むのは、内部モジュールを使うことで達成できると感じています（私はグローバル名前空間を汚染したくありません）。 しかし、コードをnamespace/moduleに書き込むと、commonjsモジュールとしてコンパイルするのが苦労しています。

私が欲しいものを達成する正しい方法は何ですか？あるいは、私はここでタイプスクリプトとjavascriptのnoobであることを完全に取り除いていますか？

Answer 1

あなたが必要と思うのはUMDです。 tsconfig.jsonで含む

{ "compilerOptions": { "module": "umd" }, }

生成された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"; var MyClass = (function() { function MyClass() { } MyClass.prototype.getString = function() { return "Message"; }; return MyClass; }()); exports.__esModule = true; exports["default"] = MyClass; });

それはノード（CommonJS）ならびにブラウザ（CommonJS、AMD）で動作します。図書館のユーザーがscriptタグを含むようにするには、モジュールバンドラーがWebpack、BrowserifyまたはRollupのようにする必要があります。これらはグローバルエクスポートでUMD定義を生成するので、ライブラリのメインファイルのデフォルトエクスポートは、グローバルスコープ内の変数として利用できます。