Require.js忽略baseUrl

本教程将介绍Require.js忽略baseUrl的处理方法,这篇教程是从别的地方看到的,然后加了一些国外程序员的疑问与解答,希望能对你有所帮助,好了,下面开始学习吧。

Require.js忽略baseUrl 教程 第1张

问题描述

好的,这快把我逼疯了,也许有人能给我指个正确的方向…

我将使用最新的require.js和jQuery组合作为我的模块加载器。我使用data-main属性指向带有baseUrl的配置文件。当我尝试加载模块时,baseUrl被忽略,并且需要尝试从与main.js相同的位置加载。

/js/main.js

require.config({
 baseUrl: '/js/vendor/'
});

/path/to/page.html

<script data-main="/js/main" src="/js/vendor/require-jquery.js"></script>
<script>
require(['jquery', 'bootstrap'], function($) {
 $(function() {
  console.log('hello world!');
 });
});
</script>

预期:

加载http://localhost:3000/js/vendor/bootstrap.js和日志hello world!

实际:

尝试加载http://localhost:3000/js/bootstrap.js--失败:‘(

我尝试在Required script标记中对data-mainsrc使用相对路径,而不是绝对路径。我做的任何事情似乎都不会触发baseUrl。我是否完全遗漏了文档中的某些内容?

推荐答案

问题在于Required.js异步加载脚本(这是Requirejs后面的点),因此当您在加载Required之后立即将require()添加到脚本标记中时,此脚本将在js/main.js加载之前执行。

最简单的方法是将所有这些都包含在main.js中,或者创建一个新文件来保存此片段并从js/main加载它

/js/main.js

require.config({
 baseUrl: '/js/vendor/'
});

require(['jquery', 'bootstrap'], function($) {
 $(function() {
  console.log('hello world!');
 });
});

--OR--

/js/main.js

require.config({
 baseUrl: '/js/vendor/',
 deps: ['../boostrap']
});

/js/boostrap.js

define(['jquery', 'bootstrap'], function($) {
 $(function() {
  console.log('hello world!');
 });
});

好了关于Require.js忽略baseUrl的教程就到这里就结束了,希望趣模板源码网找到的这篇技术文章能帮助到大家,更多技术教程可以在站内搜索。