如何在html中加载requirejs自定义模块

Question

在thinkphp的index.html中，加载了requireJS,requireJS加载了自定义模块。请问如何在前台HTML页面中调用自定义模块里的属性或方法。

index.html

<script src="/Public/vendor/require/require.js" data-main="/Public/main.js"></script>
<a id="a">按钮</a>
<script type="text/javascript">//这里输出common is not defined
    console.log(common);
</script>

main.js

requirejs.config({
    baseUrl:'/Public/',
    paths:{
        'jquery':'vendor/jquery/jquery',
        'common':'myjs/common'
    },
     shim: {
         'jquery':{
             'exports':"jQuery"
         }
    }
});

require(['jquery','common'],function($,common){
    $('#a').click(function() {
        console.log(common.username);
    });
});

common.js

define(['jquery'],function($){
    return ({
    username:'AAA'
    });
});

——————————————————————————————————————————
请问如何在index.html中调用自定义模块common.js里的属性或者方法？
我是想把一些类似ajax的基本操作，封装到common.js中，在不同的前台页面里，调用common.js中的各种方法使用。
现在好像只能在main.js中加载common模块，然后在整个require方法中去实现业务逻辑，这样感觉main.js会越来越臃肿。

请问实现这样的效果，还有什么更好的办法吗？

Answer 1

不是只能在main.js里调用，是只能在define方法里调用，你可以在index.html里写：

<script type="text/javascript">//这里输出common is not defined
    require(['common'],function(common){
        console.log(common);
    });
</script>

Answer 2

那这两个方法那个更实用呢