umi(react)项目中引入monaco-editor

最新推荐文章于 2023-05-14 20:20:25 发布

莹宝思密达

最新推荐文章于 2023-05-14 20:20:25 发布

阅读量1k

点赞数

分类专栏： JScor 文章标签： monaco-editor web端代码编辑器 Powered by 金山文档

本文链接：https://blog.csdn.net/miin_ying/article/details/129123031

版权

JScor 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

问题

Module parse failed: Unexpected token (30:15)

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

| // src/language/json/monaco.contribution.ts

| var LanguageServiceDefaultsImpl = class {

> _onDidChange = new monaco_editor_core_exports.Emitter();

分析：需要编译可以翻译class 的loader。引入@babel/plugin-proposal-class-properties

import MonacoWebpackPlugin from 'monaco-editor-webpack-plugin';
// config.ts中
  chainWebpack(memo, { webpack }) {
    const Config = require('webpack-chain');
    const config = new Config();

    config.module
      .rule('compile')
      .test('/\.(js|jsx)$/')
      .use('babel')
      .loader('babel-loader')
      .options({
        presets: ["@babel/preset-env", "@babel/preset-react"],
        plugins: ["@babel/plugin-proposal-class-properties"],
      })
    config.plugin('monaco-editor').use(MonacoWebpackPlugin, [
      {
        languages: ['json', 'javascript']
      }
    ])
    module.exports = config.toConfig();
  },

    <MonacoEditor
        width="800"
        height="600"
        language="mysql"
        theme="vs-light"
        value={code}
        options={{
            selectOnLineNumbers: true
        }}
        onChange={onMonacoChange}
    // editorDidMount={this.editorDidMount}
    />