D3在requireJs中引用的问题

最近想要优化项目，踩到了d3的坑，正常的方式引用竟然会爆出d3 is undefined的问题。

过程

正常引用方式：

    require.config({
        paths: {
            "jquery": "../lib/js/jquery-1.11.1.min",
            "bootstrap": "../lib/js/bootstrap.min",
            "d3": "../lib/js/d3.v3.min",

            ...

d3  undefined 报错

查了文档之后 stackoverflow文档链接
需要创建一个全局的d3变量

define(['d3'], function (d3) {
    //Use global d3
    console.log(d3);
});

OR

requirejs.config({
    shim: {
        d3: {
            exports: 'd3'
        }
    }
});

然而这种方式并没有解决问题，依然undefined。文档中还有一个不被推荐的方案，然而用了之后就不会报错了，我现在用的就是这种

结论

    require(['jquery', 'd3'], function ($, _d3) {
        d3 = _d3;
    });

在加载完成之后，对d3重新赋值给d3，虽然不被推荐，但好歹是成功了。后面再究其根本。

requireJs的使用方法

1 . 在页面中引用

<script type="text/javascript" src="../lib/js/require.js" data-main="../src/main"></script>

正常引入requireJs文件，在data-main中指定require的入口文件（配置文件）

2 . 在配置文件中引用需要异步加载的js文件

require.config({
    baseUrl:"../lib/js/",  // 指定根目录
    paths: {
        "jquery": "jquery-1.11.1.min",
        "bootstrap": "bootstrap.min",
        "d3": "d3.v3.min",
    }

    shim:{  // 加载非规范的模块
        'bootstrap': {
            deps: ['jquery'],  // 加载依赖
            exports: "bootstrap"
        },
    }
})

3 . 加载完成后的回调函数


    require(['jquery','d3', 'bootstrap'], function(){
        console.log("加载完成");
    });

基本上所有的配置就是这样

但是有一个尴尬的地方是，require只能对js文件异步加载，不会阻塞文件加载，方便代码管理，方便查看依赖。
但是并不会对文件进行压缩，优化程度有限，所以…我的项目使用之后并没有多大的性能提升。
想要优化还得用webpack进行压缩打包吧。

参考文档：

阮一峰博客
 require官方文档

D3在requireJs中引用的问题

过程

结论

requireJs的使用方法

猜你喜欢