将传统的js include转换为require JS

Question

我想将下面的 html 代码转换为 requireJS。在此代码中，我尝试使用 JQuery Querybuilder 组件，但是我遇到了问题，因为一些 js 文件比 requireJS

旧

<!DOCTYPE html>
<html>
<head>
    <title>jQuery QueryBuilder</title>
    <script src="scripts/dot/doT.js"></script>
    <script src="js/libs/jquery/jquery-3.4.1.js" type="text/javascript"></script>
    <script src="scripts/jquery-extendext.js" type="text/javascript"></script>
    <script src="scripts/bootstrap.min.js" type="text/javascript"></script>
    <script src="scripts/query-builder.js" type="text/javascript"></script>
</head>
<body>
    <div id="builder"></div>
    <script>
        var myFilters = [{
            id: 'column1',
            label: 'Column 1',
            type: 'string'
        }, {
            id: 'column2',
            label: 'Column 2',
            type: 'double'
        }, {
            id: 'column3',
            label: 'Column 3',
            type: 'boolean'
        }];
        $('#builder').queryBuilder({
            filters: myFilters
        });
    </script>
</body>
</html>

Answer 1

我能够解决这个问题，问题主要在于 'dot/doT' 调用查询-builder.js 文件

下面是适合我的代码：

<!DOCTYPE html>

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <script src="js/libs/require/require.js"  type="text/javascript"></script>
        <script src="require_config.js" type="text/javascript"></script>
    </head>
    <body>
        <div id="elmId">TODO write content</div>
        <div id="builder">TODO write content</div>
    </body>
    <script>
        require(['dot/doT','jquery','jquery-extendext','bootstrap','query-builder'], function (dot,$) {
            console.log("loaded jquery!!!",$("#elmId"));
            
            var myFilters = [{
            id: 'column1',
            label: 'Column 1',
            type: 'string'
        }, {
            id: 'column2',
            label: 'Column 2',
            type: 'double'
        }, {
            id: 'column3',
            label: 'Column 3',
            type: 'boolean'
        }];
        $('#builder').queryBuilder({
            filters: myFilters
        });
    });
    </script>
</html>

require_config.js 文件包含以下代码：

requirejs.config({

  paths: {
      jquery: 'js/libs/jquery/jquery-3.4.1.min',
      dot:'scripts/dot',
      'jquery-extendext': 'scripts/jquery-extendext',
      bootstrap:'scripts/bootstrap.min',
      'query-builder': 'scripts/query-builder.min'
  },
  shim: {
        jquery: {
            exports: ['jQuery', '$']
        },
        //https://requirejs.org/docs/api.html#config
        bootstrap : { "deps" :['jquery'] }
    }
});

希望这对以后的人有所帮助。

将传统的js include转换为require JS

Converting traditional js include to require JS

requirejs