时间戳

首页 > 解决方案 > Laravel Mix 和 Monaco 编辑器

laravel - Laravel Mix 和 Monaco 编辑器

问题描述

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

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

有没有办法说“嘿，我想要那些摩纳哥文件在这里，而其他一切都保持原样？”。

标签： laravelwebpacklaravel-mixmonaco-editor

解决方案

有一个内置的 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 模块复制/删除/重命名资产，

或者，供应商提取可能会有所帮助。您可以通过在数组中传递库名称来获取文件的Monaco编辑器。它会将文件输出到公共目录中，然后功能可能会帮助您复制该文件。vendor.jsextract()vendor.jscopy()

推荐阅读