如何将 node 模块导入到 svelte 组件中答案

【问题标题】：How can I import node module into svelte component如何将 node 模块导入到 svelte 组件中
【发布时间】：2021-01-25 13:32:56
【问题描述】：

我是 svelte 的新手，我正在尝试在我的依赖项中使用一个已安装的节点模块，称为动力滑块。在我的苗条组件的脚本标签中，我有：

import MomentumSlider from "../../node_modules/momentum-slider";
let slider = new MomentumSlider({
   el: ".ms-container",
});

在我的组件的 html 标记中，我有建议的标记，如教程中所示 https://scotch.io/tutorials/building-a-fancy-countdown-timer-with-momentumsliderjs

但是，我在浏览器控制台中收到 typeError：

总的来说，我是开发新手，我不确定这是动量滑块的问题还是我的错误。任何见解将不胜感激。

【问题讨论】：

标签： npm import module typeerror svelte

【解决方案1】：

不确定如何使用这个库，但你应该注意两件事。首先像下面这样导入你的包：

import MomentumSlider from "momentum-slider";

其次你需要在使用onMount挂载组件时初始化MomentumSlider类：

import { onMount } from "svelte";
import MomentumSlider from "momentum-slider";

let slider;

onMount(() => {
  slider = new MomentumSlider({ 
    el: ".ms-container"
  });
});

【讨论】：

非常感谢@johannchopin！您建议的更正起到了作用。我需要了解 svelte 中的生命周期函数。我在想 onMount 就像一个事件监听器，它监听组件何时被插入到 dom 中，只有这样 运行里面的代码。这可以解释为什么 MomentumSlider 实例无法查询 .container 元素，因为它在 html 文档中尚不存在。这种思路正确吗？
@stickleBrick 是的，你对你之前的问题给出了正确的解释+1
所以如果它解决了你的问题，请validate我的回答:)
抱歉，我投了赞成票，但不知道如何验证，我现在已经这样做了，它应该可以工作。

【解决方案2】：

如果你已经正确安装了包：npm install momentum-slider 该软件包在您的package.json 中列出。

如果适合，您只需导入： import MomentumSlider from "momentum-slider";

【讨论】：

非常感谢 nologin 的建议。我已按照您的建议修改了导入声明。动量滑块未在 package.json 文件中列出，但在 package-lock.json 文件中列出。我不确定这两个文件之间有什么区别，但在遵循@johannchopin 的建议使用 onMount 生命周期挂钩后，我成功了。
很好，解决了。导入已按照我的建议进行修复；) 上面的“onMount”很注意，DOM 已经创建。