3

我对使用 Webpack 和 Rails 比较陌生。我正在尝试在 Rails 6 应用程序上安装tippy.js，但无法让视图访问它。（如果我只是在视图的脚本标记中包含tippy.js CDN，我可以让它工作，但我无法通过使用webpack/yarn 让它工作。）

根据tippy.js 的说明，我已经用纱线安装了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]');.

我尝试过的事情：

将 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 没有以视图识别的任何方式进行初始化。

在视图中使用他们无所事事的确切 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]');以便我的视图正确地包含所有带有 data-tippy-content 属性的标签的tippy.js工具提示？

4

1 回答 1

8

您可以在 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',
      });
于 2020-07-15T20:28:28.863 回答