时间戳

首页 > 解决方案 > 在 Laravel 应用程序上使用 npm 安装的 JS/CSS 库

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

问题描述

我实际上正在尝试使用 Laravel 和 npm，并且我很难在我的应用程序中使用Bootstrap 标签输入库（也与任何其他 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

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

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

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

我试过像window.BootstrapTagsInput = require('bootstrap-tagsinput/src/bootstrap-tagsinput');没有更好的东西。

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

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

在我的资源/视图/布局/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

结论

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

更新

好的，事实证明安装过程很好，一切都很好，对不起您的时间。

标签： javascriptlaravelnpmlaravel-mixbootstrap-tags-input

解决方案

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

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

npm install bootstrap

推荐阅读