Laravel Mix和Monaco编辑

编程问答 2022-06-07

问题描述

让我们从说我对Webpack不太熟练开始，所以，这可能是一个琐碎的问题。

我正在尝试通过monaco-editor-webpack-plugin在Laravel项目中使用摩纳哥。由于该插件需要对webpack.config.js进行修改，而Laravel使用webpack.mix.js，因此通过摆弄我设法提出了以下配置：

/* eslint-disable import/no-extraneous-dependencies */

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

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean,fluent API for defining some Webpack build steps
 | for your Laravel applications. By default,we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js','public/js')
    .sass('resources/scss/app.scss','public/css')
    .webpackConfig({
        plugins: [
            new MonacoWebpackPlugin({
                languages: ['css','html','javascript','json','scss','typescript'],}),],});

现在，一切正常，文件被编译，编辑器按预期工作。我遇到的问题是在/public目录中生成了编辑器的编译文件。例如：/public/editor.worker.js，/public/0.js等

我真的很想避免这种情况，而是将这些文件编译在/public/js/vendor/monaco中。我试图将output配置更改为/public/js/vendor/monaco，但是它将所有内容（css，字体等）编译到该目录中。

有没有办法说“嘿，我想要摩纳哥的文件放在这里，而其他都保留吗？”

解决方法

有内置的laravel-mix函数copy可以提供帮助。您可以做的是，将输出保持不变，并在处理后将输出文件复制到所需目录中。这是您的方法。

mix.js('resources/js/app.js','public/js')
    .sass('resources/scss/app.scss','public/css')
    .webpackConfig({
        plugins: [
            new MonacoWebpackPlugin({
                languages: ['css','html','javascript','json','scss','typescript'],}),],})
    .copy('SOURCE_PATH','DESTINATION_PATH');

使用链接的copy函数调用定义要复制的所有文件。另外，还有另一种laravel-mix方法copyDirectory(fromDir,toDir)复制整个目录。

要获得更高级的用法，您可以根据给定的混合Promise分辨率对资产进行手动后处理，

mix.then(function () {
  //Perform post-processing on generated assets
}) //Will be triggered each time Webpack finishes building.

在这里，您可以自由使用fs module复制/删除/重命名资产，

或者，供应商提取可能会有所帮助。您可以使用Monaco将vendor.js编辑器添加到extract()文件中，方法是在数组中传递库名。它将把vendor.js文件输出到公共目录，然后在执行copy()函数之后，可以帮助您复制该文件。

laravellaravelmixmonaco-editorwebpackwebpackwebpack