首页 > requirejs中在data-main加载配置信息,如何解决加载顺序问题?

requirejs中在data-main加载配置信息,如何解决加载顺序问题?

<script data-main="scripts/config" src="scripts/require.js"></script>
<script src="scripts/other.js"></script>
//config.js

require.config({
    paths: {
        foo: 'libs/foo-1.1.3'
    }
});
//other.js
require( ['foo'], function( foo ) {

});

requirejs文档有这样一句话:

注意:你在data-main中所设置的脚本是异步加载的。所以如果你在页面中配置了其它JS加载,则不能保证它们所依赖的JS已经加载成功。

因为项目里面requirejs的配置都是公用的,我就想将配置单独设在config.js里面用data-main的形式加载,但是不能在加载other.js之前保证config.js加载完,所以有时候other.js里面的依赖会加载了scripts/foo.js,而不是require.config指定的libs/foo-1.1.3。

请问这样怎么处理,一般项目requirejs配置大家都是怎么处理的?


开发调试的dev环境需要config.js,因为你尚未打包依赖。配置如下:

html<script type="text/javascript" src="dev/js/libs/require.js"></script>
<script type="text/javascript" src="dev/js/config.js"></script>
<script type="text/javascript" src="dev/js/app/index.js"></script>

配置写在require.js后。

打包后的build环境,如果打包文件index.js没有外部依赖(比如依赖dialog,dialog是远程组件),那么在打包后,你根本是不需要config.js配置文件的。即:

html<script type="text/javascript" src="build/js/libs/require.js"></script>
<script type="text/javascript" src="build/js/app/index.js"></script>

否则,打包后,仅仅只需要配置文件对远程的依赖组件进行配置,命名另一个配置文件为config-remote.js。配置如下:

javascriptrequire.config({
    baseUrl: staticHost,//这个参数设置是没有必要的
    paths: {
        'dialog': 'http://xxx/xxxx/dialog'
    }
});

有远程依赖的打包上线后的配置为:

html<script type="text/javascript" src="build/js/libs/require.js"></script>
<script type="text/javascript" src="build/js/config-remote.js"></script>
<script type="text/javascript" src="build/js/app/index.js"></script>

一般我们会在最后用Requirejs的node工具r.js打包成一个js文件。

所以,不存在加载顺序的问题。


该用户已被屏蔽,原因:发布大量推广(招聘、广告、SEO 等)方面的内容
作者可申请解除账号屏蔽,所有内容将会重新显示。

这个英文文档我也看了。
我感觉你那句话理解错了
注意:你在data-main中所设置的脚本是异步加载的。所以如果你在页面中配置了其它JS加载,则不能保证它们所依赖的JS已经加载成功。

你看它后面的解释,它是说require.config里加载libs/foo-1.1.3不一定比require早,会导致require加载时,去加载foo模块,结果没有了,就出错。foo模块是加载libs/foo-1.1.3成功后给的别名。
//config.js
require.config({

paths: {
    foo: 'libs/foo-1.1.3'
}

});

和<script src="scripts/other.js"></script>这个没有关系。

这段英文这样写是很容易让人误解为和other.js有关系。

它后面也给了答案:
把这个config这段写到html里面,不要写到js里面。


shim:{

other:['a','b']
}

如果要加载other.js之前先加载其它的文件,你可以在shim中配置依赖:


shim:{ other:['a','b'] }

这表示,other依赖a,b两个模块,你在加载other的时候会先按顺序加载a,b,成功后在加载other

【热门文章】
【热门文章】