@tomjs/vite-plugin-monaco-editor

English | 中文

vite monaco-editor插件，为index.html注入脚本

特性

• vite serve 时使用 node_modules 目录下的库
• vite build 时可选使用 本地 或 CDN

安装

# pnpm
pnpm add monaco-editor
pnpm add @tomjs/vite-plugin-monaco-editor -D

# yarn
yarn add monaco-editor
yarn add @tomjs/vite-plugin-monaco-editor -D

# npm
npm i monaco-editor --save
npm i @tomjs/vite-plugin-monaco-editor --save-dev

使用说明

以 vue/react 项目为例

vue示例

import { defineConfig } from 'vite';
import monaco from '@tomjs/vite-plugin-monaco-editor';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [
    vue(),
    // 默认使用 cdn
    monaco(),
  ],
});

react示例

import { defineConfig } from 'vite';
import monaco from '@tomjs/vite-plugin-monaco-editor';
import react from '@vitejs/plugin-react-swc';

export default defineConfig({
  // 使用本地的monaco-editor，从 node_modules 复制到 dist 目录
  plugins: [react(), monaco({ local: true })],
});

文档

• unpkg.com 提供的 index.d.ts.

参数

| 参数 | 类型 | 默认 | 描述 | | --- | --- | --- | --- | | type | 'npmmirror' \| 'unpkg' \| 'jsdelivr' \| 'custom' | 'unpkg' | CDN 源类型，参数 name/version/file 取自模块配置。 当操作系统语言为 zh_CN 时，默认值为 npmmirror ，否则为 jsdelivr。 | | url | string | '' | 自定义 URL（与 type 一起使用） | | local | boolean | NpmLocal | false | 本地模式或本地模式的更多配置 | | serve | ServerConfig | { base: './'} | vite命令为serve时的配置 |

CDN type:

• npmmirror: url 默认为 https://registry.npmmirror.com/monaco-editor/{version}/files
• jsdelivr: url 默认为 https://cdn.jsdelivr.net/npm/monaco-editor@{version}
• unpkg: url 默认为 https://unpkg.com/monaco-editor@{version}
• custom: 可以自定义 url

NpmLocal

本地配置。

| 参数 | 类型 | 默认 | 描述 | | ------ | --------- | ------------------------------- | ----------------------------------------- | | base | string | '/' | 与 Vite 的 base 选项相同 | | outDir | string | 'dist' | 本地输出目录，默认为Vite的 build.outDir | | path | string | 'npm/monaco-editor@{version}' | 本地输出路径，模块 URL 也将替换为该路径 | | copy | boolean | true | 是否将 monaco-editor 复制到输出目录 |

ServerConfig

vite命令为 serve 时的配置

| 参数 | 类型 | 默认 | 描述 | | ---- | -------- | ------ | ----------------------- | | base | string | './' | node_modules 的相对路径 |

开发

• 开发环境

  • git
  • node>=18
  • pnpm>=8

• 首次使用，需要安装依赖，执行如下命令

# 安装依赖
pnpm i
# 编译库
pnpm build

• 调试 vue 项目，执行如下命令

cd examples/vue
pnpm build
pnpm preview

• 调试 react 项目，执行如下命令

cd examples/react
pnpm build
pnpm preview