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

Question

我实际上正在试验 Laravel 和 npm，我很难在我的应用程序中使用 Bootstrap Tags Input 库（以及任何其他 npm 安装的库）。

看起来很简单，但我在这里遗漏了一些东西。

我做了什么：

安装依赖项

λ 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 我当前源文件的库

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

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

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

在我的 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 的最新稳定版？您的包裹似乎没有更新和维护。 Bootstrap5即将出炉

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

npm install bootstrap

Answer 2

事实证明插件的安装过程很好，我只是在我的开发环境中遇到了一个小问题。

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

Using npm installed JS/CSS lib on a Laravel application

javascript

npm

laravel

bootstrap-tags-input

laravel-mix

我做了什么：

安装依赖项

Link 我当前源文件的库

编译

结果

我有什么

我应该拥有的：

结论

更新