meteor - 如何将 bootstrap 5 javascript 插件导入 Meteor-Svelte 项目

问题描述

我正在为一个项目使用 Meteor-Svelte-Bootstrap 组合，但我无法使 bootstrap 的 javascript 插件工作。

我有标准的 Meteor 1.12.1 + Svelte 3 应用程序结构（与这个非常相似），引导 5.0.0-beta1 通过流星 npm 作为节点模块安装。我在 client/main.scss 文件中通过 @import 导入 bootstrap.scss：

@import "../node_modules/bootstrap/scss/bootstrap.scss";

到目前为止一切正常。但我找不到导入某些组件所需的引导 javascript 插件的正确方法（例如可折叠导航栏）。

我尝试了以下所有方法但均未成功：

<script src="...">在我client/main.html的 src 属性中，我尝试了所有 -node_modules/bootstrap/dist/js/bootstrap*.js文件和 CDN https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js链接
我的组件中的相同内部<svelte:head>元素imports/ui/App.svelte（我正在尝试直接在此组件中使用引导 javascript）
```
<svelte:head> 
    <script src="..."></script> 
</svelte:head>
```
import 'bootstrap';在<script>我的imports/ui/App.svelte组件的元素内
import 'bootstrap';在我的client/main.js文件里面
可能还有更多……

这些都不起作用。当我尝试导入 node_modules/bootstrap/dist/js/bootstrap*.js 文件时，导入文件的第一个字符出现语法错误（奇怪）。当我使用 CDN 或导入引导程序时，没有显示错误，但引导程序 javascript 不起作用。

有人可以建议这样做的正确方法吗？谢谢。

标签： meteorsvelte-3bootstrap-5

我没有使用 Meteor，但我使用的是 Svelte 3、Bootstrap 5、Rollup。通过使用导入，我能够使导航栏下拉菜单正常工作。一个重要的部分是确保您安装了 @popperjs/core 包。

npm i bootstrap @popper/core

然后，在尝试使用它之前，您需要在父组件中包含 bootstrap 的导入。我正在使用一个页面槽，其中包含我的导航栏组件，所以我的页面看起来像这样。

<script>
  import 'bootstrap';
  import '../components/bootstrap-custom.scss';
  import PageSlot from '../components/PageSlot.svelte'
  export let name;
</script>

<style>
</style>

<PageSlot>
  <h1>Hello {name}!</h1>
  <p>Main Svelte-Page</p>
  <button class="btn btn-primary">Button</button>
</PageSlot>

一个小的免责声明，这不是一个生产设置，而是一个概念验证项目，所以可能有人对此有更好的配置，但这确实有效。还应该提到有一个库 sveltestrap 将引导组件包装在 svelte 组件中。

meteor - 如何将 bootstrap 5 javascript 插件导入 Meteor-Svelte 项目

问题描述

解决方案

推荐阅读