umijs2.x配置monaco-editor

旧项目使用的是umijs2.x， 项目复杂度较高，升级umij有风险，所以就在umijs2.x的基础上引入monaco-editor。出现了一些问题，记录下。

依赖版本信息

• "umi": "2.7.7"

使用插件

• "react-monaco-editor": "^0.52.0"
• "monaco-editor": "^0.36.1"

本地依赖插件

• "monaco-editor-webpack-plugin": "^7.0.1"

操作步骤

1. 安装依赖

npm install --save react-monaco-editor monaco-edito
npm install --save-d monaco-editor-webpack-plugin

2. 配置webpack

在umijs中，可以通过chainWebpack配置扩展或修改 webpack 配置。

• .umirc.js 新增chainWebpack配置

import MonacoWebpackPlugin from 'monaco-editor-webpack-plugin';

export default {
  ...,
  chainWebpack(config, {webpack}) {
    config.plugin('monaco-editor').use(MonacoWebpackPlugin, [
        {
            languages: ['yaml', 'cpp']
        }
    ])
  },
}

• 启动服务，出现异常

搜索发现是webpack无法识别es6的部分写法，需要利用在编译的时候对es语法进行处理

• 分析错误原因

  • 打印umijs的webpack配置

import MonacoWebpackPlugin from 'monaco-editor-webpack-plugin';
import fs from "fs";

export default {
  ...,
  chainWebpack(config, {webpack}) {
  
  // 输入config配置到webpackConfig.txt 
    fs.writeFile('webpackConfig.txt', config.toString(), () => {});
    
    config.plugin('monaco-editor').use(MonacoWebpackPlugin, [
        {
            languages: ['yaml', 'cpp']
        }
    ])
  },
}

umijs2.x默认的webpack配置, babel编译的时候会exclude掉node_modules，所以需要在chainWebpack中新增对monaco-editor的babel编译

• 针对monaco-editor新增babel编译

import MonacoWebpackPlugin from 'monaco-editor-webpack-plugin';
import path from "path";


export default {
  ...,
  chainWebpack(config, {webpack}) {
      config.module
        .rule('compile')
        .test(/\.js$/)
        .include
          .add( path.resolve(__dirname, 'node_modules/monaco-editor'))
          .end()
        .use('babel')
        .loader('babel-loader')
        .options({
            presets: [
              ['babel-preset-umi',  {
                  'modules': false
                }
              ]
            ],
        });
    config.plugin('monaco-editor').use(MonacoWebpackPlugin, [
        {
            languages: ['yaml', 'cpp']
        }
    ])
  },
}

• 启动服务，正常