1.1.0 • Published 4 months ago
@tomjs/vite-plugin-monaco-editor v1.1.0
@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 })],
});文档
- paka.dev 提供的 API文档.
- 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