node.js – 使用webpack导入monaco-editor时找不到依赖项

vuejs代码：

import monaco from "monaco-editor/min/vs/loader.js";

webpack.base.conf.js：

entry: {
    app: './src/main.js'
},output:{
    path:resolve(__dirname,'../dist'),filename:'[name].js',publicPath: '/'
}

我使用webpack的monaco-editor,但我甚至无法导入loader.js.
看起来像monaco-editor / vs下的js文件不允许加载.

终端输出：

These dependencies were not found:
* vs/editor/edcore.main in ./~/monaco-editor/min/vs/editor/editor.main.js
* vs/language/typescript/src/mode in ./~/monaco-editor/min/vs/editor/editor.main.js
* fs in ./~/monaco-editor/min/vs/language/typescript/lib/typescriptServices.js

我能做什么？

解决方法

有两种方法可以与webpack集成.最简单的方法是使用Monaco Editor Loader插件

index.js

import * as monaco from 'monaco-editor';

monaco.editor.create(document.getElementById('container'),{
  value: [
    'function x() {','\tconsole.log("Hello World!");','}'
  ].join('\n'),language: 'javascript'
});

webpack.config.js

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

module.exports = {
  entry: './index.js',output: {
    path: path.resolve(__dirname,'dist'),filename: 'app.js'
  },module: {
    rules: [{
      test: /\.css$/,use: ['style-loader','css-loader']
    }]
  },plugins: [
    new MonacoWebpackPlugin()
  ]
};

https://github.com/Microsoft/monaco-editor/blob/HEAD/docs/integrate-esm.md