monaco-editor与monaco-editor-webpack-plugin的版本要兼容

目前使用的版本:
“monaco-editor”: “^0.28.1”,
“monaco-editor-webpack-plugin”: “^4.2.0”,

遇上第1个报错:

Cannot find module ‘vs/editor/contrib/inlineHints/inlineHintsController‘

解决办法:npm list --depth 0 查看本地包对应的依赖 → 按照提示,只需要去官网下载响应的版本即可。https://www.npmjs.com/package/monaco-editor-webpack-plugin
在这里插入图片描述

遇上第2个报错

Unexpected usage at EditorSimpleWorker.loadForeignModule

解决方案:

// vue.config.js
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')

module.exports = {
  chainWebpack(config) {
    config.plugin('monaco').use(new MonacoWebpackPlugin())
  },
}

参考来自两个博主:
https://blog.csdn.net/m0_45236510/article/details/115049181
https://blog.csdn.net/qq_43530269/article/details/118031013

配置 `monaco-editor-webpack-plugin` 可以帮助优化 Monaco Editor 在项目中的加载方式,同时支持按需加载语言包、主题等资源。该插件提供了多个配置选项,以满足不同项目的需求。 ### 配置基本用法 在 Vue 项目的 `vue.config.js` 中,可以通过引入 `monaco-editor-webpack-plugin` 并将其添加到 Webpack 配置中来启用 Monaco Editor 的优化加载: ```js const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin'); module.exports = { configureWebpack: { plugins: [ new MonacoWebpackPlugin() ] } }; ``` 此配置会默认加载 Monaco Editor 所需的核心资源,并启用基本的语言支持和主题加载功能[^2]。 ### 自定义配置选项 `monaco-editor-webpack-plugin` 提供了多个可选参数,用于控制加载的语言、主题、编辑器版本等。例如,若仅需加载特定语言支持(如 JSON 和 JavaScript),可进行如下配置: ```js new MonacoWebpackPlugin({ languages: ['json', 'javascript'], themes: true, features: ['!gotoSymbol'] }) ``` - `languages`: 指定需要加载的语言包,避免加载所有语言导致体积过大。 - `themes`: 是否加载主题资源,设为 `true` 表示加载所有主题,也可指定具体主题名称数组。 - `features`: 控制加载的编辑器功能模块,可通过 `!` 排除某些功能以减小构建体积[^1]。 ### 版本兼容模块导入 为确保 Monaco Editor Webpack 插件的兼容性,应确保 `monaco-editor` `monaco-editor-webpack-plugin` 的版本一致或兼容。从 v4.4.0 开始,可以将 Monaco Editor 作为 NPM 包直接导入,并通过 `@monaco-editor/react` 的 `loader` 配置指定自定义的 Monaco 实例: ```ts import * as monaco from 'monaco-editor'; import { loader } from '@monaco-editor/react'; loader.config({ monaco }); ``` 该方式适用于需要自定义 Monaco Editor 加载路径或 React/Vue 等框架集成的场景[^3]。 ### 配置 Webpack Chain 方式(Vue CLI) 在 Vue CLI 项目中,推荐使用 `chainWebpack` 方式配置插件: ```js module.exports = { chainWebpack: config => { config.plugin('monaco').use(new MonacoWebpackPlugin({ languages: ['json'], themes: ['vs-dark'] })); } }; ``` 此方式更符合 Vue CLI 的构建流程,并允许更细粒度地控制插件的注入位置和参数[^2]。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值