DataTables + RequireJS：无法读取未定义的属性“默认值”答案

【问题标题】：DataTables+RequireJS: Cannot read property 'defaults' of undefinedDataTables + RequireJS：无法读取未定义的属性“默认值”
【发布时间】：2015-11-16 09:55:48
【问题描述】：

我已经下载了DataTables的完整包及其所有模块，因为无法通过CDN URL访问它：

https://www.datatables.net/download/（已选择所有选项）

我正在尝试让它与RequireJS 一起运行，整个DataTables 包都使用相同的依赖系统，所以它应该不会失败。

JSFiddle（为 JSFiddle 编辑）：http://jsfiddle.net/42ucpwee/1/

我的配置导致这个错误：

datatables.js:93165 Uncaught TypeError: Cannot read property 'defaults' of undefined

datatables.js:93161-93171:

var DataTable = $.fn.dataTable;


/* Set the defaults for DataTables initialisation */
$.extend( true, DataTable.defaults, {
    dom:
        "<'row'<'col-sm-6'l><'col-sm-6'f>>" +
        "<'row'<'col-sm-12'tr>>" +
        "<'row'<'col-sm-5'i><'col-sm-7'p>>",
    renderer: 'bootstrap'
} );

这个错误的原因是什么，是我遗漏了什么还是我的配置有误？

script.js:

define(['jquery','datatables.net'], function($) {
    $('#example').DataTable();
});

main.js：

requirejs.config({
    baseUrl: "lib",
    paths: {
        'jquery': '//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min',
        'bootstrap': '//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min',
        'datatables.net': 'DataTables/datatables',
        'script': '../js/script'
    },
    shim: {
        'bootstrap': {
            deps: ['jquery']
        },
        'jquery': {
            exports: '$'
        },
        'datatables.net': {
            deps: ['bootstrap','jquery']
        },
        'script': {
            deps: ['jquery','datatables.net']
        }
    }
});
requirejs(['script']);

index.html:

<html>
<head>
    <link rel="stylesheet" href="https://cdn.datatables.net/s/bs-3.3.5/jszip-2.5.0,pdfmake-0.1.18,dt-1.10.10,af-2.1.0,b-1.1.0,b-colvis-1.1.0,b-flash-1.1.0,b-html5-1.1.0,b-print-1.1.0,cr-1.3.0,fc-3.2.0,fh-3.1.0,kt-2.1.0,r-2.0.0,rr-1.1.0,sc-1.4.0,se-1.1.0/datatables.min.css" type="text/css" />
    <script type="text/javascript" src="js/require.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
</head>
<body>
    <table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

【问题讨论】：

标签： javascript jquery requirejs datatables datatables-1.10

【解决方案1】：

一个可接受的答案是只下载单个模块（而不是单个文件选项）并使用以下脚本，这似乎比一次包含所有模块引起的问题更少：

http://jsfiddle.net/42ucpwee/2/

requirejs.config({
    appDir: ".",
    baseUrl: "js",
    paths: {
        'jquery': '//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min',
        'bootstrap': '//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min',
        'datatables' : 'jquery.dataTables.min',
        'datatables-bootstrap' : 'dataTables.bootstrap',
    },
    shim : {
        'jquery' : {
            exports : 'jquery'
        },
        'bootstrap' : {
            deps : [ 'jquery' ],
            exports : 'Bootstrap'
        },
        'datatables' : [ 'jquery' ],
        'datatables-bootstrap' : [ 'datatables' ],
    }
});
require([
    'jquery',
    'datatables-bootstrap'
], function ($) {
    $('#example').DataTable();
});

【讨论】：