如何在我的 Astro 组件中导入和使用 npm 包？

Question

我已从 npm 将KeenSlider安装到我的项目中，但Uncaught ReferenceError: KeenSlider is not defined在尝试在我的 Astro 组件中使用该包时，我不断遇到。

这是我的 astro 文件：

---
import KeenSlider from "keen-slider";
---
<div id="carousel" class="keen-slider">
  <div class="keen-slider__slide">
     <h4>1</h4>
  </div>
  <div class="keen-slider__slide">
     <h4>2</h4>
  </div>
</div>
<script lang="js">
   var slider = new KeenSlider("#carousel", {
      slidesPerView: 1.25,
      spacing: 30,
   });
</script>

我也尝试过import KeenSlider from "keen-slider", and import { useKeenSlider } from "keen-slider"（带括号和不带括号），但没有运气。

我没有对我的astro.config.mjs文件进行任何更改，因为我的理解是我不需要 - 我所要做的就是通过 npm 安装，并在我正在使用它的组件中引用它，Astro 会处理休息。

但显然我做错了什么。那么我该如何正确定义“KeenSlider”呢？

Answer 1

可以使用标准 HTML 标签添加客户端脚本<script>。Astro 将处理和捆绑这些标签，添加对导入 npm 模块、编写 TypeScript 等的支持。

这意味着在您的示例中，keen-slider导入应移至<script>标签。

<script>
import KeenSlider from "keen-slider";

const slider = new KeenSlider("#carousel", {
    slidesPerView: 1.25,
    spacing: 30,
});
</script>

您还可以在这里找到一个工作示例，我keen-slider也导入了 CSS。