如何在瀏覽器中使用UMD沒有任何額外的依賴

假設我有一個UMD模塊像這樣（保存在「JS/mymodule.js」）：如何在瀏覽器中使用UMD沒有任何額外的依賴

(function (global, factory) { 
    typeof exports === 'object' && typeof module !== 'undefined' ?  factory(exports) : 
    typeof define === 'function' && define.amd ? define(['exports'], factory) : 
    (factory((global.mymodule = global.mymodule || {}))); 
}(this, function (exports) { 'use strict'; 
    function myFunction() { 
     console.log('hello world'); 
    } 
}));

我怎樣才能在使用這個模塊這樣的HTML文件？（沒有requirejs，commonjs，systemjs等...）

<!doctype html> 
<html> 
<head> 
    <title>Using MyModule</title> 
    <script src="js/mymodule.js"></script> 
</head> 
<body> 
<script> 
/* HOW TO USE myFunction from mymodule.js ??? */ 
</script> 
</body> 
</html>

非常感謝您的任何幫助。

來源

2016-07-28 Dorival

-2

amd模塊格式是爲了異步加載，所以你不能直接引用腳本標籤中的文件。如果這是用於開發，那麼你可以使用像requirejs這樣的加載器（請參閱amd細節上的this link）。如果你想要在生產模式下使用它，那麼幾種選擇是：

1）使用requirejs，但運行優化過程將捆綁amd文件 2）使用另一個縮小過程，例如webpack或將其構建到您的前端工具（grunt，gulp等）中。

恐怕就直接加載文件而言，這是不可能的，因爲amd的性質（能夠聲明對其他模塊的依賴關係）。

希望這會有所幫助。

來源

2016-07-28 13:58:03 paddybasi

恐怕你把UMD和AMD混在一起了。 –

好了，你在沒有RequireJS，CommonJS的，SystemJS的環境中運行，等

重點線是factory((global.mymodule = global.mymodule || {}))這個做了幾件事情：

如果global.mymodule truthy，那麼它等同於

global.mymodule = global.mymodule // A noop. 
factory(global.mymodule)

否則它相當於：

global.mymodule = {} 
factory(global.mymodule)

裏面的工廠：你的工廠，你應該導出你想從你的模塊將其分配給exports出口什麼。所以你通過做exports.myFunction = myFunction出口myFunction。

廠外：在外面，導出的值將在導出到全局空間的mymodule上。例如，當您想使用myFunction時，您可以使用mymodule.myFunction(...)。

如果不清楚。代碼中的工廠是以function (exports) {開頭的函數，您已正確放置myFunction。

來源

2016-07-28 16:37:34 Louis

這是最好的答案，並提供了很多隱藏和隱藏的信息。每個人似乎都希望你會使用RequireJS，SystemJS，Webpack等。 –

我試圖使用Rollup製作的捆綁UMD文件來到這個頁面。很好的問題，很好的回答... –

簡單的回答：如果你使用普通的UMD，它應該在window.mymodule（或任何名稱lib有）。

來源

2016-11-25 10:36:57

如何在瀏覽器中使用UMD沒有任何額外的依賴

回答

相關問題