在require.js中使用define（）

Question

我開始使用require.js學習

main.js

 require(['jquery', 'underscore', 'Module1'], function($, _, Module1) { Module1.init(); $('#output').html('Hello World!'); }); 

module1.js

 define('Module1', [], function(app) { var init = function() { alert('Hello World!') ; } return { init: init }; }); 

它正在工作，但我想知道可以更改為define('MyApp', [] function(app){}); 在module1.js ？中，然后將main.js修改為

 require(['jquery', 'underscore', 'MyApp'], function($, _, MyApp) { MyApp.init(); $('#output').html('Hello World!'); }); 

請幫忙，這樣我就可以了解有關使用require.js的更多信息。

謝謝。

已編輯

在以下答案的幫助下，我已將代碼修改為

module1.js

 define('MyApp', [], function(app) { var init = function() { alert('Hello World!') ; } return { init: init }; }); 

main.js

 require.config({ baseUrl: 'js', paths: { Module1: 'module1' } }); require(['jquery', 'underscore', 'Module1'], function($, _, MyApp) { MyApp.init(); $('#output').html('Hello World!'); }); 

不幸的是，我仍然無法正常工作，因此請給我更多建議。

Answer 1

在定義部分，您當前正在定義模塊的MyApp依賴關系，而不是模塊本身的名稱。 搜索您的requirejs.config部分，然后更改模塊的名稱。

requirejs.config({
    paths: {
        'Module1': '../somepath/module1.js', // change Module1 to MyApp
        ... 
    }
});

更改模塊名稱后，可以使用以下方法初始化模塊：

require(['MyApp'], function(MyApp) {
    MyApp.init();
});

編輯

您還需要定義其他模塊/插件。

main.js

require.config({
    baseUrl: 'js',
    paths: {
        'myApp': 'module1',
        'jquery': 'jquery.min',
        'underscore': 'underscore.min'
    }
});

require(['jquery', 'underscore', 'myApp'], function($, _, MyApp) {
    MyApp.init();
    $('#output').html('Hello World!');
});

module1.js

define(function() {
    var init = function() {
        alert('Hello World!');
    };

    return {
        init: init
    };
});

您也可以在模塊本身中定義模塊的名稱，但我不建議這樣做。 從require.js文檔中 ：

您可能會遇到一些define（）調用，其中包含模塊的名稱作為define（）的第一個參數。這些通常是由優化工具生成的。 您可以自己為模塊明確命名，但這會使模塊的可移植性降低-如果將文件移動到另一個目錄，則需要更改名稱。 通常最好避免為模塊名稱編碼，而讓優化工具以模塊名稱刻錄。 優化工具需要添加名稱，以便一個文件中可以捆綁多個模塊，以允許在瀏覽器中更快地加載。

Answer 2

在定義部分，第一個參數是模塊的名稱，第二個參數-依賴關系（字符串數組），第三個參數-構造函數，在滿足所有依賴關系后運行。 在require部分中，將依賴關系用作第一個參數，並將fabric函數用作第二個參數。 因此，在您的示例中，您將依賴項的名稱更改為MyApp，並且require部分不知道什么是依賴項Module1，因為您更改了此依賴項的名稱。

Answer 3

如果要使用與文件名不同的名稱來定義模塊，則應使用bundles config。

require.config({
    bundles: {
        module1: ["MyApp"]
    }
});

您可以將在同一文件中定義的其他模塊添加到陣列。

如果文件中只有一個模塊，則應定義它而不使用名稱，並使用路徑將模塊名稱指向文件，如enyce12的答案所示。