javascript - 在 Rails 下使用 webpacker 引导引导通知返回 $.notify 不是函数
问题描述
我正在将一个项目从 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'
它可以正常工作。
解决方案
终于让它工作了。
bootstrap-notify 是一个旧包,它不做任何导出,只是启用 $ ($.notify) 上的功能。
为了让它与 Webpacker 配合得很好,你可以安装 script-loader
yarn add script-loader
然后将其添加到您的 application.js 文件中(在 webpack 目录下)
require("script-loader!bootstrap-notify");
这将评估全局上下文中的代码。确保代码被缩小,因为 Webpack 不会为你做这些。
推荐阅读
- python - What does "[()]" mean when called upon a numpy array?
- django - 更改模型中的图像 - Django
- arduino - 使用 Firmata 和 Game Control Plus 控制舵机
- serverless-framework - 如何使无服务器框架中的资源可重用?
- c# - System.Text.Json.JsonException:'检测到不支持的可能对象循环......'
- javascript - 在 tr 中找到 td 的方法。(Javascript)
- excel - Worksheet_SelectionChange() 可以在选择图片或图像时触发吗?在 Excel VBA 中
- python - 规范化外来文本
- model-view-controller - 仅在新选项卡中未从 partial_view 调用控制器 ActionResult
- javascript - Vue动态背景图片内联组件