# @akrc/vite-plugin-monaco-editor 中文文档

规范地址：https://npmcn.com/package/%40akrc/vite-plugin-monaco-editor/

版本：3\.0\.0
npm 元数据更新时间：2024-05-06T03:06:45.347Z
中文译文更新时间：2026-11-06T03:23:40.759Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40akrc/vite-plugin-monaco-editor
原文对照：https://npmcn.com/package/%40akrc/vite-plugin-monaco-editor/?lang=original
项目主页：https://github.com/akarachen/vite-plugin-monaco-editor#readme
源码仓库：https://github.com/akarachen/vite-plugin-monaco-editor

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：12.9 MB，16 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：monaco-editor \>=0\.33\.0
- 首次发布：2023-12-06T04:00:57.748Z
- 最新版本发布：2024-05-06T03:06:45.171Z
- 近 30 天下载量：5739（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：3（近 12 个月 0 个）

## 中文简介

摩纳哥编辑器的 Vite 插件Name

## 安装

```sh
npm install @akrc/vite-plugin-monaco-editor
```

也可以使用：`pnpm add @akrc/vite-plugin-monaco-editor`、`yarn add @akrc/vite-plugin-monaco-editor`、`bun add @akrc/vite-plugin-monaco-editor`

## README

# Vite 插件摩纳哥编辑器

简化装入的插件 [摩纳哥编辑器](https://github.com/Microsoft/monaco-editor) 与 [维特](https://vitejs.dev/)。 。 。 .

-   它使用Vite特定插件钩子: CconfigResolved,配置Server,变换IndexHtml.
-   它用起重机将工人捆绑起来 `node_modules/.monaco` 目录,通过 `server.middlewares` 捆绑工人的代理 http 服务器 .

## 安装

```ts
// make sure you have it installed monaco-editor.

yarn add vite-plugin-monaco-editor -D

// or
npm install --save-dev vite-plugin-monaco-editor
```

## 使用

-   `vite.config.ts`数字 :

```ts
import { defineConfig } from 'vite';
import monacoEditorPlugin from 'vite-plugin-monaco-editor';

export default defineConfig({
  plugins: [monacoEditorPlugin()],
});
```

### 导入所有monaco 函数

-   `index.ts`数字 :

```ts
import * as monaco from 'monaco-editor';

monaco.editor.create(document.getElementById('container'), {
  value: 'console.log("Hello, world")',
  language: 'javascript',
});
```

### 导入 monaco 函数的一部分

这个 `import * as monaco from 'monaco-editor'` 正在导入摩纳哥编辑器的所有特性和语言。 假设您只需要部分特性和语言:

-   `customMonaco.ts`

```ts
import 'monaco-editor/esm/vs/editor/editor.all.js';
import 'monaco-editor/esm/vs/editor/standalone/browser/accessibilityHelp/accessibilityHelp.js';

import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';

export { monaco };
```

完整的进口清单: [自定义摩纳哥特斯](https://npmcn.com/package/%40akrc/vite-plugin-monaco-editor/test/src/mona/customMonaco.ts)

-   `index.ts`

```ts
import { monaco } from './customMonaco.ts';
monaco.editor.create(document.getElementById('container'), {
  value: 'console.log("Hello, world")',
  language: 'javascript',
});
```

## 选项

-   `languageWorkers` (单位:千美元)`string[]`) - 仅包含所支持的语言工人的子集.
    
    -   默认值 : \['editor Worker Service','cs','html','json','typescript'\].
    -   假设只使用cs工人(编辑工人服务必须包括基础工人),您可以设置 \['编辑工人服务','cs'\]
-   `customWorkers` (单位:千美元)`IWorkerDefinition[]`\- 包括你的定制工人.
    
    -   默认值: \[\]
    -   示例值 : `[{label: "graphql", entry: "monaco-graphql/esm/graphql.worker"}]`,该 `entry` 是节点单元中的相对路径 或者你可以设置绝对的路径.
-   `publicPath` (单位:千美元)`string`) - 为工人脚本自定义的公用路径,覆盖此插件生成的文件将从中服务的公共路径. 或者你可以设置CDN,比如 `https://unpkg.com/vite-plugin-monaco-editor@1.0.5/cdn`
    
    -   默认值 : `monacoeditorwork`
-   `globalAPI` (单位:千美元)`boolean`) - 指定编辑器API是否应该通过环球显示 `monaco` 对象或非对象。 此选项适用于: `0.22.0` 和最新版本 `monaco-editor`。自 `0.22.0`,Monaco编辑器的无害环境管理版本不再定义一个全球 `monaco` 对象,除非 `global.MonacoEnvironment = { globalAPI: true }` 设定( e)[更改日志](https://github.com/microsoft/monaco-editor/blob/main/CHANGELOG.md#0220-29012021)) (中文(简体) ).
    
    -   默认值 : `false`。 。 。 .
-   `customDistPath` (单位:千美元)`(root: string, buildOutDir: string, base: string) => string`\- 自定义回调返回工人路径
    
-   `forceBuildCDN` (单位:千美元)`boolean`) - 如果您使用 CDN, 默认会跳过该构建 。 如果您想要生成唤醒器, 设置为真
    
    -   默认值 : `false`

有些语言共用同一个网络工人. 如果包含下列一种语言,您还必须包括负责即时处理其共用工人的语言:

| 语言 | 辩护人 |
| --- | --- |
| 日记 | 类型标记 |
| 手柄栏 | (简体中文) |
| 少一点 | 密码 |

## 常见问题

### @akrc/vite-plugin-monaco-editor 是什么？

摩纳哥编辑器的 Vite 插件Name

### 如何安装 @akrc/vite-plugin-monaco-editor？

在项目目录运行 npm install @akrc/vite-plugin-monaco-editor，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：monaco-editor（\>=0\.33\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @akrc/vite-plugin-monaco-editor 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @akrc/vite-plugin-monaco-editor 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @akrc/vite-plugin-monaco-editor 可以商用吗？

@akrc/vite-plugin-monaco-editor 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @akrc/vite-plugin-monaco-editor 的下载量有多少？

根据 npm 官方下载统计，@akrc/vite-plugin-monaco-editor 在 2026/10/06 – 2026/11/04 这 30 天内被下载 5,739 次，日均约 191 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @akrc/vite-plugin-monaco-editor 还在维护吗？

最新版本 3\.0\.0 发布于 2024/05/06（2 年前）；至今共发布 3 个版本，其中过去 12 个月发布了 0 个；首次发布于 2023/12/06。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。