javascript - Laravel mix，如何为前端和管理部分设置不同的 css 和 js？

Question

我想将 css 和 js 的管理和用户部分放在单独的文件中。 最好的方法是什么？ 我设置:`

mix.js('resources/js/app.js', 'public/js')
    .js('resources/js/admin/admin.js', 'public/js/admin')
    .sass('resources/sass/app.scss', 'public/css')
    .sass('resources/sass/admin.scss', 'public/css/admin');

` 但我的资源文件夹结构应该如何防止重复？任何指南如何最小化、分离或重组我的文件以获得更好的性能可读性？ 如何设置 laravel mix 以构建 2 个 js 和 2 个 css 以用于不同的用途。

Answer 1

这是我使用 minimist 所做的.这适用于 Laravel v8 和 Laravel Mix v5。

文件结构

resources
├── js
│   ├── app.js
│   └── admin.js
└── sass
    ├── app.scss
    └── admin.scss

安装包

# NPM
% npm install minimist --save-dev

# YARN
% yarn add minimist --dev

webpack.mix.js

const mix = require('laravel-mix');
const argv = require('minimist')(process.argv.slice(2));

const src = {
  user: {
    js: 'resources/js/app.js',
    sass: 'resources/sass/app.scss'
  },
  admin: {
    js: 'resources/js/admin.js',
    sass: 'resources/sass/admin.scss'
  }
}
const dest = {
  js: 'public/js',
  sass: 'public/css'
}
// For User
if (argv.user) {
    mix.js(src.user.js, dest.js) // Output: public/js/app.js
       .sass(src.user.sass, dest.sass); // Output: public/css/app.css
}
// For Admin
else if (argv.admin) {
    mix.js(src.admin.js, dest.js) // Output: public/js/admin.js
       .sass(src.admin.sass, dest.sass); // Output: public/css/admin.css
}
// Both
else {
    mix.js(src.user.js, dest.js)
       .js(src.admin.js, dest.js)
       .sass(src.user.sass dest.sass)
       .sass(src.admin.sass, dest.sass);
}

运行脚本

# NPM
% npm run watch --user
% npm run watch --admin

# YARN
% yarn watch --user
% yarn watch --admin

您可以将 watch 脚本替换为 dev 或 prod。

注意:Laravel Mix 仍然会持续监视resources 下的所有文件，每当目录下的任何文件发生更改时执行编译。