带有 WebPack 的 Bootstrap4 的 DataTables 没有集成在 Rails 6 中？
Posted
技术标签:
【中文标题】带有 WebPack 的 Bootstrap4 的 DataTables 没有集成在 Rails 6 中？【英文标题】：DataTables of Bootstrap4 with WebPack is not integrated in Rails 6? 【发布时间】：2021-01-25 10:24:09 【问题描述】：目前，我正在处理考勤模块的 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 中取消注释这些文件时，所有代码都可以正常工作，没有任何错误。
希望得到最好的答复。
【问题讨论】：
【参考方案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，希望对你有帮助！
【讨论】：
未捕获的错误：在 Object../node_modules/toastr/toastr.js (toastr.js:495 ) 在 webpack_require (bootstrap:19) 在 Object../app/javascript/controllers/index.js (index.js:1) 在 webpack_require (bootstrap:19)在 Module../app/javascript/packs/application.js (application.js:1) at webpack_require (bootstrap:19) at bootstrap:83 at bootstrap:83 出勤率:131 Uncaught ReferenceError: $未在出勤时定义：131 我将这些行放在 application.js 的顶部 我把它放在all require 下，我还没有看到你需要toastr，你在controller.js 中添加了吗？
是的，我在控制器 js 中添加了显示自定义消息
谢谢！我需要将 .DataTable() 放入视图文件中，它起作用了！【参考方案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>
【讨论】：
jquery 问题已解决，但它仍然给我一个关于 DataTable is not a Function 的错误以上是关于带有 WebPack 的 Bootstrap4 的 DataTables 没有集成在 Rails 6 中？的主要内容，如果未能解决你的问题，请参考以下文章
Bootstrap4默认样式不对胃口？教你使用NPM+Webpack+SASS来定制
使用 Angular 7 + Webpack 4 封装 css
如何使用 react webpack 设置 bootstrap 4 scss
Bootstrap 4 Beta 使用 Webpack 3.x 导入 Popper.js 抛出 Popper 不是构造函数