創建一個可用於瀏覽器和nodejs的打字稿庫

Question

我想創建一個可以在瀏覽器和nodejs中使用的庫。爲了便於討論，讓我們說，這是我的圖書館：

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

ES2015模塊瀏覽器不以現在支持，我不想依賴requirejs或任何其他模塊加載在瀏覽器的時候 - 我希望僅通過使用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定義，因此您的庫的主文件的默認導出將作爲全局範圍中的某個變量提供。