如何创建属于 VsCode 扩展一部分的 VsCode Notebook 渲染器？

Question

我正在尝试创建一个 VsCode 笔记本渲染器。

我已经有了一个提供很多功能的 VsCode 扩展。我正在尝试在渲染器中重用该功能。我正在遵循 https://github.com/microsoft/notebook-extension-samples?tab=readme-ov-file#readme 中的示例，但我试图避免使用 webpack 来构建渲染器，这应该是一部分我的 VSIX 包。

一切都构建得很好，但在运行时我收到此错误：

“打字稿参考错误：未定义导出”

有没有办法在不使用 webpack 的情况下构建这个渲染器？

渲染器代码是：

import type { ActivationFunction } from 'vscode-notebook-renderer';

export const activate: ActivationFunction = context => ({
  renderOutputItem(data, element) {
    element.innerText = JSON.stringify(data.json());
  }
});

和package.json：

   "notebookRenderer": [
      {
        "id": "My-notebook-renderer",
        "displayName": "My Notebook Renderer",
        "entrypoint": "./out/notebook/index.js",
        "mimeTypes": ["x-application/my-notebook-renderer"],
        "requiresMessaging": "optional"
      }
    ]

Answer 1

要在不使用 Webpack 的情况下创建 VS Code 笔记本渲染器作为 VS Code 扩展的一部分，您可以按照以下步骤操作：

1。确保依赖项就位： 确保扩展的 package.json 文件中存在所需的依赖项。这些依赖项应包括 vscode-notebook-renderer。

"dependencies": {
  "vscode": "^1.60.0",
  "vscode-notebook-renderer": "^1.60.0"
}

2。更新渲染器代码： 更新渲染器代码以直接导入必要的功能或模块，而不需要依赖 Webpack 来解决依赖关系。

import type { ActivationFunction, OutputItem } from 'vscode-notebook-renderer';

export const activate: ActivationFunction = context => ({
  renderOutputItem(data: OutputItem, element: HTMLElement) {
    element.innerText = JSON.stringify(data.json());
  }
});

3.注册笔记本渲染器： 将笔记本渲染器配置添加到扩展的 package.json 文件中。此配置指定笔记本渲染器的详细信息，例如其 ID、显示名称、入口点、MIME 类型和消息传递要求。

"contributes": {
  "notebookRenderer": [
    {
      "id": "My-notebook-renderer",
      "displayName": "My Notebook Renderer",
      "entrypoint": "./out/notebook/index.js",
      "mimeTypes": ["x-application/my-notebook-renderer"],
      "requiresMessaging": "optional"
    }
  ]
}

4。构建并打包扩展： 构建并打包 VS Code 扩展，确保笔记本渲染器代码和配置包含在生成的 VSIX 包中。

通过执行以下步骤，您可以创建 VS Code 笔记本渲染器作为 VS Code 扩展的一部分，而无需依赖 Webpack 来构建渲染器。这种方法允许您重用渲染器中的现有功能，并避免运行时出现“Typescript ReferenceError：导出未定义”问题。