RequireJS路徑配置

Question

我的開發配置（在 「的index.html」 文件）RequireJS是：

<script src="require-2.1.5.min.js"></script> 
<script> 
    require.config({ 
     baseUrl: 'js', 
     paths: { 
      angular: 'libraries/angular-1.1.5.min', 
      jquery: 'libraries/jquery-2.0.0.min', 
      underscore: 'libraries/underscore-1.4.4.min', 
      ... 
      zeroclipboard: 'plugins/zeroclipboard-1.0.7.min', 
      tablesorter: 'plugins/jquery.tablesorter-2.9.1.min', 
      ... 
     }, 
     shim: { 
      'angular': { 
       exports: 'angular' 
      }, 
      'underscore': { 
       exports: '_' 
      } 
     }, 
     packages: [ 
      { 
       name: 'index', 
       location: 'app/index', 
       main: 'main' 
      } 
     ] 
    }); 

    require(['index']); 
</script> 

但在生產我只有2個圖書館連接起來的文件和插件：

js/libraries.js // all jQuery, AngularJS, RequireJS, Underscore and other libraries concatenated 
js/plugins.js // all plugins (already an AMD modules, no need for "shim" config) concatenated 

那麼，我現在如何編寫我的配置「路徑」呢？我沒有任何'libraries/angular-1.1.5.min.js'和其他路徑。

我的解決辦法是寫：

paths: { 
     angular: 'libraries', 
     underscore: 'libraries' 
    } 

我AngularJS和下劃線到'libraries.js'文件關聯，一切都運行完美。 （不需要jQuery和所有插件 - 它們已經是AMD模塊）。

但是，這是一個正確的方式來寫路徑？我的解決方案似乎有點骯髒的解決方法，而不是最佳實踐解決方案。

我r.js建立過程：

({ 
baseUrl: 'scripts', 
paths: { 
    jquery: 'jquery-2.0.0.min', 
    ... 
    tablesorter: 'jquery.tablesorter-2.0.5.min', 
    zeroclipboard: 'zeroclipboard-1.0.7.min' 
}, 
name: 'foo/main', 
exclude: [ 
    'angular', 
    'jquery', 
    ... 
    'tablesorter', 
    'zeroclipboard' 
], 
optimize: 'uglify', 
out: 'production/js/foo.js' 
}) 

UPD 1：

我想要什麼：

www.mysite.com/about.html: 

<script src="js/libraries.js"></script><-- jQuery (already AMD), AngularJS (not AMD), RequireJS, Underscore (not AMD) and other libraries already here, only 1 http request needed //--> 
<script src="js/plugins.js"></script><-- all AMD //--> 
<script> 
    require.config({ 
     baseUrl: 'js', 
     paths: { 
      angular: WHAT I NEED TO WRITE HERE?, 
      underscore: WHAT I NEED TO WRITE HERE? 
     }, 
     shim: { 
      'angular': { 
       exports: 'angular' 
      }, 
      'underscore': { 
       exports: '_' 
      } 
     }, 
     packages: [ 
      { 
       name: 'about', 
       location: 'js', 
       main: 'about' 
      } 
     ] 
    }); 

    require(['about']); // will load "js/about.js" 
</script> 

UPD 2：

好吧，這清楚「prio rity「，所以，我不需要第一個和第二個«script»標籤（但是我需要將」require.js「與」libraries.js「分開） - RequireJS會自動加載它們。但是在「libraries.js」文件中，非AMD庫應該做什麼？

AngularJS和UnderscoreJS是非AMD模塊，這就是爲什麼我必須使用「墊片」，對吧？但爲了使「墊片」工作，我還需要使用「路徑」，因此「墊片」可以定位墊片模塊，對吧？但我仍然只有1個文件 - 「libraries.js」，我不能將它寫入「路徑」選項中...只是真的卡住了...

Answer 1

爲了預先加載通用庫代碼，您應該使用優先級配置選項。 你可以把這樣的事情在你的foo/main.js文件

require.config({ 
    priority: ["libraries", "plugins"] 
}); 

然後你的build文件看起來是這樣的。 庫和插件文件應該包含一個定義所有依賴性的定義語句，這些依賴性被認爲是通用/下載一次。

({ 
    baseUrl: 'scripts', 
    paths: { 
     jquery: 'jquery-2.0.0.min', 
     ... 
     tablesorter: 'jquery.tablesorter-2.0.5.min', 
     zeroclipboard: 'zeroclipboard-1.0.7.min' 
    }, 
    modules: [ 
     { 
      name: 'foo/main' 
      excludes: ... 
     }, 
     { 
      name: 'libraries' 
     }, 
     { 
      name: 'plugins' 
     } 
    ], 
    optimize: 'uglify', 
    out: 'production/js/foo.js' 
}) 

Answer 2

您應該在兩種環境中使用相同的配置。你擁有的這個配置應該在外部文件中。當你使用r.j對其進行優化時，所有模塊已經在單個文件中，所以RequireJS只會在不加載的情況下使用它們。看起來像你需要調整你的構建過程。

結賬我最近blog post關於它。