Javascript 包括带npm的tokenfield包至laravel

我试图将带有npm的tokenfield包包含到laravel中

首先，我在package.json依赖项中添加了以下行：

"tokenfield": "^0.8.2",

这导致节点模型下出现tokenfield文件夹。 然后，我在webpack.mix.js中添加了以下行：

.copy('node_modules/tokenfield/dist/tokenfield.js', 'public/js')
.copy('node_modules/tokenfield/dist/tokenfield.css', 'public/css')

这导致我的公共文件夹中有tokenfieldjavascript和css。现在我只把我的观点包括如下：

<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<script src="{{ asset('js/tokenfield.js') }}"></script>

当我查看tokenfield.js时，它看起来像一个普通的javascript文件，它从以下内容开始：

module.exports =

---

那么，我在这里遗漏了什么呢？

大多数时候，您需要传输NPM包。这样做：

在主js中（例如app.js）

需要使用

窗口

以使其在全局范围内可用，因为传输的依赖项都是在一个范围内执行的，因此默认情况下不属于全局范围（并非所有模块都需要）

在您的主SCS中（例如，应用程序SCS）

---

然后，它应该与默认的混合样板一起工作

默认的混合样板是什么意思？我不太明白我必须在哪里复制tokenfield dist才能使这些引用生效？此时，我遇到以下错误：导入的文件找不到或不可读：tokenfield.Laravel附带默认文件使用的和文件（对于5.4之前的Laravel版本，这个想法是一样的，但使用gulp代替webpack.mix。这里的想法基本上是需要库。这样webpack就会知道如何将它包含在编译的资产中。因此，我通过使用：@import“node_modules/tokenfield/lib/scss/tokenfield”使css正常工作；但是javascript仍然存在一个问题。如果我只是将require（“tokenfield”）；添加到我的app.js中，那么我可以看到我编译的app.js中添加了一些与tokenfield相关的函数，但是当我尝试使用tokenfield时，会出现以下错误：“uncaughtreferenceerror:tokenfield未定义”。如果我只是包含此脚本”一切正常。有什么想法吗？通过app.js导入时可能会出现什么问题？@user1985273通过

require

包含的脚本，然后打包为，因此它们不在窗口范围内，您可以执行

window.Tokenfield=require（“Tokenfield”）

使

Tokenfield

库在全球可用。

module.exports =

window.Tokenfield =  require("tokenfield"); 

@import "node_modules/tokenfield/lib/scss/tokenfield"