Я закончил с техникой, описанной во многих деталях в статье 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.
Я подправил это из примера в статье.Мне не нравилось использовать if() для поиска в массиве всех названий ваших тем, потому что это была еще одна вещь, которую нужно обновить при добавлении / удалении тем, поэтому я просто использую try {}, которая выдастошибка, если не удается найти файл webpack.mix этой темы.Возможно, вы могли бы написать что-нибудь, что бы найти и зациклить все ваши файлы миксов и собрать все сразу, но это не является необходимым в моем случае использования или производительности, когда у меня столько тем, сколько у меня.
Затем создайте / webpack / webpack. [Theme] .mix.js файл для каждой темы.Я поместил свой в папку / webpack / только потому, что не хотел, чтобы в моем корне было более 50 таких файлов.Обратите внимание, что папка / webpack / указана в третьей строке файла webpack.mix.js выше, поэтому измените эту ссылку, если хотите, чтобы она была где-то еще.Вот пример одного из моих, но ваш, очевидно, будет отличаться.
// /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 как на своей дочерней, так и на родительской темах, поскольку я начинаю их создавать, но как только моя родительская тема станет стабильной, мне просто нужно будет просмотреть свои дочерние темы.
Пока все отлично работает, но я открыт для критики.Спасибо всем за помощь, которая вывела меня на правильный путь.