$(...).datepicker 不是 Rails 6 中的函数

Question

不明白为什么我不能让任何 jQuery 插件函数（引导程序、日期选择器等）工作：

$(...).datepicker()或$(...).modal()回应... is not a function in Rails 6

一些注意事项：

• $ 和 jQuery 在控制台中响应
• jQuery 包含在其他脚本之前
• jQuery 包含一次。

应用程序.js：

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery")
require("parsleyjs")
require("bootstrap-datepicker")

import '../stylesheets/application'
import './bootstrap_custom.js'
import './ru.js'

包.json：

{
  "name": "joy",
  "private": true,
  "dependencies": {
    "@rails/actioncable": "^6.0.0-alpha",
    "@rails/activestorage": "^6.0.0-alpha",
    "@rails/ujs": "^6.0.0-alpha",
    "@rails/webpacker": "^4.0.7",
    "bootstrap": "4.3.1",
    "bootstrap-datepicker": "^1.9.0",
    "jquery": "^3.4.1",
    "parsleyjs": "^2.9.1",
    "popper.js": "^1.16.0",
    "turbolinks": "^5.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.8.2"
  }
}

环境.js：

const { environment } = require('@rails/webpacker')

const webpack = require('webpack')
environment.plugins.append(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery',
    Popper: ['popper.js', 'default'],
    Parsley: 'parsleyjs/src/parsley.js',
    datepicker: 'bootstrap-datepicker/js/bootstrap-datepicker.js'
  })
)

module.exports = environment

顺便说一句，如果我用 调用引导程序的模态data-toggle，它将成功打开。

Answer 1

尝试将以下代码添加到 application.js：

import jquery from 'jquery';
window.$ = window.jquery = jquery;

并尝试更改 application.js 中的 jquery，如下所示。

const { environment } = require('@rails/webpacker')

const webpack = require('webpack')
environment.plugins.prepend('Provide', new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
  'window.jQuery': 'jquery',
  Popper: ['popper.js', 'default'],
  moment: 'moment/moment',
  datepicker: 'bootstrap-datepicker/js/bootstrap-datepicker.js'
}))

module.exports = environment