如何在laravel中導入外部js庫？

Question

我已經根據以下儀表板gentella從此GitHub Repo下載了基本模板。

我安裝inputmask庫使用以下命令：

npm install inputmask --save 

但閱讀和閱讀，我不知道這是整合到同一個HTML頁面的正確的一步，我讀到mix， saas，Compiling Assets (Laravel Mix)。

我嘗試用這樣的：

<script type="text/javascript" src="{{ URL::asset('js/inputmaskpath.js') }}"></script> 

這：

@section('scripts') 
    {{ Html::script(mix('assets/js/inputmask.js')) }} 
@endsection 

最後是，如何導入inputmask到我的HTML頁面，什麼是正確的路徑問題？

Answer 1

當您使用npm下載軟件包時，它們將被下載到node_modules文件夾中，並且它們不會（直接）被包含/加載到您的項目中。

您使用Laravel Mix處理資產編譯。因此，在您的情況下，您可以如下處理它：

首先在resources/assets/js中創建一個名爲app.js的JavaScript文件。添加以下代碼，以便能夠加載下載的軟件包

require('inputmask'); 

然後使用Laravel混合就可以編譯app.js爲您生產一個javasciript文件。在Laravel根文件夾修改webpack.mix.js以下

mix.js('./resources/assets/js/app.js', 'public/js/app.js'); 

現在，在你看來，你可以加載JavaScript文件，如下

<script src="{!! mix('js/app.js') !!}"</script> 

因此，在另一個下載的數據包的情況下，你安裝它首先是npm，然後在你的resources/assets/js/app.js文件中需要該軟件包。然後Laravel混合將負責將所有必需的軟件包合併成一個JavaScript文件。

對於Laravel Mix的更多信息，我建議您閱讀this documentation。 This tutorial也很有用。