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

Question

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

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

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

Answer 1

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

\n\n

资源

\n

\n
• select2.org
\n
• 新项目管理
\n

\n\n

此后，我找到了一个功能解决方案，其中包含与 OP 问题相关的详细信息。已验证并可与Laravel 8配合使用

\n

\n

1. 通过 npm 安装包

   \n

   npm install select2\n

   \n
\n

2. 编辑/resources/js/app.js to import javascript from package

   \n

   require(\'./bootstrap\');\n\n/* ... */\nrequire(\'select2\');  // Add this\n/* ... */\n\nAlpine.start();\n

   \n
\n

3. 编辑/resources/css/app.css to import styles from package

   \n

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

   \n
\n

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

   \n

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

   \n
\n

5. 运行 NPM

   \n

   npm run dev\nnpm run watch\n

   \n
\n

6. 我的案例中的 NPM 结果

   \n
\n

\n

\n

Laravel Mix v6.0.39
\n\xe2\x9c\x94 Compiled Successfully in 2982ms

\n

\xe2\x88\x9a Mix：3.05s编译成功
\nwebpack compiled successfully

\n

\n\n

测试

\n

根据配置文档

\n

超文本标记语言

\n

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

\n

JS

\n

<script type="text/javascript">\n  $(document).ready(function () {\n\n    $(\'.js-example-basic-single\').select2({\n      placeholder: \'Select2 testing purpose\'\n    });\n\n  });\n</script>\n

\n

使成为

\n

\n

Answer 2

运行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>