Rails 6 + Webpack、数据表、jQuery

Question

我有一个使用此代码的“全选”按钮：

<script type='text/javascript'>
  $('#check_all').on("click", function() {
    $('input[type="checkbox"]').click();
  });
</script>

自从我升级到 Rails 6 + Webpacker 后，它就停止工作了。 控制台显示此错误：

Uncaught ReferenceError: $ is not defined

我设法通过将environment.js 更改为：

environment.plugins.append('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    Popper: ['popper.js', 'default']
  })
)

收件人：

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

但一旦修复，数据表就会中断。

任何想法如何让他们一起工作？ 谢谢！

Answer 1

将您自己的 Javascript 移动到包文件中对于可维护性来说是一个不错的选择。但是，我猜这些是动态生成的复选框。绑定运行时它们可能不存在。您可以通过绑定到父元素并使用event delegation 来解决问题。 document.body 是使用 Turbolinks 委托事件的常见绑定选择。

我不喜欢在复选框上调用 click()。结果对用户来说并不总是一致的，它会在浏览器中触发一堆不必要的事件。反转 checked 属性更简洁、更一致。

将 DataTables 作为模块加载需要导入 shim。它是一个较旧的包，它更喜欢 AMD 而不是 CommonJS，并且在 Webpack 环境中会自己绊倒。幸运的是，有一个针对旧代码的标准修复程序，使用 imports-loader。不幸的是，即使这样，它也有一个稍微奇怪的工厂导出，您应该将window 和jQuery 变量注入其中。幸好也是documented here。

综上所述，这是一个建议的application.js：

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

import $ from 'jquery'

// Add DataTables jQuery plugin
require('imports-loader?define=>false!datatables.net')(window, $)
require('imports-loader?define=>false!datatables.net-select')(window, $)

// Load datatables styles
import 'datatables.net-dt/css/jquery.dataTables.css'
import 'datatables.net-select-dt/css/select.dataTables.css'

$(document).on('turbolinks:load', () => {
  $(document.body).on('click', '#check_all', () => {
    var checkBoxes = $('input[type="checkbox"]')
    checkBoxes.prop("checked", !checkBoxes.prop("checked"))
  })

  // placeholder example for datatable with checkboxes
  $('#example').DataTable({
    columnDefs: [{
      render: (data,type,row) => `<input type="checkbox" value="${row[0]}">`,
      orderable: false,
      targets: 0
    }],
    order: [[ 1, 'asc' ]]
  })
})

你需要yarn add imports-loader，因为它是一个 Webpack 选项。

ProvidePlugin 不需要任何这些。除非您依赖它来向第三方代码注入导入，否则可以安全地删除它。

Answer 2

运行yarn add imports-loader

如果您使用 bootstrap3 或其他 CSS 框架，我使用 bootstrap4 数据表，请按照此链接安装： https://datatables.net/download/

在我的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 webpack = require('webpack')
const coffee =  require('./loaders/coffee')
const datatable =  require('./loaders/datatable')

environment.plugins.append('Provide', new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
  jquery: 'jquery',
  'window.jQuery': 'jquery',
  Popper: ['popper.js', 'default']
}))

/**
 * To use jQuery in views
 */
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

在我的app/javascript/packs/dashboard.js

require( 'jszip' );

require("datatables.net-bs4")(window, $);
require("datatables.net-responsive-bs4")(window, $);
require("datatables.net-buttons-bs4")(window, $);
require("datatables.net-select-bs4")(window, $);

require("datatables.net-bs4/css/dataTables.bootstrap4.css");
require("datatables.net-responsive-bs4/css/responsive.bootstrap4.css");
require("datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css");
require("datatables.net-select-bs4/css/select.bootstrap4.css");

请随意给用户 import './datatable' 在.js 中的任何app/javascript/packs 文件中，您喜欢

Answer 3

以上都不适合我。终于按照本指南让它工作了：https://inopinatus.org/2019/09/14/webpacker-jquery-and-jquery-plugins/。

yarn add datatables.net-bs4 imports-loader

应用程序.js

require('@rails/ujs').start()
require('@rails/activestorage').start()
require('channels')
require('jquery')
require('bootstrap/dist/js/bootstrap')
window.$ = $

require('imports-loader?define=>false!datatables.net')(window, $)
require('imports-loader?define=>false!datatables.net-bs4')(window, $)