تماشای این درس نیاز به اشتراک حرفه‌ای دارد.

Reviewing npm scripts0:00

Let's take a look at package.json. And I want to look at these npm scripts one more time, because, yeah, admittedly this long string here can look pretty confusing, but trust me, it's actually not. So first we can see dev and prod are simply shorthand. So let's get rid of those, not in real life, but just for the demo, to make it easier to take in. Okay, now we're left with these. So one for development, that's going to compile all of your files down. Then we have another one called watch. And what this does is, yes, it compiles everything down, but then it keeps an eye on your source.

file size as small as possible. In production mode, if you're using view, any potential warnings or logs will be stripped away. So as a general rule of thumb, when you're working locally, you will use one of these two. And then when you push to production, or even on your production server, you will trigger this command. Okay, next, what exactly is going on here? So let's just copy the entire thing and paste it into the console. Yeah, you could still do this if you want.

Running the script manually2:06

So let's just copy the entire thing and paste it into the console. Yeah, you could still do this if you want. And in our case, my mix file is currently blank, so it's incredibly fast. But yeah, for yours, it will do a general compile. All right, so what's going on here? And honestly, this is a little deceptively complex, only because Laravel should be accessible to all OSs and all systems. And in those cases, we have to do certain things to make sure everything works the way you expect. So for example, if we start, cross-environment is just a way to make sure that our command

Explaining cross-env variables2:33

you expect. So for example, if we start, cross-environment is just a way to make sure that our command and setting environment variables, things like that, that it works the same on both Windows and Mac. Because otherwise, Windows would expect one format for setting a variable, and then on your Mac or Linux, it's going to expect another. So this just normalizes it down. So that means on your own system, like I'm on a Mac here, if I wanted, I could personally remove that. Next, we can see I'm setting a node environment variable, and that will be used behind the

Breaking down Webpack flags3:21

And yes, that's true. In our case, we can shorten it. But once again, when we're dealing with multiple OSs, some people will have npm setup, some people will have Yarn, certain versions of those would install things differently. Honestly, it just gets a little tricky when you're dealing with compatibility. But yeah, on the Mac, I could just reference the executable. Next, progress. This is a Webpack option that just says, I want to see progress along the way. Next, hideModules. Again, this is just ways to clean things up.

Next, hide modules. Again, this is just ways to clean things up. I don't need to see all the modules that have been built. Finally, when you are running Webpack, and I don't expect you to know anything about Webpack, by the way. But as a quick note, when you are running Webpack, you always have to specify where your general configuration file is. Well, in your case, you're using Laravel Mix. You don't have one. So instead, we reference a Laravel Mix-specific configuration file.

Finding Mix config source4:07

You don't have one. So instead, we reference a Laravel Mix-specific configuration file. And that's it. So that means if I were to run this, it's still going to compile down just like it did before. Now, what exactly happens in our, in Mix's, configuration file? I'll close that out. Well, let's take a look. I'm going to search my node_modules directory, and we want Laravel Mix. And we'll go into our setup.

I'm going to search my node_modules directory, and we want Laravel Mix. And we'll go into our setup. This is the file that's being referenced. So when we run Webpack, we're saying, okay, your configuration file is the one that Mix has right here. And what we can see is we pull in Mix's initialization file that builds everything up. We then require your webpack.mix.js file. And again, in my case, it's blank. But anyways, we require that in, and that builds up the world for you. That's your place to say, okay, I want JavaScript compilation.

دوست دارید گاهی خبرهای Laracasts را ایمیل کنیم؟