main.coffee 文件中的 Require 语句无法正常工作答案

【问题标题】：Require statement in main.coffee file not working properlymain.coffee 文件中的 Require 语句无法正常工作
【发布时间】：2019-08-06 04:28:04
【问题描述】：

我正在尝试将clipboardjs 实现到一个项目中，为此我将clipboardjs.js 文件位于./modules/clipboardjs.js 中。在 main.coffee 文件中， require './modules/clipboardjs' 行正在实现该文件。然后我有两个树枝模板，其中一个带有一个初始化clipboardjs对象的宏，如下所示：

<script>
  new ClipboardJS('{{ selector }}');
</script>

另一个是具有生成 url 的所有逻辑的主模板文件。我在不同的实现上取得了成功，但现在我正在尝试使用 main.coffeescript 文件来导入它根本没有复制的 js 文件。关于我可能需要做什么才能正确加载此文件的任何想法？

编辑：

我通过将 requires 语句更改为 ClipboardJS = require './modules/clipboardjs' 和 window.ClipboardJS = require './modules/clipboardjs' 来尝试这两种解决方案我在 chrome 中遇到的两次错误都是：

Uncaught TypeError: Cannot set property 'ClipboardJS' of undefined
at webpackUniversalModuleDefinition (clipboardjs.js:15)
at Module.<anonymous> (clipboardjs.js:7)
at Module../src/scripts/administration/modules/clipboardjs.js (admin.js:190240)
at __webpack_require__ (bootstrap:724)
at fn (bootstrap:101)
at Object../src/scripts/administration/main.coffee (main.coffee:14)
at __webpack_require__ (bootstrap:724)
at fn (bootstrap:101)
at Object.1 (admin.js:192117)
at __webpack_require__ (bootstrap:724)

articles:2332 Uncaught ReferenceError: ClipboardJS is not defined
at articles:2332
(anonymous) @   articles:2332

当我调用 ClipboardJS 构造函数时，似乎没有找到它需要的代码。

编辑 2： @caffeinated.tech 我不完全确定，我是一个新开发者，但我知道他们使用 webpack 和 gulp。有没有办法检查？

【问题讨论】：

看起来window 可能在您的咖啡脚本内容中未定义。你能告诉我你是如何构建/编译你的前端代码的吗？是webpack吗？ coffeescript 是如何编译的？

标签： coffeescript twig

【解决方案1】：

这可能是范围的问题。在 Javascript 中，在顶层定义的类/变量/函数将在项目中的所有其他脚本中全局可用。

但是在coffeescript中，这些是在文件中作用域的，所以不能在定义它们的文件之外使用。

您应该能够通过将导入的 ClipboardJS 分配给全局 window 对象来修复它（如果您正在执行任何服务器端渲染，则必须使用 global 作为 window 的后备）

window.ClipboardJS = require './modules/clipboardjs'

【讨论】：