Vite构建的vue项目引入MonacoEditor介绍在制作OJ系统时，遇到如何渲染前端代码的问题，采用了Monac

介绍

在制作OJ系统时，遇到如何渲染前端代码的问题，采用了MonacoEditor组件，遇到了一些有意思的问题，在这里记录一下注：本项目采用vue3+vite+Ts

引入过程

首先按照网上的教程

1.安装依赖：

1）monaco-editor

2）vite-plugin-monaco-editor

2.修改配置项

import ViteMonacoPlugin from 'vite-plugin-monaco-editor-esm'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
    ViteMonacoPlugin({}),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
})

之后出现报错：

TypeError: monacoEditorPlugin is not a function

继续搜索相关问题的解决方法，看到有网友解释这是因为vite3在创建项目的时候会自动的给package.json 加上 type = module 导致的报错

所以将 package.json 中 type=module 删除即可

但很快又出现新的错误：

The CJS build of Vite's Node API is deprecated. See vite.dev/guide/troub… for more details.

搜索发现：

这是因为Vite 官方弃用 CJS 导致的，而解决方法恰恰在package.json 中添加 "type": "module"

这是因为默认情况下 Node.js 默认将 .js 文件作为 CommonJS (CJS) 模块来处理。当将 “type”: “module” 添加到 package.json 中，Node.js 会将 .js 文件作为 ECMAScript Modules (ESM) 来处理。

下面是更详细的介绍(来源：参考链接2）

CJS 和 ESM 的区别语法：CJS 使用 require 和 module.exports，而 ESM 使用 import 和 export。加载机制：CJS 是同步的，通常用于服务器端。ESM 支持异步加载，适用于浏览器和服务器。生态系统兼容性：Node.js 最初只支持 CJS，但现在也支持 ESM。ESM 是现代浏览器支持的标准。模块解析：CJS 模块解析时可以省略文件扩展名和目录索引文件，而 ESM 则更严格，通常需要完整的路径和文件扩展名。随着 JavaScript 生态系统的发展，ESM 正在逐渐成为主流，特别是在前端开发中，由于其支持异步和静态分析的优势。

很有趣的矛盾问题，不过本质上其实还是语法原因导致的

因为无法通过中文博客解决，最后尝试在github的该项目中查看是否有其他人提出过相关问题的issues

很幸运还真的有，该网友提出了针对该问题依赖库：输入图片说明转存失败，建议直接上传图片文件

将原来的`import ViteMonacoPlugin from 'vite-plugin-monaco-editor'

改成`import ViteMonacoPlugin from 'vite-plugin-monaco-editor-esm'

于是问题解决了。

参考链接：

【1】blog.csdn.net/hanying1220…

【2】blog.csdn.net/u013737132/…

【3】github.com/vdesjs/vite…

介绍