markdown-it-textual-uml 和 vitepress-sidebar 能共存吗？

huangapple
go评论102阅读模式
英文:

markdown-it-textual-uml and vitepress-sidebar coexistence possible?

问题

I am trying to use both markdown-it-textual-uml and vitepress-sidebar plugins in my project.

我正在尝试在我的项目中同时使用 markdown-it-textual-uml 和 vitepress-sidebar 插件。

I started including markdown-it-textual-uml and all was well.

我开始包括 markdown-it-textual-uml，一切都正常。

Then I tried to add vitepress-sidebar and apparently, being an ESM module, it needs "type": "module" in package.json. Unfortunately this broke markdown-it-textual-uml which now complains about:

然后我尝试添加 vitepress-sidebar，显然，由于它是一个 ESM 模块，它需要在 package.json 中设置 "type": "module"。不幸的是，这破坏了 markdown-it-textual-uml，现在它报错：

Error: Dynamic require of "file:///home/mcon/projects/@@SITE/node_modules/markdown-it-textual-uml/src/index.js" is not supported

错误：不支持动态请求 "file:///home/mcon/projects/@@SITE/node_modules/markdown-it-textual-uml/src/index.js"

My tentative and very partial config.ts is:

我的初步且非常部分的 config.ts 如下：

  1. import { defineConfig } from 'vitepress'
  2. import { generateSidebar } from 'vitepress-sidebar'
  4. export default defineConfig({
  5.   title: "Mauro Condarelli personal site",
  6.   description: "A random collection of unrelated projects",
  7.   themeConfig: {
  8.     nav: [
  9.       { text: 'Home', link: '/' },
  10.       { text: 'Examples', link: '/markdown-examples' }
  11.     ],
  13.     sidebar: generateSidebar({
  14.       // use defaults
  15.     }),
  17.     socialLinks: [
  18.       { icon: 'github', link: 'https://github.com/vuejs/vitepress' }
  19.     ]
  20.   },
  21.   
  22.   markdown : {
  23.     config: (md) => {
  24.       md.use(require("markdown-it-textual-uml"));
  25.       md.use(require("markdown-it-deflist"));
  26.     }
  27.   }
  29. })

while my almost-default package.json is:

而我的几乎默认的 package.json 如下：

  1. {
  2.   "type": "module",
  3.   "scripts": {
  4.     "docs:dev": "vitepress dev vitepress",
  5.     "docs:build": "vitepress build vitepress",
  6.     "docs:preview": "vitepress preview vitepress"
  7.   },
  8.   "dependencies": {
  9.     "markdown-it-deflist": "^2.1.0",
  10.     "markdown-it-textual-uml": "^0.12.0"
  11.   },
  12.   "devDependencies": {
  13.     "@types/node": "^20.3.2",
  14.     "vitepress-sidebar": "^1.8.1"
  15.   }
  16. }

How can I fix this (if at all possible)?

如何修复这个问题（如果可能的话）？

Note: while I'm an experienced programmer I'm not deep in JavaScript and friends, I'm just learning and I still don't really grok it yet.

注意：虽然我是一位有经验的程序员，但我对 JavaScript 等内容不是很精通，我正在学习，但我仍然不太理解它。

英文:

I am trying to use both markdown-it-textual-uml and vitepress-sidebar plugins in my project.

I started including markdown-it-textual-uml and all was well.

Then I tried to add vitepress-sidebar and apparently, being an ESM module, it needs "type": "module" in package.json. Unfortunately this broke markdown-it-textual-uml which now complains about:

  1. Error: Dynamic require of "file:///home/mcon/projects/@@SITE/node_modules/markdown-it-textual-uml/src/index.js" is not supported

My tentative and very partial config.ts is:

  1. import { defineConfig } from 'vitepress'
  2. import { generateSidebar } from 'vitepress-sidebar'
  4. export default defineConfig({
  5.   title: "Mauro Condarelli personal site",
  6.   description: "A random collection of unrelated projects",
  7.   themeConfig: {
  8.     nav: [
  9.       { text: 'Home', link: '/' },
  10.       { text: 'Examples', link: '/markdown-examples' }
  11.     ],
  13.     sidebar: generateSidebar({
  14.       // use defaults
  15.     }),
  17.     socialLinks: [
  18.       { icon: 'github', link: 'https://github.com/vuejs/vitepress' }
  19.     ]
  20.   },
  21.   
  22.   markdown : {
  23.     config: (md) => {
  24.       md.use(require("markdown-it-textual-uml"));
  25.       md.use(require("markdown-it-deflist"));
  26.     }
  27.   }
  29. })

while my almost-default package.json is:

  1. {
  2.   "type": "module",
  3.   "scripts": {
  4.     "docs:dev": "vitepress dev vitepress",
  5.     "docs:build": "vitepress build vitepress",
  6.     "docs:preview": "vitepress preview vitepress"
  7.   },
  8.   "dependencies": {
  9.     "markdown-it-deflist": "^2.1.0",
  10.     "markdown-it-textual-uml": "^0.12.0"
  11.   },
  12.   "devDependencies": {
  13.     "@types/node": "^20.3.2",
  14.     "vitepress-sidebar": "^1.8.1"
  15.   }
  16. }

How can I fix this (if at all possible)?

Note: while I'm an experienced programmer I'm not deep in JavaScript and friends, I'm just learning and I still don't really grock it yet.

答案1

得分: 0

为什么你需要它？只需导入它：

  1. import { defineConfig } from 'vitepress';
  2. // @ts-ignore
  3. import markdownItTextualUml from 'markdown-it-textual-uml';
  5. export default defineConfig({
  6.   markdown: {
  7.     config(md) {
  8.       md.use(markdownItTextualUml);
  9.     },
  10.   },
  11. })

即使在你的 package.json 中设置了 type: module，这也能正常工作。

演示: https://stackblitz.com/edit/vite-i24rds

英文:

Why are you requiring it? Just import it:

  1. import { defineConfig } from 'vitepress';
  2. // @ts-ignore
  3. import markdownItTextualUml from 'markdown-it-textual-uml';
  5. export default defineConfig({
  6.   markdown: {
  7.     config(md) {
  8.       md.use(markdownItTextualUml);
  9.     },
  10.   },
  11. })

This would work even if you set type: module in your package.json.

Demo: https://stackblitz.com/edit/vite-i24rds

huangapple
  • 本文由 发表于 2023年6月29日 17:42:57
  • 转载请务必保留本文链接：https://go.coder-hub.com/76579893.html
  • vite
  • vitepress
  • vue.js
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定