如何解决带WebPack的Bootstrap4的数据表未集成在Rails 6中吗？
当前，我正在负责处理出勤模块的HR系统。我想使用Bootstrap4 DataTables显示表。我已经尝试了StackOverflow的所有链接，但是没有一种解决方案适合我。
我在此代码中遇到以下错误：
application.js：1未捕获的错误：找不到模块'jquery' 在webpackMissingModule（application.js：1）
出勤率：131 Uncaught 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中取消注释这些文件时，所有代码都能正常工作而没有任何错误。
希望获得最佳答复。
解决方法
我不确定根本原因是什么，但是如果您想使用Webpack中的DataTable而不是CDN，我找到了一些解决方法。
如果要在文件夹DataTable下的js文件中使用javascript/pack/函数：
// 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加载程序，则无需执行所需的库（即删除结尾的（））。
或者，如果您要调用文件$('#example').DataTable();中的views/attendances/_table.html.erb，则应编辑一下application.js文件：
var $ = require( 'jquery' );
var dt = require('datatables.net-bs4');
window.$ = $
我找到了这个discussion，希望有帮助！
,我不确定这是否是拼写错误，但是您的webpack目录拼写错误：webapck与webpack。
我公开的jquery与您有些不同。这是带有暴露加载器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>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
