bog*_*dpd 3 hadoop-yarn webpack tippyjs ruby-on-rails-6
我对在 Rails 中使用 Webpack 比较陌生。我正在尝试在 Rails 6 应用程序上安装tippy.js，但在视图中无法访问它。（如果我只是在视图的脚本标签中包含 tippy.js CDN，我可以让它工作，但我无法使用 webpack/yarn 让它工作。）
根据tippy.js说明，我已经用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看来，我按照他们的创建示例创建了一个示例按钮，并且根据他们没有任何效果的常见问题解答，在正文的末尾调用tippy：
<button data-tippy-content="Tooltip">Text</button>
...
<script>
tippy('[data-tippy-content]');
</script>
但是，我没有得到工具提示，并且在控制台中，对于包含tippy('[data-tippy-content]');.
我必须这样做才能让 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 提供 ProvidePlugin 的示例，但在网上找不到太多关于其他任何东西的示例。
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 没有以视图识别的任何方式初始化。
<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 必须在我的视图中包含 CDN 脚本标签的全部意义。
我应该如何以及在何处调用 ，tippy('[data-tippy-content]');以便我的视图正确地包含带有 data-tippy-content 属性的所有标签的 tippy.js 工具提示？
小智 7
您可以在 rails 6 中轻松添加 tippy.js :-
yarn add 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',
});
| 归档时间： |
|
| 查看次数： |
779 次 |
| 最近记录： |