错误:无法解析"...“中的”vs/editor/editor.main“使用monaco editor-webpack-plugin

Question

当使用monaco-editor-webpack-plugin延迟加载和捆绑时，Monaco编辑器返回以下错误：

Module not found: Error: Can't resolve 'vs/editor/editor.main' in '...'

resolve 'vs/editor/editor.main' in '...'

似乎对设置配置路径的require.config函数一无所知。所有的worker文件都已创建。

这是我的webpack.config.js：

const path = require("path");
const MonacoWebpackPlugin = require("monaco-editor-webpack-plugin");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "./bundle.js",
  },
  mode: "development",
  plugins: [
    new MonacoWebpackPlugin()
  ],

  resolve: {
    extensions: [".js"],
    alias: {
      "@": path.resolve(__dirname, "src/"),
    },
  },

  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      }, {
        test: /\.ttf$/,
        use: ['file-loader']
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader",
        },
      },
    ],
  },
};

这就是我要求的方式：

require.config({ paths: { 'vs': 'https://unpkg.com/monaco-editor@0.8.3/min/vs' } });
window.MonacoEnvironment = { getWorkerUrl: () => proxy };

let proxy = URL.createObjectURL(new Blob([`
        self.MonacoEnvironment = {
            baseUrl: 'https://unpkg.com/monaco-editor@0.8.3/min/'
        };
        importScripts('https://unpkg.com/monaco-editor@0.8.3/min/vs/base/worker/workerMain.js');
    `], { type: 'text/javascript' }));

require(["vs/editor/editor.main"], function () {
    let editor = monaco.editor.create(document.getElementById('container'), {
        value: [
            'function x() {',
            '\tconsole.log("Hello world!");',
            '}'
        ].join('\n'),
        language: 'javascript',
        theme: 'vs-dark'
    });
});

有没有人遇到过同样的问题，并找到了解决这个错误的方法？

Answer 1

这看起来像是与monaco-editor-webpack-plugin相关的配置问题。

要解决此问题，请尝试更新您的webpack.config.js文件，特别是在plugins密钥下，您可以在构造插件时提供一个配置对象：

const path = require("path");
const MonacoWebpackPlugin = require("monaco-editor-webpack-plugin");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "./bundle.js",
  },
  mode: "development",
  plugins: [
    new MonacoWebpackPlugin({
        publicPath: "/dist/"                        // Add the public path to monaco
      })
  ],

  resolve: {
    extensions: [".js"],
    alias: {
      "@": path.resolve(__dirname, "src/"),
    },
  },

  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      }, {
        test: /\.ttf$/,
        use: ['file-loader']
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader",
        },
      },
    ],
  },
};