Sage 10 Uses Laravel Mix?

[bigskillet]

Just curious why Sage 10 now uses Laravel Mix instead of Webpack? Mix creates a yarn.lock and a package-lock.json, which seems redundant, doesn’t it?

[mmirus]

Hey @bigskillet - I believe Sage 9 already had both of those files in the repo, though they might have been cleaned out by one of the steps if you used the installer to set up a new project. Can’t remember on that for sure.

I think the general idea for switching to Mix was to pick something simpler, more standardized, and more familiar to folks doing work beyond just Sage (e.g., Laravel projects), while keeping it something that could still be easily extended and customized as needed.

[kellymears]

I’m sure you already realize – but as a note here for other readers who might not – Mix is webpack, to all intents and constructions. It’s really just a wrapper around webpack and babel, fundamentally, and it still lets you configure Webpack directly if you’re so inclined – with some small caveats: https://laravel-mix.com/docs/5.0/quick-webpack-configuration.

I think whatever is lost using a wrapper instead of using webpack directly is more than compensated for by the pluggability @mmirus mentioned. As an example (of both Mix and shamelessly plugging your own stuff): If you wanted to experiment with building WordPress blocks you could:

1. roll your own Webpack;
2. use a framework like ahmadawais/create-guten-block/@wordpress/scripts, or;
3. Install my mix plugin laravel-mix-wp-blocks.

I think option #1 is burdensome and option #2 is overly opinionated. But, with #3 you just run yarn add laravel-mix-wp-blocks and specify the dev and dist paths in your mix config:

require("laravel-mix-wp-blocks")

mix.block('resources/assets/scripts/blocks.js', 'scripts')

Done! You’re all set to import { registerBlockType } from @wordpress/blocks (or use any of the components from any of @wordpress’ other react packages, for that matter.) Plus you can see everything that it installed in your package.json file.

Mix isn’t perfect but people are going to make some excellent plugins that greatly enhance all of our work using it, by sheer virtue of it having an API. When you compare the process of implementing Vue with Sage 9’s bespoke configuration (though it is exceptional) and doing the same in Sage 10 the difference is both staggering and exciting.

[bigskillet]

Thanks for chiming in @kellymears.

Yes, I should have said , “using mix on top of webpack” rather than “instead” of webpack. I understand that it’s an additional layer, which is why I was questioning its use. Why add another layer?

I like using yarn, but I noticed when using Mix standalone, if I install with yarn, Mix will install other mandatory updates via npm, resulting in both a yarn.lock and package-lock.json. I’m questioning having two lock files. Does it matter? Even if it doesn’t affect anything, I hate having unnecessary files in my folder.