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

Question

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

我有标准的 Meteor 1.12.1 + Svelte 3 应用程序结构（非常类似于 this one），bootstrap 5.0.0-beta1 通过 meteor npm 安装为节点模块。我在我的 client/main.scss 文件中通过 @import 导入 bootstrap.scss：

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

到目前为止一切正常。但是我找不到导入某些组件所需的 bootstrap 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 link
我的 imports/ui/App.svelte 组件中的相同内部 <svelte:head> 元素（我试图在该组件中直接使用 bootstrap javascript）
```
<svelte:head> 
    <script src="..."></script> 
</svelte:head>
```
import 'bootstrap'; 在我的 imports/ui/App.svelte 组件的 <script> 元素中
import 'bootstrap'; 在我的 client/main.js 文件中
可能还有更多...

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

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

Answer 1

我没有使用 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 将 bootstrap 组件包装在 svelte 组件中。

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

How to import bootstrap 5 javascript plugins into Meteor-Svelte project

meteor

svelte-3

bootstrap-5