Laravel Mix - Is Chaining Required to Ensure Execution Order?

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();

Manichaeism

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.

Costa

Thanks for the feedback! From my understanding, the concat, styles, and scripts methods are more-or-less aliases of one another. I don't imagin there's a situation where a mix.sass() call might rely on mix.styles() (or similar) completing, but if it did, I'd need to watch out for that and look for an event that might be fired that I could respond to and proceed, correct? I do have some copy tasks but those are fine if they're async. – Manichaeism

Correct, concat, styles, combine, styles, babel and minify are aliases of one another. It is performed after compilation by webpack, so you don't need to worry about a sass call relying on styles, but the other way around. Custom tasks are run after webpack compilation. You can mix.dump config to debug it. – Costa

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

Hosmer

Thanks for the reply. In the example above, everything is procedural. Nothing happens within a method that could be possibly async. This might be the case with some of the Laravel Mix methods, which is my main concern. Though, it would stand to reason that if they made Mix charitable, they would not make any method async. – Manichaeism