Yabble入門 - 瀏覽器端CommonJS模塊加載

Question

是否有人熟悉Yabble或其他瀏覽器端的CommonJS加載器？

我正在嘗試使用Node.js，非常想創建可在服務器端和客戶端交互使用的Javascript模塊。這可能最終變成「因爲它很棒」而非「實際而有用」的東西。

因此，基本上，我試圖讓CommonJS的require()方法對瀏覽器端的工作，而這正是Yabble是應該做的。但我不知道從哪裏開始。我似乎無法找到除Yabble's Github readme中發現的文檔以外的任何文檔，這並沒有什麼幫助。

基本上所有我所做的就是把這個在HTML頁面中......

<script src="yabble.js"></script> 

<!-- Uses require --> 
<script> 
    require.setModuleRoot('http://localhost:8030/') 
    my_module = require('my_module') 
</script> 

但只要我叫require()功能我得到一個Synchronous require() is not supported.拋出異常。

有人可以幫我開始嗎？我應該在哪裏加載yabble.js我應該在哪裏調用require？有沒有特別的方法來運行我的Javascript模塊？

Answer 1

當加載JavaScript代碼，將需要使用require()功能到瀏覽器中，進入點代碼必須是require.run()功能。

例如，好：

<script src="yabble.js"></script> 

<script> 
    require.setModuleRoot('http://localhost:8030/') 
    require.run('my_module') // <-- Uses require() function somewhere 
</script> 

例如，壞（將得到Synchronous require() is not supported錯誤）：

<script src="yabble.js"></script> 
<script src="http://localhost:8030/my_module.js"></script> <!-- <== Use's require function somewhere --> 

---

僅供參考，這是非常漂亮Yabble如何做到這一點。這實際上將靜態分析你的JavaScript源代碼，我認爲基本上只是使用正則表達式來尋找require()方法，然後儘量拉那.js腳本從服務器，那麼它確實是.js腳本的相同的靜態分析和開始和結束。

這可能會特別令人困惑，因爲即使控制邏輯意味着程序流永遠不會到達require()函數，它實際上也會加載那些.js腳本。例如，如果你有...

if (False) { require('some_module'); } 

... Yabble將仍然裝載該模塊。

Answer 2

在瀏覽器中同步加載模塊是有問題的。的構建，如：

var x = require('something_remote.js') 

意味着瀏覽器將停止你的代碼（即塊），去獲取遠程文件，分析它，然後返回到您的出口。但是，這並不會影響單線程瀏覽器環境 - 我們會停止主要的JavaScript線程（並因此爲用戶提供頁面交互性）來提高網絡的性能。因此，瀏覽器已經演變成這種情況，以支持他們自己的時間表上的異步加載。有一些很好的討論在這裏：這可能會在這裏工作是一個需要（）實現不同步塊，獲取通過XHR文件，然後evals它

http://www.sitepen.com/blog/2010/07/16/asynchronous-commonjs-modules-for-the-browser-and-introducing-transporter/

一種模式，但似乎對所有運行用於基於文件的異步加載的瀏覽器支持/基礎結構。另外，我很好奇瀏覽器安全性的跨域原語會帶來什麼樣的影響。

因此，爲了適應瀏覽器異步加載模式，我們需要使用回調機制，如：

require("something.js", function() { // called later, after something.js has loaded! }) 

看起來RequireJS是這樣做的：

http://requirejs.org/docs/start.html

也許給一個鏡頭？

像NodeJS等JavaScript環境 - 通過從磁盤加載「本地」模塊而不是外部網絡主機 - 可以執行同步加載。

我將不勝感激從JS專家的更正:-)