带有 WebPack 的 Bootstrap4 的 DataTables 没有集成在 Rails 6 中？

Question

目前，我正在处理考勤模块的 HR 系统。我想使用 Bootstrap4 DataTables 显示表格。我已经尝试了 * 的所有链接，但没有一个解决方案适合我。

我在这段代码中遇到以下错误：

application.js:1 未捕获错误：找不到模块“jquery” 在 webpackMissingModule (application.js:1)

attendances:131 Uncaught ReferenceError: $ is not defined 出席人数：131

$(…)DataTable 不是函数

packages.json:

    {
    "name": "inhouse_activities",
    "private": true,
    "dependencies": {
        "@fortawesome/fontawesome-free": "^5.15.0",
        "@nathanvda/cocoon": "^1.2.14",
        "@rails/actioncable": "^6.0.0",
        "@rails/activestorage": "^6.0.0",
        "@rails/ujs": "^6.0.0",
        "@rails/webpacker": "4.3.0",
        "bootstrap": "^4.5.2",
        "coffee-loader": "^1.0.0",
        "coffeescript": "1.12.7",
        "datatables.net": "^1.10.22",
        "datatables.net-bs4": "^1.10.22",
        "imports-loader": "^1.2.0",
        "jquery": "^3.5.1",
        "popper.js": "^1.16.1",
        "toastr": "^2.1.4",
        "turbolinks": "^5.2.0"
    },
    "version": "0.1.0",
    "devDependencies": {
        "webpack-dev-server": "^3.11.0"
    }
}

config/webpack/loaders/datatable.js:

module.exports = {
    test: /datatables\.net.*/,
    use: [{
      loader: 'imports-loader?define=>false'
    }]
  }

config/webpack/environment.js:

const { environment } = require("@rails/webpacker");
const coffee = require("./loaders/coffee");

const webpack = require("webpack");
const datatable =  require('./loaders/datatable')

environment.plugins.prepend(
    "Provide",
    new webpack.ProvidePlugin({
        $: "jquery/src/jquery",
        jQuery: "jquery/src/jquery",
        Popper: ["popper.js", "default"]
    })
);

environment.loaders.append('expose', {
    test: require.resolve('jquery'),
    use: [{
      loader: 'expose-loader',
      options: '$'
    }]
  })

environment.loaders.prepend("coffee", coffee);
environment.loaders.prepend('coffee', datatable);

module.exports = environment;

views/attendances/_table.html.erb:

<div class="container">
    <table id="example" class="table table-striped table-bordered" style="width: 1000px;">
        <thead>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td> Paul Byrd</td>
                <td> Chief Financial Officer (CFO)</td>
                <td> New York</td>
                <td>64</td>
                <td> 2010/06/09</td>
                <td> $725,000</td>
            </tr>
            <tr>
                <td> Gloria Little</td>
                <td>Systems Administrator</td>
                <td>New York</td>
                <td>59</td>
                <td>2009/04/10</td>
                <td>$237,500</td>
            </tr>
            <tr>
                <td>Bradley Greer</td>
                <td>Software Engineer</td>
                <td>London</td>
                <td>41</td>
                <td>2012/10/13</td>
                <td>$132,000</td>
            </tr>
            <tr>
                <td>Dai Rios</td>
                <td>Personnel Lead</td>
                <td>Edinburgh</td>
                <td>35</td>
                <td>2012/09/26</td>
                <td>$217,500</td>
            </tr>
            <tr>
                <td>Jenette Caldwell</td>
                <td>Development Lead</td>
                <td>New York</td>
                <td>30</td>
                <td>2011/09/03</td>
                <td>$345,000</td>
            </tr>
      <tr>
                <td>Hassam Saeed</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
      <tr>
                <td>Hunaid Nawaz</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
      <tr>
                <td>Armaghan Fazal</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
      <tr>
                <td>Fahad Anwar</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
        </tbody>
    </table>
</div>


<script type="text/javascript">

  $(document).ready(function() {
      console.log($('#example'))
    $('#example').DataTable();
  });
</script>

app/assets/stylesheets/application.scss:

$fa-font-path: "@fortawesome/fontawesome-free/webfonts";
@import "@fortawesome/fontawesome-free/scss/fontawesome";
@import "@fortawesome/fontawesome-free/scss/solid";
@import "@fortawesome/fontawesome-free/scss/regular";
@import "@fortawesome/fontawesome-free/scss/brands";
@import "@fortawesome/fontawesome-free/scss/v4-shims";
@import "bootstrap/dist/css/bootstrap";

@import "toastr/toastr";
@import "custom";
@import "session";

app/javascript/packs/application.js:

require("jquery");
require("@rails/ujs").start();
require("turbolinks").start();
require("@rails/activestorage").start();
require("channels");


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

require("@nathanvda/cocoon");

import "controllers";
import "@fortawesome/fontawesome-free/js/all";

application.html.erb:

<!DOCTYPE html>
<html>
  <head>
    <title>HR-System</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <%# <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/dataTables.bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.1.7/css/fixedHeader.bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.6/css/responsive.bootstrap.min.css"/> %>
  </head>

  <body>
    <%= yield %>
    
    <script><%= yield :javascript %></script>
    <%# <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.22/datatables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.6/js/dataTables.responsive.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.6/js/responsive.bootstrap.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/fixedheader/3.1.7/js/dataTables.fixedHeader.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.22/js/dataTables.bootstrap.min.js"></script>      %>
    </body>
</html>

每当我在 Application.html.erb 中取消注释这些文件时，所有代码都可以正常工作，没有任何错误。

希望得到最好的答复。

Answer 1

我不确定根本原因是什么，但如果您想使用 Webpack 中的 DataTable 而不是 CDN，我找到了一些解决方法。

如果你想使用javascript/pack/文件夹下的js文件里面的DataTable函数：

// In application.js

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

$(document).ready(() => {
  console.log($.fn.DataTable)
  //
})

/* Got
ƒ (opts) {
    return $(this).dataTable(opts).api();
  }
*/ 
 

从document底部的最后一行开始

请注意，上面显示的是 CommonJS 模块。如果您使用的是 AMD 加载程序，则无需执行所需的库（即删除尾随的 ()）。

或者如果你想在文件views/attendances/_table.html.erb中调用$('#example').DataTable();，你应该稍微编辑一下application.js文件：

var $  = require( 'jquery' );
var dt = require('datatables.net-bs4');
window.$ = $

我找到了这个discussion，希望对你有帮助！

Answer 2

我不确定这是否是拼写错误，但您的 webpack 目录拼写错误：webapck vs webpack。

我暴露 jquery 的方式与您有所不同。这是使用expose-loader 1.0 语法： config/webpack/environment.js

environment.plugins.prepend('Provide', new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
  jquery: 'jquery', 
})
)

environment.loaders.append('expose', {
  test: require.resolve('jquery'),
  use: [
    { loader: 'expose-loader', options: { exposes: ['$', 'jQuery'] } }, 
  ]
})

说到这里，我已经明确地包含在 package.json 中。我不认为任何 Rails webpacker 包默认包含它。

    "@rails/webpacker": "5.1.1",
    "bootstrap": "^4.3.1",
    "datatables.net-bs4": "^1.10.19",
    "expose-loader": "^1.0.0",
    "jquery": "~3.4.1",
    "popper.js": "^1.15.0",

我根本没有config/webpack/loaders/datatable.js 文件。

在app/javascript/packs/application.js 我根本不导入/需要 jquery，它是使用上述配置全局加载的。

import 'bootstrap'
require('datatables.net-bs4')

app/views/whatever.html.erb

...
<script>
    $('#assignments_table').DataTable({
        paging: false, 
        language: {
            emptyTable: "No assignments entered",
        },
    });
</script>