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

问题

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();},

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

umi(react)项目中引入monaco-editor相关推荐

vue项目中引入monaco editor
monaco-editor概述 monaco-editor 是微软开源的一款web代码编辑器,vscode就是集成monaco-editor来实现的. 官方示例官方文档使用安装 npm安装 np ...
React项目中引入图片
React项目中引入图片一.场景描述二.import 三.require 一.场景描述当我们在react项目中使用img标签时,活着style中使用背景图片时,直接使用相对路径会无法引入图片. ...
react项目中引入百度地图
项目目录如下: 在此index.html中加入如下代码即可: <!DOCTYPE html> <html lang="en"><head>< ...
react项目中引入echarts图表
一.在一般html页面使用 1.在已有项目的终端输入进行安装 npm install echarts --save 2.在import里面输入 import echarts from 'echarts ...
数据可视化：在 React 项目中使用 Vega 图表 (一)
相关包打开搜索引擎,一搜 Vega,发现相关的包有好几个,Vega, Vega-Lite, Vega-Embed,React-Vega 等等,不免让人头晕. 别急,它们之间的关系三四句话就能说明白, ...
react项目中使用mocha结合chai断言库进行单元测试
react项目中使用mocha结合chai断言库进行单元测试 git地址:https://github.com/yancekang/... 如果对你有所帮助,感谢start 项目搭建 create-r ...
优雅的在React项目中使用Redux
概念首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与React没有任何关系,其他UI框架也可以使用Redux react-redux React插件,作用:方便在 ...
如何优雅地在React项目中使用Redux
前言或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处,本文不会安利大家使用Redux 概念首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与 ...
引入 javascript_在您JavaScript项目中引入类型安全性？再想一想
引入 javascript by James Wright 詹姆斯·赖特(James Wright) 在您JavaScript项目中引入类型安全性? 再想一想 (Introducing Type Sa ...

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

umi(react)项目中引入monaco-editor相关推荐

最新文章

热门文章