如何在 Laravel 應用程序中使用 npm 安裝包？

Question

我想在我的 Laravel 5 應用程序中使用select2包。

我使用npm install select2安裝它並運行npm run dev 。 它出現在我的node_modules文件夾中。

但實際上，我怎么參閱文件-選擇2包的JS和SCSS在我app.blade.php ？

Answer 1

運行npm run watch ，因為它跟蹤.js的所有更改。

在app.js中添加

require('select2/dist/js/select2');

在app.blade.php示例中：

<div>            
   <select class="js-select2 css-select2-50">
                    <option>1</option>
   </select>
</div>

Answer 2

我建議對這個線程給出一個答案，因為它沒有被標記為已解決，盡管給出了答案，但在閱讀本文時它並沒有讓我解決問題。

---

資源

• 選擇2.org
• 新產品經理

---

從那以后，我找到了一個功能解決方案，這里是與 OP 問題相關的詳細信息。 已驗證並與Laravel 8一起使用

1. 通過 npm 安裝包

   npm install select2

2. 編輯/resources/js/app.js以從包中導入 javascript

    require('./bootstrap'); /* ... */ require('select2'); // Add this /* ... */ Alpine.start();

3. 編輯/resources/css/app.css以從包中導入樣式

   /* ... */ @import 'select2'; // Add this

4. 編輯/resources/js/bootstrap.js以啟用.select2();

    window._ = require('lodash'); /* ... */ window.select2 = require('select2'); // Add this

5. 運行 NPM

    npm run dev npm run watch

6. 在我的情況下，NPM 結果

Laravel Mix v6.0.39
✔ 2982ms 編譯成功

√ Mix：3.05s編譯成功
webpack 編譯成功

---

測試

根據配置文檔

HTML

<input type="text" class="form-control js-example-basic-single">

JS

<script type="text/javascript">
  $(document).ready(function () {

    $('.js-example-basic-single').select2({
      placeholder: 'Select2 testing purpose'
    });

  });
</script>

使成為