Converting traditional js include to require JS

I want to convert below html code to requireJS. In this code, I am trying to use JQuery Querybuilder component, however I am getting issues because some of js files are older than 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>

Solution

I was able to figure this out, issue was mainly with 'dot/doT' call in query-builder.js file

Below is the code that works for me:

<!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 file contains below code:

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

Hope this helps someone in future.