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

【问题标题】：$(...).datepicker is not a function in Rails 6$(...).datepicker 不是 Rails 6 中的函数
【发布时间】：2020-02-22 21:55:31
【问题描述】：

不明白为什么我不能让任何 jQuery 插件函数（bootstrap、datepicker 等）工作：

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

一些注意事项：

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

application.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'

package.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"
  }
}

env.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调用bootstrap的modal，它会打开成功。

【问题讨论】：

为什么要包含 jquery 两次（$ 和 jQuery）？
一些 jquery 插件使用 $ 和 jQuery 选择器来引用 jQuery。
这是一个奇怪的错误消息，虽然... is not a function in Rails 6 只是一个疯狂的猜测，但可能是因为 bootstrap 在 package.json 中的 jquery 之前出现？当您尝试像 $('div').hide() 这样的原生 jquery 函数时，确切的错误消息是什么？
试过了，没有任何反应:(
您还应该包含 jQueryUI，这是旧版本的解决方案，只需在 rails 6 中尝试使用 jQueryUI *.com/questions/38177237/…

标签： jquery ruby-on-rails ruby-on-rails-6

【解决方案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

【讨论】：