如何在 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>

使成为