如何将：“Cookies EU 横幅”添加到 Rails 6 站点答案

【问题标题】：How to add the: "Cookies EU banner" to Rails 6 site如何将：“Cookies EU 横幅”添加到 Rails 6 站点
【发布时间】：2020-10-28 13:37:20
【问题描述】：

我正在尝试将这个：https://github.com/Alex-D/Cookies-EU-banner 添加到我的 rails 6 站点。这应该很容易，但是我错过了一些东西，我不知道它是什么。

这就是我所做的：

yarn add cookies-eu-banner（没问题）。
在正文部分的开头插入此 div（没问题 - 使用部分完成）。

<div id="cookies-eu-banner" style="display: none;">
    By continuing to visit this site, you accept the use of cookies by Google Analytics for statistical purposes.
    <a href="./read-more.html" id="cookies-eu-more">Read more</a>
    <button id="cookies-eu-reject">Reject</button>
    <button id="cookies-eu-accept">Accept</button>
</div>

将这个 div 插入到正文部分的末尾（也可以通过部分完成）。

<%= javascript_pack_tag '../src/cookies-eu-banner' %>
<script>
    new CookiesEuBanner(function () {
        // Your code to launch when user accept cookies
    });
</script>

在 application.js 我添加了这一行：导入('src/index')
在 app/javascript/src/index.js 我添加了这一行：导入'cookies-eu-banner'
我已将 cookies-eu-banner.js 脚本复制到 app/javascript/src 文件夹中。
然后预编译资产，完成 bin/webpack 并重新启动服务器。

但是在刷新页面时，我仍然收到一条错误消息：“CookiesEuBanner 不是函数”，或者：“未捕获的 ReferenceError：cookiesEuBanner 未定义”

欢迎对我错过的内容提出任何建议。

提前致谢

【问题讨论】：

我的猜测是javascript_pack_tag不能采用相对路径，或者路径错误
我也尝试过将脚本直接放在 app/javascript 文件夹中，并在 application.js 中有这一行： import './cookies-eu-banner'; - 然后在 application.html.erb 中：。 - 结果相同。
也许你应该这样做：每个 javascript 文件都有一个单独的标签。
cookies-eu-banner 直接在 packs 文件夹中，我在源代码 (html) 中得到了这个：所以这个js文件被webpacker找到了。
我需要从原始 js 脚本中导出 CookiesEuBanner，还是需要从 cookies-eu-banner 导入 CookiesEuBanner 之类的操作才能访问该功能？

标签： javascript ruby-on-rails webpacker

【解决方案1】：

为了使这项工作与 webpack/Webpacker 一起工作，用法将不同于 cookies-eu-banner README 中当前描述的内容。你的 JavaScript 代码必须在 webpack 依赖图中导入，而不是在视图中将 JS 嵌入到 <script> 标签中。

首先，确保您的布局中包含以下标签以导入 Webpacker 捆绑的 JavaScript 和 CSS：

<%= stylesheet_pack_tag 'application' %>
<%= javascript_pack_tag 'application' %>

横幅 HTML 应该在您的布局/视图中，即，根据自述文件，<div id="cookies-eu-banner" style="display: none;">...</div>。

然后，在app/javascript/（但不在app/javascript/packs）中的某处添加一个用于初始化横幅的JS文件，例如app/javascript/src/add-eu-banner.js。在这里，您将导入库（如果需要，还可以导入默认 css）并在 DOM 内容加载后对其进行初始化：

// app/javascript/src/add-eu-banner.js

import CookiesEuBanner from 'cookies-eu-banner'
import 'cookies-eu-banner/css/cookies-eu-banner.default.css'

document.addEventListener('DOMContentLoaded', () => {
  new CookiesEuBanner(() => {
    console.log('Cookies EU Banner accepted')
  })
})

现在，通过在“application.js”包文件中添加导入语句，将 该文件 添加到 webpack 依赖关系图中：

// app/javascript/packs/application.js

import '../src/add-eu-banner'

这应该显示横幅。您可能需要刷新页面或重新启动 webpack-dev-server，具体取决于您在本地开发的方式。

我还在我的 Rails 6 Webpacker 演示 repo 的一个分支中创建了这个作为示例：https://github.com/rossta/rails6-webpacker-demo/compare/example/cookies-eu-banner

【讨论】：

我按照您的指示进行操作，并且在控制台日志中确实收到了“已接受 Cookies EU Banner”，因此我确信您的回答是正确的。但是，当我尝试从示例中添加谷歌分析时，我仍然没有看到横幅：
我按照您的指示进行操作，并且在控制台日志中看到“已接受 Cookies EU Banner”，因此我确信您的回答有效且正确。但是，刷新页面时，我仍然看不到实际的横幅。如果我想使用谷歌分析示例，我应该使用 jquery 将整个代码添加到
，还是只需将 console.log('Cookies EU Banner accepted') 替换为'真实代码'？
这听起来像是一个单独的问题

【解决方案2】：

由于我的声誉，我还不能发表评论：

@rossta 的答案是正确的。回答@Mhon后续关于如何添加谷歌分析的问题：只需调整CookiesEuBanner的init中的代码如下：

document.addEventListener('DOMContentLoaded', () => {
    new CookiesEuBanner(function () {
        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

        // Don't forget to put your own UA-XXXXXXXX-X code
        ga('create', 'UA-XXXXXXXX-X', 'auto');
        ga('send', 'pageview');
    }), true; 
})

我的横幅也没有显示。确保您还没有 cookie“hasConsent=true”和/或检查您的浏览器安全设置。即火狐：Website cookie settings

【讨论】：

是的，谢谢 - 我已将 Rossta 的回答标记为已接受。重启了很多次，清除了 cookie 等，但我现在已经开始工作了，Rossta 的回答让我走上了正确的轨道。