2015-04-03 52 views
1

考慮到下面的簡化場景,我如何才能最好地構建我的可重用組件,以便它可以被其他應用程序正確使用,例如foo.js可以打印23?創建一個可重複使用的RequireJs庫


重用組件:

/home.js 
/main.js 
/stuff 
    foo.js 

-

/home.js: 
define([], function() { return 23; } 

/stuff/foo.js: 
define(['home'], function (home) { console.log(home); } // prints 23 

消費應用:

/app.js 
/main.js 
/home.js 
/views 
    template.html 
/bower_components 
    /myReusableComponent 
    /home.js 
    /main.js 
    /stuff 
     foo.js 

-

/home.js: 
define([], function() { return 17; } 

/bower_components/myReusableComponent/home.js: 
define([], function() { return 23; } 

/bower_components/myReusableComponent/stuff/foo.js: 
define(['home'], function (home) { console.log(home); } // now prints 17 

是否有消費應用requirejs配置,在/ myReusableComponent爲 '/ myReusableComponent' 設置的任何模塊的baseUrl?無論如何,我的可重用組件不應該有/需要訪問消費者應用程序的根級別。

我查看了r.js優化器,但它只輸出一堆define('stuff/foo', [], function()) ...如果消費者應用程序也有stuff/foo.js會發生什麼情況?

到目前爲止,我發現的唯一解決方案是強制在我的所有模塊中使用相對路徑:define(['../home'], function (home) { console.log(home); }但我希望有更好的方法來解決這個問題。

所有反饋都非常感謝!

+0

我其實認爲在這種情況下相對路徑是最好的選擇。您可能可以使用packages:http://requirejs.org/docs/api.html#packages做些事情,但我認爲這會給用戶帶來適當配置的負擔,這可能會造成問題。 – CodingWithSpike 2015-04-03 03:09:36

回答

0

如果你想產生一個在不同應用程序中可用的庫,那麼當你的庫的一個模塊引用另一個時,你應該使用相對路徑,因爲這使得使用你的庫的人更可能會無需修改RequireJS配置即可完成此操作。

明智地使用mappaths可以消除一些衝突。然而,最終,有些情況在無法訪問未優化的模塊的情況下無法解決(或者至少不能根據用戶需要解決),因此您應該通過優化軟件包提供加載它的可能性作爲未優化模塊的集合。

相關問題