@monaco-editor/loader实现Monaco Editor编辑器

背景

在此前项目中使用monaco editor是直接安装依赖，由于项目起的比较早使用的是vue2，能升级的已经全部升级。在此情况下monaco只能安装到0.30.1的版本，此版本还是有一些特殊字符（U+00a0，他是一个无间断空格）不能够显示，而要求应显示如下截图（有一个小矩形框，鼠标悬浮时显示详细信息）

我查阅版本后，发现在0.31之后的版本有完善，于是我更新了monaco，更新完成之后也有了兼容性的问题。具体情况如下截图

这个主要是新的包里用了可选链操作符( ?. )、空值合并操作符（ ?? ）、空赋值运算符（??=）等新的语法，这个问题也好解决，我使用了如下bable转了一下

less 复制代码

@babel/plugin-proposal-nullish-coalescing-operator
@babel/plugin-proposal-optional-chaining

使用插件时则在vue.config.js中配置一下即可

js 复制代码

// 添加 monaco-editor 的 babel 配置
config.module
  .rule('monaco')
  .test(/\.m?js$/)
  .include
  .add(/node_modules\/monaco-editor/)
  .end()
  .use('babel-loader')
  .loader('babel-loader')
  .options({
    plugins: [
      '@babel/plugin-proposal-nullish-coalescing-operator',
      '@babel/plugin-proposal-optional-chaining'
    ]
  })
  .end()

到此时我的问题已经全部解决完成，我在stage环境也完成了开发自测，非常丝滑没有任何问题，然后走了提交流程，测试同事开始进行测试，在qa环境以及uat环境都没有任何问题，坏就是坏在了上到生产环境的时候报错。

由于是生产环境，所以不能长时间的在上面观察分析，只能紧急把这个monaco版本降下来，我后续猜测可能是因为生产做了混淆或者是多个包打在一起可能导致打包文件出错，想着把这个monaco单独分块进行打包会不会能行，当然我也没有验证，而是用了@monaco-editor/loader来解决。

介绍

首先是文档，我这里放了两个一个是 github,另一个是 npmjs，可直接查看文档，我整理了一下意思大概如下

通过其加载器脚本配置和下载 monaco 源，无需使用 webpack（或任何其他模块捆绑器）的配置文件，他的工作原理也非常的直接，就是 Monaco 编辑器提供了一个名为loader的脚本，该脚本本身提供了下载 monaco 源的工具。该库在底层处理配置和加载部分，并为我们提供了一个易于使用的 API 来与之交互。

使用

文档中也有非常详细的说明，首先就是进行安装

sql 复制代码

npm install @monaco-editor/loader
或者使用
yarn add @monaco-editor/loader

用法

js 复制代码

import loader from '@monaco-editor/loader';

loader.init().then(monaco => {
  monaco.editor.create(/* editor container, e.g. document.body */, {
    value: '// some comment',
    language: 'javascript',
  });
});

上面是官方提供的方法直接使用，一般情况下我们都需要做一些自己的配置，因为默认情况下monaco的所有资源都是从cdn上下载，可能在使用当中会有卡顿加载超时等情况从而导致失败

js 复制代码

import loader from '@monaco-editor/loader';

// you can change the source of the monaco files
loader.config({ paths: { vs: '...' } });

// you can configure the locales
loader.config({ 'vs/nls': { availableLanguages: { '*': 'de' } } });

// or
loader.config({
  paths: {
    vs: '...',
  },
  'vs/nls' : {
    availableLanguages: {
      '*': 'de',
    },
  },
});

loader.init().then(monaco => { /* ... */ });

官方提供的配置是这两个方法，在上面的配置中我们主要使用的是配置paths，即我的项目中使用如下，因为我之前的项目的已经写了了之前的所有功能，目前我只需要把实例加载好就可以了

js 复制代码

import loader from '@monaco-editor/loader'
export default {
    data() {
        return {
          monacoInstance: null
        }
    },
    async mounted() {
        loader.config({
          paths: {
            vs: '/static/monaco-editor/min/vs'
          }
        })
        this.monacoInstance = await loader.init()
   }
}

如上我是把monaco-editor下载下来直接放到项目中，并对loader的源进行指向。可以到官网下载自己喜欢的版本，通过loader初始化实例后就可能通过monacoInstance进行创建编辑器，具体方法我之前有写了一篇关于vue2使用moncao editor的文章