Question

我有一个像这样的结构的现有项目，就像普通的常见网页一样：

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/nanoscroller.min.js"></script>
<script src="js/bootbox.min.js"></script>
<script src="js/myscript1.js"></script>
<script src="js/tinymce.min.js"></script>
<script>
$(function(){
     // my inline script
     // some code which should run after myscript1.js
});
</script>
<script src="myscript2.js"></script>

现在，我尝试用requirejs来做。

<script type="text/javascript">
var require = {
    baseUrl: 'js',
    paths: {
        'jquery'       : ['jquery.min'],
        'bootstrap'    : ['bootstrap.min'],
        'nanoscroller' : ['nanoscroller.min'],
        'bootbox'      : ['bootbox.min'],
        'myscript1'    : ['myscript1'],
        'tinymce'      : ['tinymce.min']
    },
    shim: {
        'bootstrap'    : ['jquery'],
        'nanoscroller' : ['jquery'],
        'bootbox'      : ['bootstrap']
    }
}
</script>
<script src="require.js"></script>
<script>
require(['myscript1','tinymce'],function(){
    $(function(){
        // my inline script
        // some code which should run after myscript1.js
    });
}
</script>
<script src="myscript2.js"></script>

在myscript1.js

中

define(['jquery','bootstrap','nanoscroller','bootbox'],function(){
      //all the myscript1 original code here
}

在myscript2.js

中

require(['myscript1','tinymce'],function(){
      //all the myscript2 original code here
}

嗯，这只是举例说明结构。在我的真实项目中，有更多的插件和myscript。

问题是当我运行页面时，有时一切都在运行，而且大多数时候我的一些脚本代码甚至都没有执行。特别是内联脚本。最大的麻烦是，很多时候我在控制台窗口中看不到任何错误。根本没有出现错误的迹象。无法追查。我也尝试使用requirejs.onError，但它似乎没有任何帮助。

当它显示错误时，通常是jquery没有加载问题。我非常好奇，因为我已经添加了jquery作为所有这些的要求。但是，如果没有加载jquery并且执行代码怎么办呢？

是因为我的结构错了吗？我是否真的需要重写整个项目才能使它与requirejs一起使用？如果您知道如何操作，请向我提供代码示例以便于理解。

谢谢。

将现有Web项目转换为requirejs

0 个答案: