如何在 laravel 应用程序中使用 npm 安装包？

Posted 2023-05-07

【中文标题】如何在 laravel 应用程序中使用 npm 安装包？

【英文标题】：How to use npm installed package in laravel application?

【发布时间】：2019-02-23 10:49:44

【问题描述】：

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

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

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

【问题讨论】：

1.你都尝试了些什么？ 2.您是否寻找过解决方案？

【参考方案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>

【讨论】：

是的，虽然npm run watch，只是将您的更新保存在app.js 会自动重新编译app.js 以添加模块。

男人！感谢您提供此解决方案。我已经在这几个小时了。 YouTube，谷歌没有人一步一步地显示说明。再次感谢！

这个线程很旧，但更多的细节会很有帮助。我通过 npm 安装了 tablesorter，虽然我确实在我的 node_modules 文件夹中看到了它，并将 require('tablesorter/dist/js/jquery.tablesorter.combined.min.js'); 添加到 app.js 文件中，但我不明白我应该如何将脚本文件导入我的 html。

【参考方案2】：

我建议对此线程进行回答，因为它没有标记为已解决，并且尽管给出了答案，但在阅读本文时它不允许我解决问题。

---

资源

select2.org npm

---

我已经找到了一个功能解决方案，这里是与 OP 问题相关的详细信息。已验证并使用 Laravel 8

通过 npm 安装包

npm install select2

编辑 /resources/js/app.js 以从包中导入 javascript

require('./bootstrap');

/* ... */
require('select2');  // Add this
/* ... */

Alpine.start();

编辑 /resources/css/app.css 以从包中导入样式

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

编辑/resources/js/bootstrap.js以启用.select2();

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

运行 NPM

npm run dev
npm run watch

NPM 结果在我的情况下

Laravel Mix v6.0.39 ✔ 2982ms编译成功

√ Mix：3.05s编译成功 webpack 编译成功

---

测试

根据configuration documentation

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>

渲染

【讨论】：

这应该是公认的答案。