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創建即可