时间戳

首页 > 解决方案 > 在 Rails 6 上未定义 Instantclick

javascript - 在 Rails 6 上未定义 Instantclick

问题描述

我尝试将Instantclick集成到我的 rails 6 应用程序中。我在我的 javascript/custom 文件夹中添加了instantclick.js 文件。然后，我将它导入到 javascript/packs/application.js 中：

require("custom/instantclick")

我在布局的 body 标记的末尾添加了以下行来初始化 Instantclick：

...
            <script data-no-instant>InstantClick.init();</script>
      </body>
    </html>

然后，我在控制台中收到以下错误：

(index):404 Uncaught ReferenceError: InstantClick 未定义

我是使用 webpacker 的新手，也许我做错了什么。但是，将导入 instantclick.js 文件。知道我做错了什么吗？谢谢。

标签： javascriptruby-on-railsinstantclick.io

解决方案

Webpack 的工作方式与 Sprocket 不同。您遇到的一件事是 webpack 不会向全局范围公开任何内容。window这意味着除非您指示 webpack 将这些变量添加到对象中，否则从脚本标签调用函数将无法按预期工作。

您的 instantclick.js 文件也不是模块感知的，即它不导出任何内容，例如使用module.exports = InstantClick.

但是，使用 webpack，您可以将其配置为两者兼而有之。您需要同时导出和公开 InstantClick：

yarn add expose-loader exports-loader

// config/webpack/environment.js

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

environment.loaders.append('InstantClick', {
  test: /instantclick/,
  use: [{
    loader: 'expose-loader',
    options: 'InstantClick'
  },
    {
    loader: 'exports-loader',
    options: 'InstantClick'
  }]
})

module.exports = environment

当然，还有更多要学习的内容和其他方法。以下是一些资源：

推荐阅读