时间戳

首页 > 解决方案 > Laravel Mix 构建过程可扩展到许多（50 多个）主题

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

问题描述

是否有标准的方法来扩展 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 项目更容易管理客户端，尤其是在管理维护和更新方面。

标签： laravellaravel-mix

解决方案

根据文档，您可以使用环境变量将参数注入 Laravel Mix。将此与您的自定义脚本结合起来，package.json您将得到您想要的。

默认package.json带有以下两个脚本（以及更多）：

"scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
}

只需添加您自己的脚本作为包装器：

"scripts": {
    "dev": "npm run development",
    "dev:customer1": "cross-env MIX_CUSTOMER=customer1 npm run dev"
}

当然，这也适用于纱线......

在您的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/');

if (process.env.MIX_CUSTOMER === 'customer1') {
    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/');
}

if (process.env.MIX_CUSTOMER === 'customer2') {
    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/');
}

为了简化您的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/');

function buildCustomerAssets(customerFolder)
{
    mix.js(`resources/${customerFolder}/assets/js/app.js', 'public/${customerFolder}/js/`)
      .sass(`resources/${customerFolder}/assets/scss/app.scss', 'public/${customerFolder}/css/`);
}

var customers = {
    'customer1': 'child-theme-1-folder',
    'customer2': 'child-theme-2-folder',
};

if (process.env.MIX_CUSTOMER) {
    var customerFolder = customers[process.env.MIX_CUSTOMER];
    buildCustomerAssets(customerFolder);
} else {
    for (const customerFolder of Object.values(customers)) {
        buildCustomerAssets(folder);
    }
}

因为您的父主题使用相同的文件夹结构，您甚至可以使用该函数对其进行编译。但是，只有当您的构建配置对所有客户都完全相同时，所有这些才有意义。

推荐阅读