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

Question

我实际上正在尝试使用 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

结论

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

更新

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

Answer 1

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

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

npm install bootstrap

Answer 2

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