javascript - Rails Webpacker - 未捕获的 TypeError : $(. ..).tooltip 不是函数

Question

我有一个 Rails 6 应用程序，并且 Assets 是使用 Webpack 4.39.1 ( Webpacker gem ) 编译的。

我已将 JQuery 3.4.1 和 Popper.js 添加到 webpack ProvidePlugin 中，如下所示 (config/webpack/environment.xml) 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']
}));

module.exports = environment;

我有一个 javascript/packs/application.js 文件，它是 webpack 的入口点。

我已添加 Bootstrap 4.1.1 并将其导入到 application.js。

现在，我尝试按如下方式设置工具提示:

import "bootstrap/dist/js/bootstrap";

$( document ).ready(function() {
    $('[data-toggle="tooltip"]').tooltip({
        container: 'body',
        placement: 'auto'
    });
});

我在开发控制台中收到 Uncaught TypeError: $(...).tooltip is not a function 错误。

我还检查了 $.fn 并发现 Bootstrap JS 方法都不是 JQuery 原型(prototype)的一部分。

如有任何帮助，我们将不胜感激!谢谢

Answer 1

将其添加到您的 webpack 中。还要安装 poper.js

npm i popper.js

在你的网页包中

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

如果您使用 ts，请将其添加到您的typing.d.ts 中。

我也面临同样的问题。之后请确保再次重新启动 IDE 和您的 webpack。

interface JQuery<any> {
    tooltip(params: any): any;
}