Раздельная сборка приложения на vue.js 2 для yii2-advanced шаблона

В предыдущей статье я использовал yii2-basic шаблон, где собиралось одно vue приложение. В случае использования “продвинутого” yii2 шаблона у административной и пользовательской частей сайта могут быть свои отдельные SPA-страницы, которые нужно собирать в разные файлы js и css.

В таком случае потребуется создать раздельные команды сборки. Например, одна из команд будет создавать /frontend/web/app-frontend.js для фронтовой части, другая – /backend/web/app-backend.js для админ. части.

Предположим что vue-приложение для фронтенда подключается из /vue/app-frontend.js а для бэка из /vue/app-backend.js.

1. В корне проекта в webpack.mix.js пишем:

const { env } = require('minimist')(process.argv.slice(2));
//console.log(env);
 
if (env && env.site) {
    require(`${__dirname}/webpack_${env.site}.mix.js`);
}

Как видно в зависимости от некого параметра env.site загружается нужный файл.

2. Там же создаем 2 файла – webpack_backend.mix.js и webpack_frontend.mix.js

Содержимое первого:

let mix = require('laravel-mix');
 
/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */
 
mix.setPublicPath("./backend/web");
mix.js('vue/app-backend.js', 'js');
//mix.sass('resources/assets/sass/app.scss', 'web/css');

и второго:

let mix = require('laravel-mix');
 
/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */
 
mix.setPublicPath("./frontend/web");
mix.js('vue/app-frontend.js', 'js');
//mix.sass('resources/assets/sass/app.scss', 'web/css');

3. В package.json в секции scripts необходимо разделить все команды. Например вместо:

"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",

написать 2 отдельные команды:

"backend-development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js --env.site=backend",

и

"frontend-development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js --env.site=frontend",

Таким образом development-сборки будут происходить двумя командами:

npm run backend-development

и

npm run frontend-development

Аналогичным образом можно разделить watch, production и пр.

При желании можно чтобы фронт и бэк части собирались одной командой.

  1. Нет комментариев