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