$(...).DataTable 在使用 Laravel Mix 时不是函数

Posted 2023-03-14

技术标签:

【中文标题】$(...).DataTable 在使用 Laravel Mix 时不是函数【英文标题】：$(...).DataTable is not a function when using Laravel Mix 【发布时间】：2018-04-02 19:25:19 【问题描述】：

我很难使用 Laravel Mix 和 DataTables。我遇到的问题是，当我编译我的 .js 文件等时，每次我访问将执行 jQuery 数据表的页面时，都会引发以下错误：

错误是：

jQuery.Deferred exception: $(...).DataTable is not a function TypeError: $(...).DataTable is not a function
Uncaught TypeError: $(...).DataTable is not a function

据我了解，$(...).DataTable 不是全局变量，但我如何确保它可以“在全局范围内”/在我的应用程序中访问？

以下是我的设置：

app.js

import jquery from 'jquery/dist/jquery.slim'
import 'bootstrap-sass'
import 'datatables.net';
import dt from 'datatables.net-bs';

window.$ = window.jQuery = jquery;

webpack.mix.js

mix
    .js('resources/assets/admin/js/app.js', 'js/')
    .extract([
        'jquery', 'bootstrap-sass', 'datatables.net', 'datatables.net-bs'
    ])
    .autoload(
        jquery: ['$', 'window.jQuery', 'jQuery', 'jquery'],
        DataTable : 'datatables.net-bs'
    )

任何想法都将受到高度赞赏。

【问题讨论】：

检查datatables.net-bs npm page。 var $ = require( 'jquery' ); require( 'datatables.net-bs' )( window, $ ) 同样适用于 datatables.net。来自npm pagevar $ = require( 'jquery' ); require( 'datatables.net' )( window, $ ); 我之前尝试过，但它导致了这个问题：未捕获的 ReferenceError：$ 未定义。没有办法导入吗？更新答案，import $ from 'jquery'; 或者，在你的情况下，import $ from 'jquery-slim'。我错过了那个苗条的版本 【参考方案1】：

编辑：虽然此答案在发布和接受时有效，但看起来情况不再如此。对于寻找更新解决方案的任何人，其他答案都是最新的

Yevgeniy Afanasyev

Alexander Gallego L.

Artistan

因为这是公认的答案，所以我将添加新的解决方案，但这应该归功于提供更新答案的人

window.$ = window.jQuery = require( 'jquery' );

require( 'datatables.net' );
require( 'datatables.net-bs' );

原答案

查看 datatables.net 和 datatables.net-bs 的 npmjs 页面

它们应该像这样初始化

var $ = require( 'jquery' );
require( 'datatables.net' )( window, $ );
require( 'datatables.net-bs' )( window, $ );

我们可以转换成这个

var $     = require( 'jquery' );
var dt    = require( 'datatables.net' )
var dt_bs = require( 'datatables.net-bs' )

// in this call we're attaching Datatables as a jQuery plugin
// without this step $().DataTable is undefined
dt( window, $ )
// we need to do the same step for the datatables bootstrap plugin
dt_bs( window, $ )

但如果你真的想使用import .. from ..，请查看MDN import documentation

import $ from 'jquery/dist/jquery.slim';
import * as dt from 'datatables.net';
import * as dt_bs from 'datatables.net-bs';

dt( window, $ )
dt_bs( window, $ )

【讨论】：

第一种方法出现错误：未捕获的类型错误：无法设置未定义的属性“$” @YevgeniyAfanasyev - 我最近的软件包也有同样的问题，有什么解决方案吗？我发布了我对这个问题的回答。这不起作用。该模块包含一个自调用函数，它返回的只是模块附加到它尝试自动解析的$.fn 的数据表对象。所以他们的文档与他们的代码不匹配。这个自调用函数requires jquery 本身，但是，如果我编辑数据表模块，并将require('jquery') 分配给窗口对象，DataTables 加载的jquery 模块不是我的主加载的模块的实例应用程序.js。与=== 相比，它们看起来不相等。 @AlexBarker 我已经更新了window.$ = window.jQuery = ...的答案【参考方案2】：

最新的 Laravel Mix...

不要在 webpack 中调用所需的数据表包，leave off the (...)

这将加载 bootstrap、jquery、数据表和许多数据表插件，没有任何问题...

window._ = require( 'lodash' );;
window.$ = window.jQuery = require( 'jquery' );;
window.Popper = require('popper.js').default;

// bootstrap
require('bootstrap');

// bootstrap datatables...
require( 'jszip' );
require( 'datatables.net-bs4' );
require( 'datatables.net-buttons-bs4' );
require( 'datatables.net-buttons/js/buttons.colVis.js' );
require( 'datatables.net-buttons/js/buttons.flash.js' );
require( 'datatables.net-buttons/js/buttons.html5.js' );
require( 'datatables.net-buttons/js/buttons.print.js' );
require( 'datatables.net-autofill-bs4' );
require( 'datatables.net-colreorder-bs4' );
require( 'datatables.net-fixedcolumns-bs4' );
require( 'datatables.net-fixedheader-bs4' );
require( 'datatables.net-responsive-bs4' );
require( 'datatables.net-rowreorder-bs4' );
require( 'datatables.net-scroller-bs4' );
require( 'datatables.net-select-bs4' );
// bs4 no js - require direct component
// styling only packages for bs4
require( 'datatables.net-keytable' );
require( 'datatables.net-rowgroup' );
// pdfMake
var pdfMake = require('pdfmake/build/pdfmake.js');
var pdfFonts = require('pdfmake/build/vfs_fonts.js');
pdfMake.vfs = pdfFonts.pdfMake.vfs;

不需要 webpack.mix.js 中的其他代码

.extract([
    'jquery', 'bootstrap-sass', 'datatables.net', 'datatables.net-bs'
])
.autoload(
    jquery: ['$', 'window.jQuery', 'jQuery', 'jquery'],
    DataTable : 'datatables.net-bs'
)

【讨论】：

伙计，你拯救了我的一天。适用于 Laravel-Mix 4.0.7、Datatables 1.10.19 和 Datatables Buttons 1.5.6。你拯救了我的一天。谢谢【参考方案3】：

解决方案（1）

这对我来说是这样的：

require('datatables.net');
require('datatables.net-bs4');

解决方案（2）

下面是它之前的样子，它导致了一个错误：“$(…).DataTable is not a function”：

var a = require('../../../node_modules/datatables.net/js/jquery.dataTables.js');
var b = require('../../../node_modules/datatables.net-bs4/js/dataTables.bootstrap4.js');

这就是我修复它的方法，但显然推荐最佳解决方案

window.$.fn.DataTable = a;
window.$.fn.DataTable = b;

如果您知道魔术背后的原因，请发表评论。问题是“为什么指向 js 文件的直接链接与指向包的链接的工作方式不同？”

【讨论】：

【参考方案4】：

对于我在引导程序中加载的所有功能：

try 
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');

require('bootstrap');

window.JSZip = require("jszip");
//require( "pdfmake" );
require( 'datatables.net-bs4' );
require( 'datatables.net-buttons-bs4' );
require( 'datatables.net-buttons/js/buttons.colVis.js' );
require( 'datatables.net-buttons/js/buttons.flash.js' );
require( 'datatables.net-buttons/js/buttons.html5.js' );
require( 'datatables.net-buttons/js/buttons.print.js' );
require( 'datatables.net-colreorder-bs4' );
require( 'datatables.net-fixedcolumns-bs4' );
require( 'datatables.net-responsive-bs4' );
require( 'datatables.net-rowreorder-bs4' );
require( 'datatables.net-scroller-bs4' );
require( 'datatables.net-keytable' );
require( 'datatables.net-rowgroup' );

 catch (e)

我使用 Laravel 5.7 和 npm 6.4.1

【讨论】：

【参考方案5】：

我只想添加到 Artistan 的答案（我无法评论）。我能够使用他的代码显示 CSV、复制和 PDF 按钮，但不是 Excel 按钮，直到我更改了这一行