个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我对使用 Webpack 和 Rails 比较陌生。我正在尝试安装 tippy.js在 Rails 6 应用程序上，但我无法访问 View 。 (如果我只是将tippy.js CDN 包含在 View 中的脚本标记中，我可以让它工作，但我无法通过使用webpack/yarn 让它工作。)
根据tippy.js instructions ，我已经用 yarn 安装了tippy.js。我的 package.json 文件:
{
"//": [
"moment - used in time_zones",
"popper.js - needed for bootstrap"
],
"dependencies": {
"@rails/ujs": "^6.0.3-1",
"@rails/webpacker": "5.1.1",
"bootstrap": "^4.5.0",
"jquery": "^3.5.1",
"jquery-ui": "^1.12.1",
"jquery-ujs": "^1.2.2",
"moment": "^2.26.0",
"popper.js": "^1.16.1",
"tippy.js": "^6.2.3",
"webpack": "^4.43.0"
},
"devDependencies": {
"webpack-dev-server": "^3.11.0"
},
"resolutions": {}
}
然后说明要导入tippy及其CSS，所以我在app/javascript/packs/application.js中做到了:
import "core-js/stable";
require("@rails/ujs").start();
require("jquery");
import tippy from "tippy.js";
import 'tippy.js/dist/tippy.css';
console.log("loaded tippy");
然后，在我的 index.html.erb View 中，我关注他们的 creation创建示例按钮的示例，并且根据他们的nothing is working FAQ , 在正文末尾调用tippy:
<button data-tippy-content="Tooltip">Text</button>
...
<script>
tippy('[data-tippy-content]');
</script>
但是，我没有得到工具提示，并且在控制台中，对于包含 tippy('[data-tippy-content]'); 的行，我得到“未捕获的 ReferenceError:tippy 未定义”； .
我必须这样做才能让 jQuery 工作，所以我想我可能需要为 tippy.js 做类似的事情:
const { environment } = require('@rails/webpacker')
const webpack = require('webpack')
environment.plugins.prepend('Provide',
new webpack.ProvidePlugin({
$: 'jquery/src/jquery',
jQuery: 'jquery/src/jquery',
tippy: 'tippy.js'
})
)
module.exports = environment
没有改变任何东西；在我看来仍然有 ReferenceError 。我怀疑我在这里可能做错了什么；我可以找到一堆关于如何为 jQuery 提供插件的示例，但在网上找不到太多其他示例。
tippy('[data-tippy-content]'); 并将其放入 app/javascript/packs/application.jsimport "core-js/stable";
require("@rails/ujs").start();
require("jquery");
import tippy from "tippy.js";
import 'tippy.js/dist/tippy.css';
tippy('[data-tippy-content]');
console.log("loaded tippy");
我不再收到 ReferenceError，但工具提示也不起作用。所以在某种程度上，tippy 并没有以 View 识别的任何方式被初始化。
<body>
<button>Text</button>
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>
<script>
tippy('button', {content: 'tooltip'});
</script>
</body>
有效——我得到了工具提示并且没有控制台错误——但它破坏了使用 webpack 必须在我的 View 中包含 CDN 脚本标签的全部意义。
我应该如何以及在哪里调用 tippy('[data-tippy-content]'); 以便我的 View 将正确地包含所有带有 data-tippy 的标签的tippy.js 工具提示-content 属性？
最佳答案
您可以在 rails 6 中轻松添加tippy.js :-
添加tippy.jsapp/javascripts/packs/application.js 并添加以下行import tippy from 'tippy.js';
import 'tippy.js/dist/tippy.css';
window.tippy = tippy;
tippy('#myButton', {
animation: 'scale',
content: 'Hi I am working',
});
关于webpack - Rails 6、webpack 和tippy.js 给出 "tippy is not defined"- 我在哪里调用tippy() 函数？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62294869/
24
4
0
我在使用带有 vector STL 的迭代器时遇到了这个错误。 代码:- #include #include void print_vec(std::vector vec) { auto
JAVA:两个引用“p”&&“pp”之间有区别吗？ PrintStream p = new PrintStream(System.out); p.println("lol");
我尝试从主分支中拉出，但收到错误消息: $ git --no-optional-locks -c color.branch=false -c color.diff=false -c color.sta
我面临着一个让我抓狂的问题! 我有一个函数，这个: void load_weapons3(t_env *e, char *name, int x, t_weapon *w) { char
我正在尝试使用 CUDA 中的最小值、最大值、总和和平均值实现并行归约。 这是我目前的主要代码片段。 int main() { const auto count = 8; const
我知道 double free 或 corruption 错误通常是对 big 3 的违规，但在这种情况下，我找不到违规发生的地方。我有一个复制构造函数、析构函数和赋值运算符，适用于任何处理指针的东西
GTK+ 中的“focus”和“focus-in(out)-event”信号有什么区别？哪个先发射？它们与键盘(TAB)和鼠标点击有什么关系。他们互相依赖吗？ 我问这个是因为我想在顶层窗口中跟踪当前聚
*** glibc detected *** /home/ghoshs/workspace/Simulator/Debug/Simulator: double free or corruption (
#include #include #include #include using namespace std; #define MAX_WEIGHT 1000000 class Set {
我在服务器上有两个分支一个叫 R2 的分支和一个叫 DEV 的分支我无意中登录了错误的服务器，进入了存储库并执行了GIT pull 源开发但是存储库在 R2 上。所以我意识到我的错误然后尝试通过做一个
我有一个包含循环的大约 1000 个顶点和 3000 个边的有向图。 我试图从给定的顶点找到所有下游(出)路径。 使用以下 Gremlin 查询时 g.V(45712).repeat(out().si
使用 Delphi XE 2 我试图确定缩放方向以将缩放效果应用于图像(TImage)，但没有找到执行此操作的函数，并且图像的 OnGesture 事件中的 EventInfo 属性没有此信息. 我见
我正在尝试创建一个 Zoom_image 函数，它使用离散傅里叶变换来缩放灰度图像。如果图像大小小于或等于 4*4 但大小增加，我包含的代码可以工作。它给出“双重释放或损坏(出)中止(核心转储)”错误
当我执行 popAll 函数时，出现以下错误: 双重释放或腐败(出)中止(核心转储) 我想我已经将错误来源缩小到了这个函数。 IntegerStack 是我制作的一个简单的 ADT，其中包含一个名为
我有网络开发背景，我正在尝试创建类似于 this technique 的东西适用于 iOS(使用 Cocoa/Obj C)。我在谷歌搜索资源时遇到了很多困难，因为 iOS 中的“视差”往往指的是 iO
我想实现一个 faceted search对于我的一个项目。我正在使用 PHP5、Mysql 和 Symfony 1.4。显然社区指向Apache Solr这似乎正是我想要完成的。 问题是该网站将在不
我知道有 questions floating around当您没有提供明确的分支名称时，关于来自特定分支的 git pull，但是我想知道即使用户确实指定了不同的分支，是否也可以强制 pull 分支
我正在尝试将我的更改推送到 NAS 上的存储库。它以我无法理解的方式失败。 documentation声明默认情况下 push 仅适用于快进更新。很公平。所以我做了一个 git pull(我的 Rem
我刚开始使用 Oracle 的 Coherence 缓存，我注意到这一点:如果我在缓存中放入一个 ConcurrentHashMap 对象，当我检索它时，我可以看到它被转换为一个普通的 HashMap
我尝试创建一个连接到数据库的线程，从那里获取一些数据并打印到控制台。问题是当该线程完成时抛出异常: 双重免费或腐败(出局)中止(核心转储) 我尝试使用 sqlite3 和 pthread，但这两个并不
我是一名优秀的程序员,十分优秀！