vue中使用monaco-editor打包文件混乱的问题

之前讲述了怎么在vue项目中使用monaco-editor （https://www.cnblogs.com/XHappyness/p/9414177.html），使用是正常的，虽然 npm run build 打包后文件能够正常使用，但是文件结构很乱，而且很大。

1. 初步解决，使用monaco-editor-webpack-plugin（https://github.com/Microsoft/monaco-editor-webpack-plugin）进行打包配置（在webpack.base.conf.js进行配置）

    new MonacoWebpackPlugin({
      languages:['sql','json'],
      output：'./static/js/monaco-editor'
    })

这样文件相对整洁一些，而且我只是用了editor的sql和json，只对这两种语言进行打包，比之前的打包文件小了20+M。但是：js中还是会出现以数字开头的js文件，没有找到规整办法，而且打包文件还是非常大，editor占了将近30M。

2. 最终办法：使用AMD域名的方式引入（https://github.com/Microsoft/monaco-editor/blob/master/docs/integrate-amd-cross.md）。注意我这里还是在vue-cli2的项目中使用，只是不用之前ESM的方式了。

（1） index.html中引用并加载monaco-editor

    <!-- 使用并加载monaco-editor -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.14.3/min/vs/loader.js"></script>
    <script>
      require.config({
         paths: {
           'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.14.3/min/vs/'
          }
        });
      window.MonacoEnvironment = {
        getWorkerUrl: function(workerId, label) {
          return `data:text/javascript;charset=utf-8,${encodeURIComponent(`
            self.MonacoEnvironment = {
              baseUrl: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.14.3/min//'
            };
            importScripts('https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.14.3/min/vs/base/worker/workerMain.js');`
          )}`;
        }
      };
      require(["vs/editor/editor.main"], function () {});
    </script>

（2）npm install html-loader --save-dev (不进行此步会报错)

（3）在webpack.base.conf.js进行配置

  module: {
    rules: [
      ...,
      {
        test: /\.html$/,
        loader: 'html-loader'
      }
    ]
  },

注意：在vue-cli3的项目中配置在vue.config.js中：

module.exports = {
    ···
    chainWebpack: config => {
        config.module
            .rule('html')
            .test(/\.html$/)
            .use('html-loader')
            .loader('html-loader')
    }
  ···
}

（4）如果项目是用ts写的，那么需要将monaco-editor的声明文件复制到自己的项目中，不然下一步使用monaco时会报错

(5) 在使用的地方使用monaco.editor.create创建即可