@tomjs/vite-plugin-monaco-editor

 !node-current (scoped) !NPM 

English | 中文

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

特性

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

安装

``bash


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 项目为例

$3

`js
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(),
],
});
`

$3

`js
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

$3

本地配置。

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

$3

vite命令为 serve 时的配置

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

开发

- 开发环境

- git
- node>=18
- pnpm>=8

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

`bash


安装依赖

pnpm i

编译库

pnpm build
`

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

`bash
cd examples/vue
pnpm build
pnpm preview
`

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

`bash
cd examples/react
pnpm build
pnpm preview
``