如何使用RequireJS

Question

我以前从未使用过requireJS或类似的东西，而且我发现缺少初级水平的教程。我开始时添加以下内容

<script src="/common/lib/require.js" data-main="/common/js/app"></script>

加载require.js并告诉它也用＆＃34; app.js＆＃34;来初始化自己。文件，据我所知。

app.js内部我有以下

requirejs.config({
    baseUrl: 'common/js',
    paths: {
        "jquery": "/lib/jquery"
    }
});

define([ 'jquery' ], function( $ ){

});

在测试页面内，我试图看看它是否成功加载了jquery

<script>
requirejs(['jquery'], function( $ ) {
    console.log( $ ) ;
});
</script>

这会导致Web服务器根本找不到jquery文件。它似乎在寻找/common/js/jquery.js，尽管app.js中的路径定义很明显我做错了。

Answer 1

回答original question：

RequireJS的要点是你可以模块化你的应用程序。这基本上意味着您可以在使用它们的相同位置定义所需的模块。

define([ '/common/lib/jquery-2.1.4.min.js' ], function( $ ){

});

在上面的代码中，您告诉RequireJS加载jQuery，并在加载时，使用基本jQuery函数作为回调的第一个参数执行回调函数。 jQuery现在只能在该函数中使用 。因此，您必须合并现在拥有的两个文件：

define([ '/common/lib/jquery-2.1.4.min.js' ], function( $ ){
    $(function(){
        console.log('working');
    });    
});

回答当前的问题：

来自documentation：

  

注意：为您的data-main模块生成的脚本标记require.js包含async属性。这意味着您不能假设数据主脚本的加载和执行将在稍后在同一页面中引用的其他脚本之前完成。

换句话说，浏览器在加载app.js脚本之前加载测试页面，因此您不能在HTML页面中的<script>标记内使用RequireJS。如果您使用RequireJS，则必须将其用于所有内容。

您的代码不错，但您必须将测试代码从HTML移动到自己的JavaScript文件（例如“test.js”）并从app.js运行：

requirejs(["test.js"], function() {});