Bootstrap-notify with webpacker under Rails returning $.notify is not a function
Bootstrap-notify with webpacker under Rails returning $.notify is not a function
我正在将一个项目从 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 上要求,但这没有任何区别。
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;
如果我将 bootstrap-notify.js 文件放入 assets/javascripts 文件夹并像这样包含它:
= javascript_include_tag 'bootstrap-notify', 'data-turbolinks-track': 'reload'
它没有任何问题。
终于成功了。
bootstrap-notify 是一个旧包,它不做任何导出,只是在 $($.notify) 上启用功能。
为了让它与 Webpacker 一起使用,您可以安装脚本加载器
yarn add script-loader
然后将其添加到您的 application.js 文件(在 webpack 目录下)
require("script-loader!bootstrap-notify");
这将在全局上下文中评估代码。确保代码已缩小,因为 Webpack 不会为您做那件事。
我正在将一个项目从 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 上要求,但这没有任何区别。
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;
如果我将 bootstrap-notify.js 文件放入 assets/javascripts 文件夹并像这样包含它:
= javascript_include_tag 'bootstrap-notify', 'data-turbolinks-track': 'reload'
它没有任何问题。
终于成功了。
bootstrap-notify 是一个旧包,它不做任何导出,只是在 $($.notify) 上启用功能。
为了让它与 Webpacker 一起使用,您可以安装脚本加载器
yarn add script-loader
然后将其添加到您的 application.js 文件(在 webpack 目录下)
require("script-loader!bootstrap-notify");
这将在全局上下文中评估代码。确保代码已缩小,因为 Webpack 不会为您做那件事。