引导- Rails下的webpacker通知返回$.notify不是一个函数。

Question

我正在将一个项目从链轮迁移到Webpacker。

最后一件我似乎无法正确运行的事情是通知。

我以前能做：$.notify(‘测试’)，但现在我

Uncaught TypeError: $.notify is not a function

当我尝试在浏览器控制台中执行此操作时，也会遇到相同的错误，而在它正常工作之前。

这是我的application.js文件：

require("@rails/ujs").start();
require("turbolinks").start();
require("@rails/activestorage").start();
import 'bootstrap';
import 'bootstrap-notify';

我也尝试了需要引导-通知，但这并没有任何区别。

Environments.js

const { environment } = require('@rails/webpacker')
const erb = require('./loaders/erb')
const coffee =  require('./loaders/coffee')

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

environment.config.set('resolve.alias', {jquery: 'jquery/src/jquery'});

environment.loaders.prepend('coffee', coffee);
environment.loaders.prepend('erb', erb);
module.exports = environment;

如果我将引导程序-fy.js文件放在资产/javascripts文件夹中，并将其包括在下面这样：

    = javascript_include_tag 'bootstrap-notify', 'data-turbolinks-track': 'reload'

它的工作没有任何问题。

Answer 1

终于起作用了。

引导-通知是一个旧的包，它不做任何导出，但只启用$ ($.notify)上的函数。

为了让它更好地使用Webpacker，您可以安装脚本加载程序。

yarn add script-loader

然后将其添加到您的application.js文件中(在webpack dir下面)

require("script-loader!bootstrap-notify");

这将评估全局上下文中的代码。确保代码被缩小了，因为Webpack不会为你这么做。