Javascript 试图在vuepress组件中要求或导入npm安装的模块

我的vuepress站点中有“npm安装-S tabletop”，我正在努力导入或需要tabletop模块

我对webpack和vuepress的内部结构几乎一无所知（这是我的第一个vuepress项目）

为朋友建立一个静态网站，但计划使用google电子表格来保存当前的工作机会，并使用tabletop.js（）将行条目吸收到JSON中，然后过滤并循环到vuepress循环中

然而，我在这个过程的第一步失败了。。。在vuepress容器的标记中使用tabletop.js

大家好，我是vuepress和webpack的新手，尝试使用javascript库让我头疼。我熟悉javascript，编写自己的脚本，并在原始html网站中加载javascript库。但我真的被困在试图找出require语句的相对路径应该在哪里

我已经尝试了npm安装和插入config.js头（出现在devtools中）下面的选项1和/或2

使用安装tabletop.js

2.添加到config.js头部的链接

module.exports = {

    title: 'Starlife Company Services Ltd',
    description: 'Cleaning and Security services across the South East',

    head: [
    ['link', { type: 'text/javscript', src: 'https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.5.1/tabletop.min.js' }]
  ]
}

在组件中的标记中添加require

-或-

我尝试过各种相关途径

'tabletop'
'./tabletop'
'../../tabletop'
'../../node_modules/tabletop'

使用require或import或HEAD-inserted sript标记均无效

没有一条路可以走

vue.runtime.esm.js?4bfb:619 [Vue warn]: Failed to resolve async component: function () {
  return Promise.all(/*! import() */[__webpack_require__.e(20), __webpack_require__.e(29)]).then(__webpack_require__.bind(null, /*! ./src/.vuepress/components/joblist */ "./src/.vuepress/components/joblist.vue"));
}
Reason: ReferenceError: Tabletop is not defined

有一个相对路径，我得到

client?cae4:159 ./src/.vuepress/components/joblist.vue?vue&type=script&lang=js& (./node_modules/cache-loader/dist/cjs.js??ref--3-0!/usr/local/lib/node_modules/vuepress/node_modules/babel-loader/lib??ref--3-1!./node_modules/cache-loader/dist/cjs.js??ref--0-0!/usr/local/lib/node_modules/vuepress/node_modules/vue-loader/lib??vue-loader-options!./src/.vuepress/components/joblist.vue?vue&type=script&lang=js&)
Module not found: Error: Can't resolve '../../tabletop' in '/home/pi/GitHub/starlife-website/src/.vuepress/components'
errors @ client?cae4:159
(anonymous) @ socket.js?e29c:47
sock.onmessage @ SockJSClient.js?0a33:58
EventTarget.dispatchEvent @ sockjs.js?fb87:170
(anonymous) @ sockjs.js?fb87:887
SockJS._transportMessage @ sockjs.js?fb87:885
EventEmitter.emit @ sockjs.js?fb87:86
WebSocketTransport.ws.onmessage @ sockjs.js?fb87:2961
vue.runtime.esm.js?4bfb:619 [Vue warn]: Failed to resolve async component: function () {
  return __webpack_require__.e(/*! import() */ 20).then(__webpack_require__.bind(null, /*! ./src/.vuepress/components/joblist */ "./src/.vuepress/components/joblist.vue"));
}
Reason: Error: Cannot find module '../../tabletop'

导入或require路径的每一个变化似乎都会导致相同的两个错误：

错误：找不到模块“../../tabletop”

-或-

原因：ReferenceError:未定义桌面

几个小时后我迷路了。。。花了数小时在谷歌上搜索示例，没有一个是基于vuepress的，也没有一个是有用的

由于缺乏足够的知识来浏览网页，并且没有其他选择，我的项目遇到了障碍，我看不到自己的出路

任何想法都非常感谢

有关项目的当前状态，请访问

请参见上文以及本文件中的“提交”

https://github.com/kingdom-values-clients/starlife-website/tree/345d55eed65f110626a9e4d3bcadae1efcca0cbc

错误：找不到模块“../../tabletop”

-或-

原因：ReferenceError:未定义桌面

---

我知道我可能在这里做了一些愚蠢的事情，但我无法理解，也无法在vuepress组件中找到任何远程类似的帮助。

您解决过这个问题吗？我似乎不需要任何东西，即使我使用文件的绝对路径。

'tabletop'
'./tabletop'
'../../tabletop'
'../../node_modules/tabletop'

vue.runtime.esm.js?4bfb:619 [Vue warn]: Failed to resolve async component: function () {
  return Promise.all(/*! import() */[__webpack_require__.e(20), __webpack_require__.e(29)]).then(__webpack_require__.bind(null, /*! ./src/.vuepress/components/joblist */ "./src/.vuepress/components/joblist.vue"));
}
Reason: ReferenceError: Tabletop is not defined

client?cae4:159 ./src/.vuepress/components/joblist.vue?vue&type=script&lang=js& (./node_modules/cache-loader/dist/cjs.js??ref--3-0!/usr/local/lib/node_modules/vuepress/node_modules/babel-loader/lib??ref--3-1!./node_modules/cache-loader/dist/cjs.js??ref--0-0!/usr/local/lib/node_modules/vuepress/node_modules/vue-loader/lib??vue-loader-options!./src/.vuepress/components/joblist.vue?vue&type=script&lang=js&)
Module not found: Error: Can't resolve '../../tabletop' in '/home/pi/GitHub/starlife-website/src/.vuepress/components'
errors @ client?cae4:159
(anonymous) @ socket.js?e29c:47
sock.onmessage @ SockJSClient.js?0a33:58
EventTarget.dispatchEvent @ sockjs.js?fb87:170
(anonymous) @ sockjs.js?fb87:887
SockJS._transportMessage @ sockjs.js?fb87:885
EventEmitter.emit @ sockjs.js?fb87:86
WebSocketTransport.ws.onmessage @ sockjs.js?fb87:2961
vue.runtime.esm.js?4bfb:619 [Vue warn]: Failed to resolve async component: function () {
  return __webpack_require__.e(/*! import() */ 20).then(__webpack_require__.bind(null, /*! ./src/.vuepress/components/joblist */ "./src/.vuepress/components/joblist.vue"));
}
Reason: Error: Cannot find module '../../tabletop'

https://github.com/kingdom-values-clients/starlife-website/tree/345d55eed65f110626a9e4d3bcadae1efcca0cbc