如何使用RequireJS

How to use RequireJS

本文关键字：RequireJS 何使用      更新时间：2023-09-26

我以前从未使用过requireJS或类似的东西，并且发现缺乏初学者级别的教程。我开始添加以下

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

它加载require.js并告诉它也用我理解的"app.js"文件初始化自己

在app.js内部，我有以下

requirejs.config({
    baseUrl: 'common/js',
    paths: {
        "jquery": "/lib/jquery"
    }
});
define([ 'jquery' ], function( $ ){
});

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

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

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

对原始问题的回答：

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');
    });    
});

对当前问题的回答：

来自文件：

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

换句话说，浏览器在加载app.js脚本之前就加载了测试页面，因此不能在HTML页面的<script>标记中使用RequireJS。如果你使用RequireJS，你就必须在所有事情上都使用它。

您的代码在其他方面都很好，但您必须将测试代码从HTML移动到其自己的JavaScript文件（例如"test.js"）中，并从app.js:运行它

requirejs(["test.js"], function() {});
相关文章：