如何在Require.js優化期間使用本地文件，但在運行時使用CDN託管版本？

我的頁面包含幾個作爲獨立AMD模塊存在的組件。 Require.js優化器將這些組件中的每個組件都轉換爲單個文件。由於其中幾個組件共享依賴關係（例如jQuery和d3），因此優化程序paths配置爲這些依賴關係使用CDN URL，而不是將它們捆綁到優化文件中。如何在Require.js優化期間使用本地文件，但在運行時使用CDN託管版本？

這裏是棘手的地方。我爲Ractive.js編寫了一個module loader plugin，名爲rvc.js，它允許我包含在HTML文件中定義的Ractive組件。（是的，我所要求的關於如何使用我自己的圖書館的幫助。）

這工作得很好 - 正如你所期望像這樣的代碼被優化：

define(function (require) { 
    var ChartView = require('rvc!views/Chart'); 
    var view = new ChartView({ el: 'chart' }); 
});

因爲Ractive使用幾個的組件，它應該從CDN如jQuery和d3提供服務。但是它在優化過程中被rvc.js使用，這意味着優化器paths配置的Ractive條目不能指向CDN--它必須指向一個本地文件。

有沒有辦法告訴Require.js在優化期間使用本地文件，但在運行時從CDN加載？

來源

2014-02-25 Rich Harris

設置VAR像fileToUse = amILocal（）？「lib.js」：「lib.min.js」;並傳遞fileToUse來取代硬編碼文字。 – dandavis

問題在於無論給予'fileToUse'哪個值給優化器，這都是a）優化期間使用的文件，以及b）優化程序在構建中包含（或嘗試）的文件。因此，如果'fileToUse'是本地的，本地文件在優化期間被rvc.js使用，但它也被捆綁;如果它很遠，則優化失敗。 –

所以這裏是我最終解決的解決方案。這感覺有點缺憾，但它的工作原理：

存根裝載機和庫你不想捆綁
添加onBuildWrite功能重寫依賴於庫模塊，使他們認爲他們是要求完全是另一回事 - 在這種情況下Ractive_RUNTIME
添加到您的運行AMD配置的paths對象的條目，使Ractive_RUNTIME指向CDN

我的優化器的配置現在看起來是這樣的：

{ 
    baseUrl: 'path/to/js/', 
    out: 'build/js/app.js', 
    name: 'app', 
    optimize: 'none', 

    paths: { 
    'amd-loader': 'loaders/amd-loader', 
    'rvc': 'loaders/rvc', 
    'Ractive': 'lib/Ractive' 
    }, 

    stubModules: [ 'amd-loader', 'rvc', 'Ractive' ], 

    onBuildWrite: function (name, path, contents) { 
    if (contents === "define('Ractive',{});") { 
     // this is the stub module, we can kill it 
     return ''; 
    } 

    // otherwise all references to `Ractive` need replacing 
    return contents.replace(/['"]Ractive['"]/g, '"Ractive_RUNTIME"'); 
    } 
}

同時，加載由優化創建的app.js文件中的腳本具有指向CDN一個配置項：

require.config({ 
    context: uniqueContext, 
    baseUrl: baseUrl, 

    paths: { 
    'amd-loader': 'loaders/amd-loader', 
    'rvc': 'loaders/rvc', 
    'Ractive': 'lib/Ractive', 
    'Ractive_RUNTIME': 'http://cdn.ractivejs.org/releases/0.3.9/Ractive.min' 
    } 
});

來源

2014-03-03 19:37:02

如何在Require.js優化期間使用本地文件，但在運行時使用CDN託管版本？

回答

相關問題