如何在Laravel应用程序中使用通过npm安装的包？

Question

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

我使用 npm install select2 安装了它，并且也运行了 npm run dev。它出现在我的 node_modules 文件夹中。

但是，我该如何在我的 app.blade.php 文件中实际引用 select2 包的js和scss文件呢？

- Raj

---

1. 你目前尝试了什么？
2. 你是否已经搜索过解决方案？

- Kleskowy

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>

- Ekaterina Dvuzhilova

---

是的，当你执行 npm run watch 命令时，只要保存了 app.js 文件的更新，就会自动重新编译 app.js 并添加模块。 - Adro

哇！谢谢你提供的解决方案。我已经在这上面花了好几个小时了，YouTube、Google都没有提供逐步说明。再次感谢！ - No One

这个帖子很老了，但更多的细节会非常有帮助。我通过npm安装了tablesorter，并且虽然在node_modules文件夹中看到它，并已将require('tablesorter/dist/js/jquery.tablesorter.combined.min.js');添加到app.js文件中，但我不知道应该如何将脚本文件导入到HTML中。 - David Tran

Answer 2

我建议回答这个问题，因为它没有被标记为已解决的，并且尽管给出了答案，但在阅读此内容时，它并没有让我解决问题。

---

资源

• select2.org
• npm

---

我已经找到了一个可行的解决方案，以下是与OP问题相关的详细信息。经过验证，在Laravel 8上运行。

1. Install package via npm

   npm install select2
   

2. Edit /resources/js/app.js to import javascript from package

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

3. Edit /resources/css/app.css to import styles from package

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

4. Edit /resources/js/bootstrap.js to enable the use of .select2();

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

5. Run NPM

   npm run dev
   npm run watch
   

6. NPM result in my case

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>

渲染

- w3spi

---

这应该是被接受的答案。 - aasutossh