Laravel：使用 npm 包 - ReferenceError

Posted 2023-03-14

【中文标题】Laravel：使用 npm 包 - ReferenceError

【英文标题】：Laravel: Using an npm package - ReferenceError

【发布时间】：2020-07-15 10:50:52

【问题描述】：

我正在努力安装和使用基于 npm 的 JS 包：https://clipboardjs.com

所以我运行了 npm 命令：

npm install --save zenorocha/clipboardjs

我将此行添加到app.js 文件中：

require('clipboard');

我跑了：

npm run dev 

但后来我迷路了，我不知道如何实际加载包！

我不断收到以下错误：

ReferenceError：找不到变量：ClipboardJS

提前感谢您的帮助！ 尼克

PS：我需要做一些精确的说明：除了 nom install 并在 app.js 文件中添加一行之外，我没有执行其他步骤...是否需要其他操作？

【问题讨论】：

它应该在您的app.js 中可用。该链接中的Setup 或Usage 部分没有帮助？

我不明白是否必须添加这样的一行； "" 或者 Laravel mix 是否会为我做...

您能解释一下您是如何使用它的吗？我将答案的行添加到 app.js 并重新编译，但现在我不知道如何在我的刀片文件中使用它..

【参考方案1】：

与其他回复一样，使用window.ClipboardJS = require('clipboard'); 是您需要的第一步。但是，当您想在刀片中使用它时，请确保在此事件回调中使用 ClipboardJS 对象包装您的代码

https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event

<script>
    document.addEventListener('DOMContentLoaded', () => 
      // your ClipboardJS code here
    );
</script>

【参考方案2】：

您可能需要将其分配给窗口对象。

所以改变

require('clipboard');

到

window.ClipboardJS = require('clipboard');

我刚刚创建了一个新的 Laravel 项目，它对我有用。

【讨论】：

当然！但是我仍然在检查器中收到错误“ReferenceError：找不到变量：ClipboardJS”...

@nicolas_geneva 更新了我的答案。试试看

很抱歉打扰你，但这进入了 resources/js/app.js 文件？

很酷的人：D