3

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

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

我曾经能够做到： $.notify('Test') 但现在我得到了

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';

我也尝试过 bootstrap-notify 上的 require ，但这没有任何区别。

环境.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;

如果我将 bootstrap-notify.js 文件放在 assets/javascripts 文件夹中并像这样包含它：

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

它可以正常工作。

4

1 回答 1

0

终于让它工作了。

bootstrap-notify 是一个旧包，它不做任何导出，只是启用 $ ($.notify) 上的功能。

为了让它与 Webpacker 配合得很好，你可以安装 script-loader

yarn add script-loader

然后将其添加到您的 application.js 文件中（在 webpack 目录下）

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

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

于 2020-02-24T23:07:38.683 回答