Laravel Mix 和 Monaco 编辑器

Question

Laravel Mix 和 Monaco 编辑器

4

首先声明一下，我不是很熟悉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 文件放在这里，同时让其他所有文件保持原状？”

- Ben

更改 https://github.com/microsoft/monaco-editor-webpack-plugin 中提到的 publicPath 怎么样？ - apokryfos

@apokryfos 它会更改编辑器加载文件的路径，但它们仍将在根路径中编译。 - Ben

你可以使用 extract 命令将代码移动到 vendor.js 中。注意： 如果需要更多信息，可以在此处查看 https://laravel.com/docs/8.x/mix#vendor-extraction。 - Chandan

你尝试过 .extract() 吗？ - user4796879

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Kiran Maniya · Accepted Answer

有一个内置的 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)可用于复制整个目录。

对于更高级的用法，您可以从mix Promise解析中手动对资产进行后处理，如下所示：

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

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

另外，供应商提取可能会有所帮助。您可以通过将库名称传递到数组中的extract()来将Monaco编辑器放入vendor.js文件中。它将输出vendor.js文件到公共目录，然后copy()函数可以帮助您复制该文件。