0

我想在我的 Rails 应用程序中使用ToastifyJS作为 JS 库来烤面包。由于 Rails 6 默认使用 Webpack，所以我用谷歌搜索了一段时间，结果一无所获。

这是我所做的：

安装导轨 6：

rails _6.0.0.rc1_ new myapp -d mysql

安装 JS 库 toastify-js：

yarn add toastify-js

应用程序/资产/样式表/application.scss

@import "toastify-js/src/toastify";

应用程序/javascript/packs/application.js

import Toastify from 'toastify-js'

document.addEventListener("turbolinks:load", () => {
  Toastify({
    text: "This is a toast",
    duration: 3000,
    destination: "https://github.com/apvarun/toastify-js",
    newWindow: true,
    close: true,
    gravity: "top", // `top` or `bottom`
    position: 'left', // `left`, `center` or `right`
    backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
    stopOnFocus: true // Prevents dismissing of toast on hover
  }).showToast();
})

按预期工作。但是我想要的有点不同。作为祝酒/通知，您可以编写如下代码：

应用程序/视图/布局/application.html.erb

<% if flash.any? %>
  <script type="text/javascript">
    document.addEventListener("turbolinks:load", () => {
      <% flash.each do |key, value| %>
        Toastify({
          text: "<%= value %>",
          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)"        
        }).showToast();
      <% end%>
    })
  </script>
<% end %>

我收到了这个错误：Uncaught ReferenceError: Toastify is not defined虽然我import Toastify from 'toastify-js'在application.js?

还有一件事，为了让代码结构更干净，我把所有关于 toast 的 js 都写在一个文件里：

应用程序/javascript/packs/toast.js

import Toastify from 'toastify-js'

const toastNotice = Toastify({
  text: "This is a toast",
  backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
});

const toastAlert = Toastify({
  text: "This is a toast",
  backgroundColor: "linear-gradient(to right, #fcb045, #fd1d1d)",
});

应用程序/javascript/packs/application.js

import './toast.js'

app/views/shared/_flash.html.erb

<% if flash.any? %>
  <script type="text/javascript">
    <% flash.each do |key, value| %>
      toast<%= key.capitalize %>.options.text = "<%= value%>";
      toast<%= key.capitalize %>.showToast();
    <% end%>
  </script>
<% end %>

但又一次，我得到了Uncaught ReferenceError: toastAlert is not defined

4

1 回答 1

0

我在我的社区问过这个问题，所以我会在这里总结答案。这不是 Rails 或 Rails 6 的问题。问题在于范围。我们需要将我们的库暴露给全局范围。

我们可以通过 window 对象手动公开，也可以使用Webpack ProvidePlugin。

const { environment } = require('@rails/webpacker')

environment.plugins.prepend('Provide',
    new webpack.ProvidePlugin({
        Toastify: 'toastify-js/src/toastify'
    })
)

module.exports = environment

但是， usingProvidePlugin不会将库公开到全局范围。它仅在我们使用 Webpack 编译为库的地方可用，这意味着在app/packs/application.js. 所以当我们在视图模板中编写脚本时，那些代码并没有被 Webpack 编译，所以不会被定义。

所以我们可以：

  1. 使用窗口对象公开：window.myModule = myModule
  2. 使用 Webpack expose-loader（实际上它的作用是使用 window 对象公开）

但是我们不应该在全局范围内编写脚本或动态插入脚本标签。在这种特定情况下，渲染 toast。我们应该：

  1. data-当我们有 toast 时输出 html属性。
  2. 在app/packs/application.js导入 js 库中
  3. 使用getElementByClass... 然后获取有关 toast 的数据
  4. 在这些 toasts 上执行库代码

我们应该将信息嵌入到 DOM 中，因为：

  1. 无需在视图模板中编写js
  2. 可以defer脚本执行吗
  3. 渐进式增强
于 2019-07-22T01:59:53.900 回答