require.js 的初级使用 require-config 配置的小坑

require.js 的初级使用

官方文档

初接触 require.js
错误逻辑

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

<div class="bb">bbb</div>
<script>
require(["jquery"],function($){
	console.log($(".bb").html());	
})
</script>

/js/require/require-config.js的内容如下

requirejs.config({
    baseUrl: '/js/',
    paths: {
        jquery: 'jquery-1.7.2.min'
    }
});

报错 jquery.js 找不到

原因

先加载 /js/require/require-2.3.6.js
然后异步去加载 /js/require/require-config.js
当页面执行到
require([“jquery”],function($){
console.log($(".bb").html());
})
时
require-config.js 还未加载完成
导致require-config配置未加载完成

这时候去require([“jquery”]) 默认加载的是 /js/require/jquery.js

正确写法

1.把当前页面需要用的 require的 都写在 /js/require/require-config.js这个文件里面
示例

requirejs.config({
    baseUrl: '/js/',
    paths: {
        jquery: 'jquery-1.7.2.min'
    }
});
require(["jquery"],function($){
	console.log($(".bb").html());	
})

2.把 /js/require/require-config.js 单独在 html页面加载
示例

<script src="/js/require/require-2.3.6.js"></script>
<script src="/js/require/require-config"></script>

<div class="bb">bbb</div>
<script>
require(["jquery"],function($){
	console.log($(".bb").html());	
})
</script>

3 将jquery文件放到 /js/require/ 下
代码示例

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

<div class="bb">bbb</div>
<script>
require(["jquery-1.7.2.min"],function(){
	console.log(jQuery(".bb").html());	
})
	
</script>