使用 webpack 为 laravel 7 安装数据表

Question

我正在尝试使用 npm 和 webpack 为 laravel 7 安装 jquery 数据表。

我是这样通过cmd安装的，

npm install --save datatables.net-bs4

此代码运行成功，没有错误，我添加了此 resources/js/bootstrap.js

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

    require('bootstrap');
    require('datatables.net-bs4');
} catch (e) {}

在 resources/sass/app.scss

中添加了这个

@import '~datatables.net-bs4/css/dataTables.bootstrap4.css';

然后在终端中运行 npm run dev。但是当我调用数据表时，我得到了。

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

我在视图中调用数据表是这样的。

<script>
$(document).ready(function () {
  $('table').DataTable();
});
 </script>

所有 Npm 命令运行成功，没有任何错误。如果有人能提供帮助，那就太好了

Answer 1

终于找到答案了。好像我加require('datatables.net-bs4');的地方错了。而不是 resources/js/bootstrap.js 我将它添加到 resources\assets\js\app.js 文件中，它开始工作了。

import $ from 'jquery';
window.$ = window.jQuery = $;
require('datatables.net-bs4');

因为所有其他代码都是导入的，所以我像这样添加为导入

import 'datatables.net-bs4';

在我运行 npm run dev 之后它开始工作了。保留答案，因为其他人也提出了同样的问题。

使用 webpack 为 laravel 7 安装数据表

Install datatables for laravel 7 with webpack

datatables

laravel

laravel-mix

laravel-7