javascript - Rails 6 上未定义 Instantclick

Question

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

require("custom/instantclick")

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

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

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

(index):404 Uncaught ReferenceError: InstantClick is not defined

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

Answer 1

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

您的 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

当然还有更多东西需要学习和其他方法。以下是一些资源:

• https://webpack.js.org/guides/shimming/
• http://www.matthiassommer.it/programming/expose-global-variables-methods-modules-javascript/
• https://rossta.net/blog/three-ways-webpack-surprises-rails-developers.html