配置 laravel mix 以在组件文件更改时构建特定的 vue 应用程序

Question

我的 Laravel 项目包含多个 Vue.js 应用程序。项目目录结构如下：

├── public
│   ├── js
│   │   ├── app_the_first.js
│   │   ├── app_the_second.js
├── resources
│   ├── assets
│   │   ├── js
│   │   │   ├── the_first_components
│   │   │   │   ├── // Vue component files
│   │   │   ├── the_second_components
│   │   │   │   ├── // Vue component files
│   │   │   ├── app_the_first.js
│   │   │   ├── app_the_second.js
│   ├── sass
│   │   ├── app_the_first.js
│   │   ├── app_the_second.js
├── views
│   ├── the_first.blade.php
│   ├── the_second.blade.php
├── package.json
├── webpack.mix.js

当我更改

the_first_component

并运行

npm run dev/prod

时，

app_the_first.js

和

app_the_second.js

都会重新构建

我的

webpack.mix.js

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


mix.js('resources/assets/js/app_the_first.js', 'public/js').vue()
   .sass('resources/assets/sass/app_the_first.scss', 'public/css');

mix.js('resources/assets/js/app_the_second.js', 'public/js').vue()
   .sass('resources/assets/sass/app_the_second.scss', 'public/css');

我只想重建

app_the_first.js

，而不重建

app_the_second.js

Answer 1

Laravel Mix 本身并不支持开箱即用地构建选定的资源，因为运行

npm run

dev 或

npm run prod

将触发

webpack.mix.js

中定义的所有任务。您可以定义一个环境变量来指定要构建哪个应用程序：

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

const appName = process.env.APP_NAME;

if (!appName || appName === 'the_first') {
    mix.js('resources/assets/js/app_the_first.js', 'public/js').vue()
       .sass('resources/assets/sass/app_the_first.scss', 'public/css');
}

if (!appName || appName === 'the_second') {
    mix.js('resources/assets/js/app_the_second.js', 'public/js').vue()
       .sass('resources/assets/sass/app_the_second.scss', 'public/css');
}

然后，您可以在运行 npm 脚本时使用环境变量来指定要编译的应用程序：

APP_NAME=the_first npm run dev

APP_NAME=the_second npm run dev

npm run dev

修改您的 package.json 脚本以包含这些新命令：

"scripts": {
  "dev": "npm run development",
  "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
  "watch": "npm run development -- --watch",
  "watch-poll": "npm run watch -- --watch-poll",
  "hot": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
  "prod": "npm run production",
  "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js",
  "dev-first": "cross-env APP_NAME=the_first npm run dev",
  "prod-first": "cross-env APP_NAME=the_first npm run production",
  "dev-second": "cross-env APP_NAME=the_second npm run dev",
  "prod-second": "cross-env APP_NAME=the_second npm run production"
},

现在您可以使用 npm run dev-first 仅编译第一个应用程序的资源，并使用 npm run dev-second 编译第二个应用程序。

如果你没有安装cross-env，你可以使用以下命令安装：

npm install --save-dev cross-env