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

Question

I'm actually experimenting with Laravel and npm, and i struggle to use Bootstrap Tags Input lib inside my app (also as any other npm installed lib).

It seems pretty easy but i'm missing something here.

What i did:

Install dependencie

λ 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

Link the lib to my current source files

Inside my /resources/js/app.js file:

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

I've tried stuff like window.BootstrapTagsInput = require('bootstrap-tagsinput/src/bootstrap-tagsinput'); Did not work any better.

Inside my resources/css/app.scss file:

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

In my 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>

Compile

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

Result

What i have

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

What i'm supposed to have:

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

Conclusion

I've searched the answer to my question on many posts already, but nothing seems to work on my case. Many thanks to anybody who will try to help me on this, really appreciate.

Update

Ok, turns out that the installation process was good, everything is finally working well, sorry for your time.

Answer 1

Why not just use the latest stable version of Bootstrap? Your package doesn't seem to be up to date and maintained. Bootstrap 5 will be coming out soon.

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

npm install bootstrap

Answer 2

Turns out that the installation process of the plugin was good, and I simply had a minor issue in my dev environment.