如何在 Rails 6 項目中包含 jquery-ui？

Question

我正在使用 Rails 6.0.3.2 和 jquery-ui 1.12。

仍然無法使其工作： Uncaught TypeError: $(...).datepicker is not a function

試過：

一、編輯config/webpack/environment.js

最后一個版本：

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

二、 導入和要求：

require( "jquery-ui/ui/widgets/datepicker" );

和

import "jquery-ui/ui/widgets/datepicker"

我知道有很多像我這樣的問題。 但是，它們中的大多數已經過時了。 嘗試了一百萬種具有相同答案的組合：“不是功能”

請幫助工作配置和導入/需要說明！ 提前致謝！

Answer 1

最后我想出了如何讓所有這些東西工作（我的意思是引導程序，jquery-ui 等等）。 我希望我能花不到半天的時間來收集每一滴菜譜。

我的config/webpack/environment.js ：

const { environment } = require('@rails/webpacker')
//const { VueLoaderPlugin } = require('vue-loader')
//const vue = require('./loaders/vue')

//environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin())
//environment.loaders.prepend('vue', vue)
const webpack = require('webpack')

module.exports = environment

我注釋掉了 Vue 部分，以防你更喜歡其他東西。

我的application.js ：

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

import * as $ from 'jquery';
import * as bootstrap from 'bootstrap';
import * as datepicker from 'jquery-ui/ui/widgets/datepicker';

document.addEventListener("turbolinks:load", function() {
  if ($('#termsAcceptBtn').length) {
    $('#termsAcceptBtn').addEventListener("click", function() {
      $('#termsModal').modal('show');
    });
  }
});

$(document).on('turbolinks:load', function() {
  $("#user_birth").datepicker();
});

我希望它可以幫助某人節省半天。