Laravel Mix 构建过程可扩展到许多（50 多个）主题

Question

是否有一种标准方法可以扩展 Laravel Mix 以支持 50 多个不同前端主题的构建过程？

我只是在运行npm run dev，npm run watch目前在我的 webpack.mix.js 文件中有四个不同的主题，并且它会同时构建/观察所有这些主题，但我担心当我们扩展时性能会崩溃。理想情况下，我希望一次只能构建/观看一个主题，例如npm run dev --theme:some-site或npm run watch --theme:another-site

如果我不做任何更改，我的 webpack.mix.js 最终会以这种速度显示如下：

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

// Parent Theme
mix.js('resources/[parent-theme-folder]/assets/js/app.js', 'public/[parent-theme-folder]/js/')
  .sass('resources/[parent-theme-folder]/assets/scss/app.scss', 'public/[parent-theme-folder]/css/')
  ;

// Client 1
mix.js('resources/[child-theme-1-folder]/assets/js/app.js', 'public/[child-theme-1-folder]/js/')
  .sass('resources/[child-theme-1-folder]/assets/scss/app.scss', 'public/[child-theme-1-folder]/css/')
  ;
// Client 2
mix.js('resources/[child-theme-2-folder]/assets/js/app.js', 'public/[child-theme-2-folder]/js/')
  .sass('resources/[child-theme-2-folder]/assets/scss/app.scss', 'public/[child-theme-2-folder]/css/')
  ;
...etc...
// Client 47
mix.js('resources/[child-theme-47-folder]/assets/js/app.js', 'public/[child-theme-47-folder]/js/')
  .sass('resources/[child-theme-47-folder]/assets/scss/app.scss', 'public/[child-theme-47-folder]/css/')
  ;

有什么建议？谢谢！

——

关于我们设置的更多信息，如果有帮助的话...

我们使用父/子主题包 - igaster/laravel-theme - 在一个 Laravel 项目中管理多个前端。本质上，我们有 4 种类型的网站产品，以及 20-30 个客户，这些客户都有自己的多达 4 个产品的实例。他们每个人都有自己的子主题，扩展了该产品的父主题以添加任何自定义布局、样式、视图等。我们觉得一个 Laravel 项目比为每个项目设置 20-30 个不同的 Laravel 项目更容易管理客户端，尤其是在管理维护和更新方面。

Answer 1

我最终采用了compulsivecoders 文章中详细概述的技术，但进行了一些个人调整。我不会重复他们的整篇文章并解释每一行，但我将包含您复制下面的设置所需的每一行代码。

--

第一次运行npm install laravel-mix-merge-manifest。如果您想mix()在视图中使用来查找 css/js 资源并启用缓存清除，则需要此部分。否则，每次运行时，npm run dev/watch/etc --theme=theme-name它都会覆盖mix-manifest.json文件中的先前主题，并且您会收到 Laravel 错误，指出它无法找到您的资产。最后，您实际上将在主题的混合文件中使用这个包。

然后，删除根目录中webpack.mix.js文件中的所有内容并粘贴以下内容：

// webpack.mix.js
try {
    require(`${__dirname}/webpack/webpack.${process.env.npm_config_theme}.mix.js`)
} catch (ex) {
    console.log(
        '\x1b[41m%s\x1b[0m',
        'Provide correct --theme argument to build, e.g.: `npm run watch --theme=theme1` or `npm run dev --theme=theme2`'
    )
    throw new Error('Provide correct --theme argument to build: `npm run watch --theme=theme1` or `npm run dev --theme=theme2`')
}
// ...that's it. Nothing is ever managed in this file.

我根据文章中的示例对此进行了调整。我不喜欢使用 anif()来搜索所有主题名称的数组，因为这是添加/删除主题时必须更新的另一件事，所以我只是使用try {}它，如果找不到，则会输出错误该主题的 webpack.mix 文件。您可能可以编写一些东西来查找并循环所有混合文件并立即构建所有内容，但这在我的用例中是不必要的，或者当我有尽可能多的主题时，这不是必需的。

然后为每个主题创建一个/webpack/webpack.[theme].mix.js文件。我将我的文件放在 /webpack/ 文件夹中，只是因为我不想在我的根目录中包含 50 多个这些文件。请注意，上面的 webpack.mix.js 文件的第 3 行引用了 /webpack/ 文件夹，因此如果您希望在其他地方使用它，请更改该引用。这是我的一个例子，但你的显然会有所不同。

// /webpack/webpack.my-theme-1.mix.js
const mix = require('laravel-mix');
require('laravel-mix-merge-manifest');

mix.js('resources/my-theme-1/assets/js/app.js', 'public/my-theme-1/js/').sourceMaps().version()
   .sass('resources/my-theme-1/assets/scss/app.scss', 'public/my-theme-1/css/').sourceMaps().version()
   .mergeManifest();

请注意对合并清单的两个引用。每个主题都需要这两件事。

最后，您可以通过传入 --theme=[theme-name] 参数来运行所有常用的构建命令，例如：

npm run dev --theme=my-theme-1
npm run watch --theme=my-theme-2
npm run prod --theme=my-parent-theme-1

watch当我开始构建这些主题时，我个人将我的终端分开并在我的子主题和父主题上运行，但是一旦我的父主题稳定，我就只需要观看我的子主题即可。

到目前为止一切都很顺利，但我愿意接受批评。感谢大家的帮助，让我走上正确的道路。