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

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

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

我有标准的 Meteor 1.12.1 + Svelte 3 应用程序结构（与 this one 非常相似），引导程序 5.0.0-beta1 通过meteor 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 不起作用。

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

解决方法

我没有使用 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 组件中。