包括令牌包到laravel與npm

首先，我加入以下行的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')

這導致我不得不tokenfield JavaScript和CSS在我的公用文件夾。現在我只是包括在我看來這樣的人：

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

但是，這個doesent工作。我得到以下錯誤：

module.exports =

所以我在做什麼在這裏失蹤：

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

，當我看着它doesent看起來像一個普通的JavaScript文件的tokenfield.js，它開始？

來源

2017-11-10 user1985273

大多數情況下您需要轉儲NPM包。這樣做：

在你的主JS需求（如app.js）

window.Tokenfield = require("tokenfield");

window，以使其在全球acessible因爲transpiled的依賴都在iife內執行使用，因此不屬於默認情況下全局範圍（這不是所有模塊都需要）。

在你的主SCSS（例如app.scss）

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

那麼就應該使用默認的混合樣板工作。

來源

2017-11-10 20:46:24 apokryfos

你是什麼意思默認混合樣板？我不太明白，我必須在哪裏複製tokenfield dist以供參考工作？目前我得到以下錯誤：文件導入未找到或不可讀：令牌字段。 – user1985273

Laravel附帶[this JS]（https://github.com/laravel/laravel/blob/master/resources/assets/js/app.js）和[this scss]（https://github.com/laravel /laravel/blob/master/resources/assets/sass/app.scss）文件默認使用[webpack.mix.js]（https://github.com/laravel/laravel/blob/master/webpack.mix。 js）文件（這個想法與5.4之前版本的Laravel相同，但是使用gulp代替webpack.mix。這裏的想法基本上是需要庫的，這樣webpack就會知道它包含在你的編譯資源中。 – apokryfos

所以我通過使用：@import「node_modules/tokenfield/lib/scss/tokenfield」獲得了css的工作方式;但是javascript仍然存在問題，如果我只需要添加require（「tokenfield」）到我的app.js，那麼我可以看到我編譯的app.js添加了一些與tokenfield相關的函數，但是當我嘗試使用tokenfield時，出現以下錯誤：「Uncaught ReferenceError：Tokenfield is not defined」。如果我只包含這個sc ript改爲「https://github.com/KaneCohen/tokenfield/blob/master/dist/tokenfield.min.js」一切正常。任何想法什麼可能是通過app.js inculding時的問題？ – user1985273

包括令牌包到laravel與npm

回答

相關問題