在 Laravel 应用程序上使用 npm 安装的 JS/CSS 库

Posted 2023-03-14

【中文标题】在 Laravel 应用程序上使用 npm 安装的 JS/CSS 库

【英文标题】：Using npm installed JS/CSS lib on a Laravel application

【发布时间】：2020-11-18 11:28:50

【问题描述】：

我实际上正在尝试使用 Laravel 和 npm，但我很难在我的应用程序中使用 Bootstrap Tags Input lib（也与任何其他 npm 安装的 lib 一样）。

这似乎很容易，但我在这里遗漏了一些东西。

我做了什么：

安装依赖

λ npm i bootstrap-tagsinput

npm WARN sass-loader@8.0.2 requires a peer of node-sass@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN sass-loader@8.0.2 requires a peer of fibers@>= 3.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted "os":"darwin","arch":"any" (current: "os":"win32","arch":"x64")
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.3 (node_modules\watchpack\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted "os":"darwin","arch":"any" (current: "os":"win32","arch":"x64")

+ bootstrap-tagsinput@0.7.1
added 1 package from 2 contributors and audited 1088 packages in 4.143s
found 2 vulnerabilities (1 low, 1 high)
  run `npm audit fix` to fix them, or `npm audit` for details

λ npm install

npm WARN sass-loader@8.0.2 requires a peer of node-sass@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN sass-loader@8.0.2 requires a peer of fibers@>= 3.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted "os":"darwin","arch":"any" (current: "os":"win32","arch":"x64")
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.3 (node_modules\watchpack\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted "os":"darwin","arch":"any" (current: "os":"win32","arch":"x64")

audited 1088 packages in 3.31s
found 2 vulnerabilities (1 low, 1 high)
  run `npm audit fix` to fix them, or `npm audit` for details

将库链接到我当前的源文件

在我的 /resources/js/app.js 文件中：

require('bootstrap-tagsinput/src/bootstrap-tagsinput');

我尝试过window.BootstrapTagsInput = require('bootstrap-tagsinput/src/bootstrap-tagsinput'); 之类的东西，但效果并不好。

在我的 resources/css/app.scss 文件中：

// Bootstrap-tagsinput
@import '~bootstrap-tagsinput/src/bootstrap-tagsinput.css';
@import '~bootstrap-tagsinput/src/bootstrap-tagsinput-typeahead.css';

在我的 resources/views/layout/app.blade.php 中：

<div id="app" class="h-100">
    <input type="text" value="Amsterdam,Washington,Sydney,Beijing,Cairo" data-role="tagsinput" />
</div>

编译

npm run watch

 DONE  Compiled successfully in 4475ms                                                                                                                                                                                                                                                                             12:39:08 AM

       Asset     Size   Chunks             Chunk Names
/css/app.css  179 KiB  /js/app  [emitted]  /js/app
  /js/app.js  1.4 MiB  /js/app  [emitted]  /js/app

结果

我有什么

https://i.stack.imgur.com/PXMd4.png

我应该拥有的：

https://i.stack.imgur.com/0wZz0.png

结论

我已经在很多帖子中搜索了我的问题的答案，但我的情况似乎没有任何效果。 非常感谢任何愿意帮助我的人，非常感谢????。

更新

好的，原来安装过程很好，终于一切顺利，抱歉耽误您的时间？？？？

【参考方案1】：

为什么不直接使用最新的稳定版 Bootstrap？您的包裹似乎不是最新的和维护的。 Bootstrap 5 即将推出。

https://getbootstrap.com/docs/4.5/components/badge/

npm install bootstrap

【讨论】：

嗨，卡尔，感谢您的回复。事实上，这与引导程序无关，因为它不提供“标签输入”组件（您的链接是关于徽章的，而不是我正在搜索的内容?）。仅供参考，我目前正在运行"bootstrap": "^4.0.0",，并且我尝试安装的“bootstrap-taginput”JQuery 插件不会在我的项目中停留很长时间。但是我无法正确安装它的事实让我很兴奋......

您的标签包不支持 Bootstrap 4.*。也许你需要的是select2.org

【参考方案2】：

原来插件的安装过程还不错，只是我的开发环境出了点小问题。