Rails 6、webpack 和 tippy.js 给出 "tippy is not defined" - 我在哪里调用 tippy() 函数？
Rails 6, webpack, and tippy.js giving "tippy is not defined" - Where do I call the tippy() function?
我对将 Webpack 与 Rails 结合使用还比较陌生。我正在尝试在 Rails 6 应用程序上安装 tippy.js，但我无法让视图访问它。 （如果我只是在视图的脚本标记中包含 tippy.js CDN，我可以让它工作，但我无法通过使用 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视图中，我按照他们的creation examples to create a sample button, and, per their nothing is working FAQ，在正文的末尾调用tippy:
<button data-tippy-content="Tooltip">Text</button>
...
<script>
tippy('[data-tippy-content]');
</script>
但是，我没有得到工具提示，在控制台中，我得到了包含 tippy('[data-tippy-content]');.
的行的 "Uncaught ReferenceError: tippy is not defined"
我尝试过的事情：
将 Tippy 放入 config/webpack/environment.js 中的 ProvidePlugin
我必须这样做才能让 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.js
import "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 并没有以视图识别的任何方式进行初始化。
在视图中使用他们 nothing is working FAQ 中的确切 CDN 示例：
<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]'); 以便我的视图将正确地包含一个 tippy.js 工具提示，用于所有具有 data-tippy-content 属性的标签？
您可以在 rails 6 中轻松添加 tippy.js :-
yarn add tippy.js- 转到
app/javascripts/packs/application.js 并添加以下行
import tippy from 'tippy.js';
import 'tippy.js/dist/tippy.css';
window.tippy = tippy;
- 现在在您的 rails 视图中使用 tippy，如下所示
tippy('#myButton', {
animation: 'scale',
content: 'Hi I am working',
});
我对将 Webpack 与 Rails 结合使用还比较陌生。我正在尝试在 Rails 6 应用程序上安装 tippy.js，但我无法让视图访问它。 （如果我只是在视图的脚本标记中包含 tippy.js CDN，我可以让它工作，但我无法通过使用 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视图中，我按照他们的creation examples to create a sample button, and, per their nothing is working FAQ，在正文的末尾调用tippy:
<button data-tippy-content="Tooltip">Text</button>
...
<script>
tippy('[data-tippy-content]');
</script>
但是，我没有得到工具提示，在控制台中，我得到了包含 tippy('[data-tippy-content]');.
我尝试过的事情：
将 Tippy 放入 config/webpack/environment.js 中的 ProvidePlugin
我必须这样做才能让 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.js
import "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 并没有以视图识别的任何方式进行初始化。
在视图中使用他们 nothing is working FAQ 中的确切 CDN 示例：
<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]'); 以便我的视图将正确地包含一个 tippy.js 工具提示，用于所有具有 data-tippy-content 属性的标签？
您可以在 rails 6 中轻松添加 tippy.js :-
yarn add tippy.js- 转到
app/javascripts/packs/application.js并添加以下行
import tippy from 'tippy.js';
import 'tippy.js/dist/tippy.css';
window.tippy = tippy;
- 现在在您的 rails 视图中使用 tippy，如下所示
tippy('#myButton', {
animation: 'scale',
content: 'Hi I am working',
});