Laravel Mix 和 Monaco 编辑器

Question

首先说我对Webpack不是很精通，所以，这可能是一个微不足道的问题。

我正在尝试通过 monaco-editor-webpack-plugin 在 Laravel 项目中使用 Monaco。由于插件需要修改 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、字体等）编译到该目录中。

有没有办法说“嘿，我想要那些 Monaco 文件，而其他一切保持原样？”。

Answer 1

有一个 built-in 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 分辨率手动对资产执行 post-processing，

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

在这里，您可以使用 fs module、

自由处理 copy/delete/rename 资产

或者，供应商提取可能会有所帮助。您可以通过在数组中传递库名称，使用 extract() 将 Monaco 编辑器获取到 vendor.js 文件。它会将 vendor.js 文件输出到 public 目录中，然后在 copy() 函数之后可能会帮助您复制该文件。

Laravel Mix 和 Monaco 编辑器

Laravel Mix and Monaco Editor

laravel

webpack

monaco-editor

laravel-mix