在webpack中使用monaco-editor

分类：Webpack作者：编程之家用户

前言

我查过网上的教程，大部分都是基于vue或者react框架，很少有教程是基于纯粹的webpack来的，这篇文章记录我在webpack上使用monaco-editor的过程，以补充网上在这方面资料的缺失。本文章会根据我的开发随时进行更新。

使用

monaco的使用介绍，网上有很多，大家可以参考这篇文章进行大概的了解。

点击跳转

自己总结的使用过程

1、安装。

npm install monaco-editor -save

2、在页面中使用

在HTML中创建一个容器，然后使用下面的代码进行初始化就可以得到一个在线编辑器了，但是现在这个编辑器也只是编辑器，什么辅助功能都没有，比如代码提示、右键菜单等等。

  1.   import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
  2.   const monacoInstance=monaco.editor.create(document.getElementById("monaco"),{
  3.   value:`console.log("hello,world")`,
  4.   language:"javascript"
  5.   })

效果图：

3、开启辅助功能

如何开启辅助功能，一种是我们根据自己的需要把辅助的文件引入到页面中，方法参考【使用】章节里提供的地址，另外一种就是用webpack来实现。

安装monaco-editor-webpack-plugin这个模块。

npm install monaco-editor-webpack-plugin

在webpack.config.js中进行配置，MonacoWebpackPlugin可以接受language和features来配置辅助功能，具体配置参数可以查看npm官网即可。

  1.   const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
  2.   module.exports = {
  3.   ...
  4.   plugins: [
  5.   new MonacoWebpackPlugin()
  6.   ]
  7.   }

效果图如下：

不过这里有几点注意的，这是博主在使用过程中发现的一些情况：

1)、如果你得webpack项目使用了HtmlWebpackPlugin来实现多页面配置，那么通过monaco-editor-webpack-plugin生成的一些文件的引用路径将会受到HtmlWebpackPlugin这个配置的影响。例如我使用如下代码动态配置HTML模板的信息，其中filename不仅可以从命名文件还可以设置其路径，假设我将filename改为`pages/${name}.html`，将HTML文件放在pages这个路径下，那么monaco-editor-webpack-plugin生成的所有文件在引用的时候都会加上pages这个路径，原因未知，博主排查了好久都不清楚为啥，所以只能放在根目录下。如果有知道的欢迎指出。

  1.   var getHtmlConfig = function(name,chunks){
  2.   return {
  3.   template:`./src/app/pages/${name}.html`,
  4.   filename:`${name}.html`,
  5.   inject:true, // 将js资源插入到body元素底部
  6.   hash:false,
  7.   chunks:[name, 'runtime','libs', 'commons']
  8.   }
  9.   }

2)、monaco-editor-webpack-plugin参数中filename仅更改worker文件的名字，而无法更改其他生成的JS文件名称。

3)、MonacoWebpackPlugin的language参数的配置会影响右键菜单。经测试：如果language中如果没有引入typescript，右键菜单和控制面板部分功能将消失。

4、如何设置菜单中文显示效果

这个功能折腾了楼主好久时间。网上也没有系统的相关资料。不过能在一些文章中零星的看到有人使用下面的代码进行配置。

  1.   require.config({
  2.   'vs/nls': {
  3.   availableLanguages: {
  4.   '*': 'zh-cn'
  5.   }
  6.   }
  7.   });

可是当你把这段代码复制到自己的代码中又发现完全无法执行。那怎么办？

这里需要涉及到另外两个模块。monaco-editor-esm-webpack-plugin和monaco-editor-nls。其中monaco-editor-esm-webpack-plugin和上面的monaco-editor-webpack-plugin这个不一样，前者需要依赖后者，也就是说你要使用前者，就必须先安装后者。先安装两个模块。

  1.   npm install --save monaco-editor-nls
  2.   npm install --save-dev monaco-editor-esm-webpack-plugin

改写webpack.config.js，需要注意的是rules里也需要添加MonacoWebpackPlugin.loader

  1.   // 去除monaco-editor-webpack-plugin，改为monaco-editor-esm-webpack-plugin
  2.    
  3.   const MonacoWebpackPlugin = require('monaco-editor-esm-webpack-plugin');
  4.   module.exports = {
  5.   module: {
  6.   rules: [
  7.   {
  8.   test: /\.js/,
  9.   enforce: 'pre',
  10.   include: /node_modules[\\\/]monaco-editor[\\\/]esm/,
  11.   use: MonacoWebpackPlugin.loader
  12.   },
  13.   ]
  14.   }
  15.   plugins: [
  16.   new MonacoWebpackPlugin()
  17.   ]
  18.   }

然后在页面的JS中添加如下代码，这些代码必须添加在引入'monaco-editor/esm/vs/editor/editor.api.js';之前

  1.   import { setLocaleData } from 'monaco-editor-nls';
  2.   import zh_CN from 'monaco-editor-nls/locale/zh-hans';
  3.    
  4.   setLocaleData(zh_CN);

接着重新编辑文件，你会发现编译控制台提示报错，在monaco-editor/esm/vs/editor/contrib下缺少goToDefinition文件夹。其实还缺少了一个referenceSearch。如何解决？首先说明一下，这两个文件夹其实并没有缺少，只是在monaco-editor@0.19.0版本以上，微软把这些文件统一放到了gotoSymbol这个文件夹，你可以把monaco-editor安装为0.18.1这个版本就可以使用，不过还是得进行一些插件源代码修改。如果我一定要安装@0.20.0怎么办，那只需要修改\node_modules\monaco-editor-esm-webpack-plugin\node_modules\monaco-editor-webpack-plugin\features.js这个文件即可。

  1.   // 删除一下代码
  2.   goToDefinitionCommands: {
  3.   entry: 'vs/editor/contrib/goToDefinition/goToDefinitionCommands',
  4.   worker: undefined,
  5.   },
  6.   goToDefinitionMouse: {
  7.   entry: 'vs/editor/contrib/goToDefinition/goToDefinitionMouse',
  8.   worker: undefined,
  9.   },
  10.   referenceSearch: {
  11.   entry: [
  12.   'vs/editor/contrib/referenceSearch/referenceSearch',
  13.   'vs/editor/standalone/browser/referenceSearch/standaloneReferenceSearch',
  14.   ],
  15.   worker: undefined,
  16.   }
  17.    
  18.   // 新增以下代码
  19.   gotoSymbol:{
  20.   entry: 'vs/editor/contrib/gotoSymbol/goToCommands',
  21.   worker: undefined
  22.   }

按照上述操作修改后就可以正常编译了。可是编译后，你打开项目你会发现菜单什么还是英文的。这又是啥子情况，明明都按照要求更改了。这个问题我也不清楚是为啥，不过按照下面的改法就行。在一开始我们引入editor.api.js的时候是使用import进行引入的，只要把它改为require引入就行。

  1.   const monaco = require('monaco-editor/esm/vs/editor/editor.api');
  2.   // import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
  3.    
  4.   const monacoInstance = monaco.editor.create(document.getElementById("monaco"),{
  5.   value: `console.log(123)`,
  6.   contextmenu: true,
  7.   language: 'javascript',
  8.   theme: 'vs-dark'
  9.   })

到此菜单汉化就完成了，重新打包运行后效果如下：

 

5、编辑器功能(更新：2020年8月24日)

 1）、动态赋值

  1.   monacoInstance = monaco.editor.create(document.getElementById("monaco"),{
  2.   value: ``,
  3.   contextmenu: true,
  4.   language: 'javascript',
  5.   theme: 'vs-dark'
  6.   })
  7.   monacoInstance.setValue(res);

2）、动态修改语言

  1.   monaco.editor.setModelLanguage(monacoInstance.getModel(), 'html');
  2.   monaco.editor.setModelLanguage(monacoInstance.getModel(), 'javascript');

3）、获取光标位置

  1.   monacoInstance.getPosition();
  2.   // 返回参数
  3.   // lineNumber 行数
  4.   // column 列数

4）、设置光标位置。

  1.   // 两个参数最好都写，不然控制台会报错
  2.   monacoInstance.setPosition({
  3.   lineNumber: 115,
  4.   column: 1
  5.   })

5）、聚焦编辑器

monacoInstance.focus();

6）、编辑器滚动到顶部

  1.   monacoInstance.setScrollPosition({
  2.   scrollTop: 0,
  3.   scrollLeft: 0
  4.   });

7）、获取当前编辑器内容行数

monacoInstance.getModel().getLineCount()

8）、获取某一行的列数

monacoInstance.getModel().getLineLength(2)

 9）、在特定行插入数据

  1.   function insertValueByCurrentPosition(value) {
  2.   var p = monacoInstance.getPosition();
  3.   monacoInstance.executeEdits("",
  4.   [
  5.   {
  6.   range: new monaco.Range(p.lineNumber,
  7.   p.column,
  8.   p.lineNumber,
  9.   p.column),
  10.   text: value
  11.   }
  12.   ]
  13.   );
  14.   }

6、monaco-editor使用到的JS文件如何压缩(2020年4月28日11:49:58)

我们在webpack中使用到压缩JS模块一般都是使用uglifyjs-webpack-plugin。如果我们在项目中使用了monaco-editor的话，在使用uglifyjs-webpack-plugin压缩editor需要的JS的时候，你会发现控制台输出错误信息，会出现两种错误提示，一种是关于worker.js相关的错误，一个是Unexpected token: name «__insane_func», expected: punc «;»。上面两个错误本质上都是因为monaco-editor中使用了最新的ESM语法，uglifyjs-webpack-plugin无法正常解析导致的。处理办法有两种：

1）、继续使用uglifyjs-webpack-plugin。在exclude参数中添加worker.js，然后在chunkFilter中去除提示Unexpected token: name «__insane_func», expected: punc «;»错误的文件。不对这些文件进行压缩就可以正常编译。

  1.   module.exports = {
  2.   optimization: {
  3.   minimizer: [
  4.   new UglifyJSPlugin({ //目的是为了编译环境清除控制台以及关闭注释
  5.   exclude: /\.min\.js|\.worker\.js|\/libs-bundle$/,
  6.   cache: true,
  7.   parallel: true, // 开启并行压缩，充分利用cpu
  8.   extractComments: false, // 移除注释
  9.   chunkFilter: (chunk) => { // 需要加上这个，不然monaco-editor采用新的es语法，uglify无法解析
  10.   if (chunk.name == 'libs') {
  11.   return false;
  12.   }
  13.   return true
  14.   },
  15.   uglifyOptions: {
  16.   output: {
  17.   comments: false // 保留所有的注释
  18.   },
  19.   compress: {
  20.   drop_debugger: true,
  21.   drop_console: true // 删除所有的 `console` 语句，可以兼容ie浏览器
  22.   }
  23.   }
  24.   }),
  25.   ]
  26.   }
  27.   }

2）、不是用uglifyjs-webpack-plugin，将该模块替换为terser-webpack-plugin。这两个插件参数和使用方法基本是一致，可以理解为后者是前者的升级版。参考资料：【传送门1、传送门2、传送门3】。下面给出我的配置代码。

  1.   module.exports = {
  2.   optimization: {
  3.   minimize: true,
  4.   minimizer: [
  5.   new TerserPlugin({ //目的是为了编译环境清除控制台以及关闭注释
  6.   exclude: /\.min\.js$/,
  7.   cache: true,
  8.   parallel: true, // 开启并行压缩，充分利用cpu
  9.   extractComments: false, // 移除注释
  10.   terserOptions: {
  11.   output: {
  12.   comments: false // 保留所有的注释
  13.   },
  14.   compress: {
  15.   drop_debugger: true,
  16.   drop_console: true // 删除所有的 `console` 语句，可以兼容ie浏览器
  17.   }
  18.   }
  19.   }),
  20.   ]
  21.   }
  22.   }

后记：2020年4月23日15:22:48  在使用这个编辑器过程中，博主前前后后折腾了好久，特别是那个莫名添加路径和汉化这两点上，花费了很多的时间。百度过谷歌过都没有找到解决方案。不过幸好，最终还是做到自己想要的效果了。在此感谢上述涉及的插件模块的开发者。

原文地址：https://www.cnblogs.com/zzsdream/p/14088741.html

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

umi 框架 如何配置 自定义 插件 和 loader
一准备工作umi为react的一个封装比较nice的脚手架。优点当然就是安装方便，开箱即用，集成了诸多好用功能，详见官网。当然缺点就是无法暴露原始的webpack.config.json文件，只能按照官方文档上特定的方法进行修改，而文档却并不完善。项目顺利进行大家笑嘻嘻，一旦遇到偏难怪需求，
webpack之shimming的应用(webpack.ProvidePlugin)
webpack在引入两个依赖的包时，可能需要使用shimming，意思是处理代码上的兼容1、在main.js中引入jqueryimport$from'jquery'importappendfrom'./append'//下面的给页面添加元素文件append()2、append.js使用main.js的$向页面中添加元素functionappDomFunc(){
webpack性能优化(TODO)
  Happypack (plugin)多线程使用loader编译文件treeshaking删除无用JS代码，依赖ESM规范source-map生产环境一定去掉process.env.XXX配置环境变量，区分各种编译环境splitchunks 代码分离去重DynamicImport动态加载js文件Hot-module-replacement开发环境热更新w
前端项目架构分析
一目录结构├──build//构建相关├──config//配置相关├──src//源代码│├──api//所有请求│├──assets//主题字体等静态资源│
2、管理资源
接着第一节的demo现在我们尝试整合一些其他资源，比如图像，看看webpack如何处理。在webpack出现之前，前端开发人员会使用grunt和gulp等工具来处理资源，并将它们从 /src 文件夹移动到 /dist 或 /build 目录中。同样方式也被用于JavaScript模块，但是，像webpack这样的工
面试题： Webpack 的 plugin 和 loader 有什么区别
webpack的打包原理识别入口文件通过逐层识别模块依赖(Commonjs、amd或者es6的import，webpack都会对其进行分析，来获取代码的依赖)webpack做的就是分析代码，转换代码，编译代码，输出代码最终形成打包后的代码什么是loaderloader是文件加载器，能够加载资源文件，并对这些文件进行
全面掌握Webpack4.0 (一)Webpack究竟是什么2 持续更新...
上一篇文章我们在一个demo中见到了webpack的身影，如果从未接触过webpack的同学学完了上一篇文章可能会觉得webpack只是一个“翻译官”，但事实上webpack可不仅仅可以‘翻译’代码,事实上，webpack是一个‘打包’工具，‘打包‘才是webpack的核心任务。打开webpack的官网：webpack中
webpack前端模块化打包工具(webpack打包css,url,babel等,配置Vue文件依赖,搭建本地服务器和发布项目)
注：本章将配合Vue详细讲解webpack前提条件1.在开始之前，请确保安装了Node.js和npm的最新版本。使用旧版本，你可能遇到各种问题，因为它们可能缺少webpack功能以及/或者缺少相关package包。在cmd中node-v,npm-v可查看对应的版本和安装情况。2.这里会用到ES6的模块化，如果你
vue webpack优化之路
前言、之前我认为对于项目的优化无非是从代码上去优化一些东西，比如循环呀函数式调用呀让你的代码看起来更加的简洁容易懂后来我在面试过程中不断有面试官不断地问了我这些问题所以自己就去研究了一下发现并不是我之前想的那样，一个好的webapck优化的胜过于你在整体代码上
vue03
##一、组件component###1.什么是组件？组件（Component）是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码组件是自定义元素（对象）###2.定义组件的方式方式1：先创建组件构造器，然后由组件构造器创建组件方式2：直接创建组件###3.组件的分
webpack
 #webpack5概述>webpack是一个现代javascript应用程序的**静态模块打包器(modulebundler)**>>vue-cli脚手架环境,集成了webpack,所以才能对各类文件进行打包处理[webpack官网](https://webpack.js.org/) ##webpack能做什么webpack是一个静态模块打包
webpack原理-实现webpack打包js
//这里导入webpack配置，我用对象的形式表示，当然entry属性上定义的文件要有//constconfig=require("./webpack.config");constconfig={entry:'./src/index.js'};const{join,dirname}=require("path");const{readFileSync,writeFileSync}=requi
vux-cli3 项目文件分析 webpack-bundle-analyzer
安装cnpminstallwebpack-bundle-analyzer-D 修改vue.config.jsmodule.exports={chainWebpack:config=>{if(process.env.use_analyzer){//分析config.plugin('webpack-bundle-analyzer')
webpack打包html插件html-webpack-plugin的使用
webpack打包html插件html-webpack-plugin的使用1.创建这样的测试目录结构1）index.html是即将被打包的文件，你可以随便写一些内容2）index.js是打包的入口文件，你可以写或不写内容2.webpack.config.js的代码如下：/***压缩html需要插件：html-webpack=plugin*插件使用方法：
vue init webpack tabbar创建vue项目时出现问题
vueinitwebpacktabbar创建vue项目时出现问题vue:无法加载文件C:\Users\dengqian\AppData\Roaming\npm\vue.ps1，因为在此系统上禁止运行脚本。C:\Windows\System32\WindowsPowerShell\v1.0，找到如上路径，以管理员身份运行powershell.exe即可输入set-ExecutionPolicyRemo
【vue+ECharts】在 webpack 中使用 ECharts
在webpack中使用ECharts【官网教程】1、使用如下命令通过npm 安装EChartsnpminstallecharts--save2、全局引用在main.jsimportechartsfrom'echarts'Vue.prototype.$echarts=echarts;3、运用<divstyle="width:60vw;height:280px;"ref="chart"&
解读 vue-cli 脚手架二：npm run build 的背后
如果没有看过我的上一篇文章，请先移步去看一下哈！时隔一年多，之前写的文章感觉大家还挺喜欢的，一直说要更新下一篇。但是一直没有机会，没时间，还有就是，感觉自己的技术，可能不足以支持我继续往下走。但是经过这个一年多的历练，感觉很多东西考虑的会更周全，不负期待！废话说一堆，步入正题
webpack 创建本地node服务
dist文件配置对应的路由名展示这样的效果可以创建一个本地的服务还可以进行代理项目开发是在src里进行代码逻辑编写./表示本地路径/表示绝对路径(nginx需要配置)
新建webpack-vue项目以及引入element ui组件
 1、用命令创建webpack模板项目vueinitwebpack 项目名，需要选是否的统一选否，所以的依赖手动添加  2、安装依赖vue-router,elementui,sass-loader,node-sass，axios插件安装路由：npminstallvue-router安装elementu
webpack打包后动态修改process.env
最近想把蘑菇博客部署到k8s上，作为一名java搬砖工，搬砖人不讲码德，biu一下就把后端各模块的dockerfile和chart包copy过来了，很快啊！接下来就可以愉快的使用helm管理蘑菇后端服务部署了。部署完后端服务后，准备制作前端镜像，发现前端打包后，无法动态读取系统环境变量，这很头疼，难不
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot