错误：使用 monaco-editor-webpack-plugin 时无法解析“...”中的“vs/editor/editor.main”答案

【问题标题】：Error: Can't resolve 'vs/editor/editor.main' in "..." when using monaco-editor-webpack-plugin错误：使用 monaco-editor-webpack-plugin 时无法解析“...”中的“vs/editor/editor.main”
【发布时间】：2021-07-07 14:05:51
【问题描述】：

使用monaco-editor-webpack-plugin进行延迟加载和捆绑时，摩纳哥编辑器返回以下错误：

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

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

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

这是我的 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",
        },
      },
    ],
  },
};

这是我需要 Monaco 编辑器的方式：

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'
    });
});

是否有人遇到过同样的问题并找到了解决此错误的方法？

【问题讨论】：

标签： webpack monaco-editor

【解决方案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",
        },
      },
    ],
  },
};

【讨论】：