Laravel Mix - Is Chaining Required to Ensure Execution Order? - laravel

Question

TLDR;
Do you have to chain Laravel Mix methods to maintain the execution order? Are any methods async that would prevent one from using the following non-chaining pattern, mix.scripts(); mix.js(); mix.sass();?
The few tests I've run suggest I do not need to chain.
An Example
Due to how our Laravel app is setup, we need to have more that one Laravel Mix setup. Instead of copy-n-pasting a webpack.mix.js file and modifying a few lines here and there in each file, we're looking at creating a config object that is passed to a singular webpack.mix.js file. In this file, we would check if various things have been configured, and if so, run the appropriate Mix method. Below is a pseudo-code example.
if ( config.js ) {
mix.js( config.js.src, config.js.dist );
}
if ( config.sass ) {
mix.sass( config.sass.src, config.sass.dist );
}
if ( config.concat ) {
if ( config.concat.styles ) {
// Could be more than one set of files that need to be combined, so array.
config.concat.styles.map( ( files ) => {
mix.styles( files.src, files.dist );
}
}
if ( config.concat.scripts ) {
// Could be more than one set of files that need to be combined, so array.
config.concat.scripts.map( ( files ) => {
mix.scripts( files.src, files.dist );
}
}
}
Currently, our code is more like most examples you see on the web.
mix
.options()
.webpackConfig()
.styles()
.styles()
.scripts()
.js()
.sass();

Answer 1

laravel-mix abstracts configuration of webpack and dynamically generates the webpack config.
The organization of its API implementation is done using Builder pattern with a fluent or chainable interface.
This makes it such that to produce a particular configuration only steps that are necessary to be performed have to be called.
You need to ensure that code in your webpack.mix.js module can be properly imported.
You need to be careful about the ordering of custom tasks such as copy, copyDirectory, combine, version. In v5.0.0, custom tasks are run without any bearing on their asynchronous nature. However there is coming changes to see to it that they are run sequentially.
Other API methods can be called in any order.

Answer 2

The few tests I've run suggest I do not need to chain.
You're absolutly correct!
Laravel Mix is written in JavaScript and makes use of Method Chaining.
You can visualize code execution with OnlinePythonTutor.
If you look at the code below, you'll find that you don't necessarily need to chain methods to maintain execution order.
class Person {
setName(name) {
this.name = name
return this
}
setAge(age) {
this.age = age
return this
}
}
var p = new Person()
p.setName("Alice").setAge(42) // Set name before age
p.setName("Bob") // Set name
p.setAge(42) // Set age
You can visualize this code here