ruby-on-rails - 带有 WebPack 的 Bootstrap4 DataTables 没有集成在 Rails 6 中？

Question

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

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

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

出席人数:131 未捕获的 ReferenceError:$ 未定义出席人数: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 而不是 CDN 的 DataTable，我找到了一些解决方法。

如果要在文件夹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 底部的最后一行开始

Please note that the above is shown for CommonJS modules. If you are using an AMD loader, you do not need to execute the required library (i.e. remove the trailing ()).

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

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

我找到了这个 discussion ，希望对您有所帮助!