使用npm包含tokenfield包到laravel

Question

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

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

"tokenfield": "^0.8.2",

这导致了node-models下的tokenfield文件夹。 然后我将以下行添加到webpack.mix.js：

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

这导致我在我的公共文件夹中使用了tokenfield javascript和css。现在我只是在我看来包括那些：

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

但是这项工作。我收到以下错误：

Uncaught ReferenceError: module is not defined at tokenfield.js:1

当我查看tokenfield.js时，它看起来像一个普通的javascript文件，它始于：

module.exports =

那我在这里想念的是什么？

Answer 1

大多数情况下，您需要转换NPM包。这样做：

在你的主要js（例如app.js）

window.Tokenfield =  require("tokenfield"); 

需要使用

window才能使其全局可访问，因为已转换的依赖项都在iife内执行，因此默认情况下不属于全局范围（这对所有人来说都不是必需的）模块）。

在您的主要SCSS（例如app.scss）

中

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

然后它应该使用默认的混合样板。