WEBVTT NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com 00:00:02.106 --> 00:00:05.216 align:middle Let's get back to talking about the real power of Webpack: 00:00:05.496 --> 00:00:08.696 align:middle the ability to import or require JavaScript files. 00:00:08.826 --> 00:00:12.256 align:middle Pretend that building this string is actually a lot of work. 00:00:12.476 --> 00:00:16.846 align:middle Or maybe it's something we need to re-use from somewhere else in our code. 00:00:17.406 --> 00:00:20.056 align:middle So, we want to isolate it into its own file. 00:00:20.056 --> 00:00:23.836 align:middle If this were PHP, we would create a new file to hold this logic. 00:00:24.396 --> 00:00:27.256 align:middle In JavaScript, we're going to do the same thing. 00:00:28.116 --> 00:00:32.556 align:middle In assets/js/, create a new file called get_nice_message.js. 00:00:33.566 --> 00:00:40.016 align:middle Unlike PHP, in JavaScript, each file that you want to use somewhere else needs 00:00:40.016 --> 00:00:45.436 align:middle to export something, like a function, object, or even a string. 00:00:46.166 --> 00:00:52.246 align:middle Do that by saying module.exports = and then the thing you want to export. 00:00:52.916 --> 00:00:56.136 align:middle Let's create a function() with one argument exclamationCount. 00:00:56.796 --> 00:00:59.586 align:middle Inside, let's go steal our string... 00:01:03.636 --> 00:01:12.576 align:middle then return that string and, to increase our fanciness, add '!'.repeat(exclamationCount). 00:01:13.206 --> 00:01:18.456 align:middle Yes. Because strings are objects in JavaScript, this works - it's kinda cool. 00:01:19.346 --> 00:01:25.156 align:middle By the way, when a JavaScript file exports a value like this, it's known as a "module". 00:01:25.726 --> 00:01:31.016 align:middle That's not a big deal, but you'll hear this term a lot: JavaScript modules. 00:01:31.146 --> 00:01:35.956 align:middle OooOOOoo. It just refers to what we're doing here. 00:01:37.416 --> 00:01:39.946 align:middle Now go back to app.js. 00:01:40.076 --> 00:01:41.536 align:middle At the top, well... 00:01:41.646 --> 00:01:45.926 align:middle it doesn't need to be on top, but usually we organize the imports there, 00:01:46.466 --> 00:01:51.236 align:middle add const getNiceMessage = require('. 00:01:51.616 --> 00:01:58.366 align:middle /get_nice_message'); Notice the .js extension is optional, you can add it 00:01:58.366 --> 00:02:01.016 align:middle or skip it - Webpack knows what you mean. 00:02:01.506 --> 00:02:04.306 align:middle And because, key strokes are expensive... 00:02:04.306 --> 00:02:08.066 align:middle and programmers are lazy, you usually don't see it. 00:02:08.836 --> 00:02:10.436 align:middle Also, that . 00:02:10.436 --> 00:02:12.586 align:middle / at the beginning is important. 00:02:13.626 --> 00:02:19.046 align:middle When you're pointing to a file relative to the current one, you need to start with . 00:02:19.046 --> 00:02:24.826 align:middle / or ../. If you don't, Webpack will think you're trying to import a third-party package. 00:02:25.156 --> 00:02:26.206 align:middle We'll see that soon. 00:02:27.446 --> 00:02:30.806 align:middle And now that we have our getNiceMessage function, let's call it! 00:02:31.436 --> 00:02:37.786 align:middle Pass it 5 for just the right number of excited exclamation points. 00:02:37.786 --> 00:02:42.726 align:middle And because we're running the "watch" command in the background, when we refresh, it just works! 00:02:43.696 --> 00:02:47.466 align:middle But! When we originally looked at the Webpack docs, 00:02:47.716 --> 00:02:51.376 align:middle they weren't using require and module.exports! 00:02:51.906 --> 00:02:55.526 align:middle Nope, they were using import and export. 00:02:55.526 --> 00:03:01.776 align:middle It turns out, there are two valid ways to export and import values from other files... 00:03:01.866 --> 00:03:04.096 align:middle and they're basically identical. 00:03:05.346 --> 00:03:11.096 align:middle To use the other way, remove module.exports and say export default. 00:03:12.026 --> 00:03:13.806 align:middle That does the same thing. 00:03:14.296 --> 00:03:16.116 align:middle The default is important. 00:03:16.986 --> 00:03:22.946 align:middle With this syntax, a module, so, a file, can export more than one thing. 00:03:23.386 --> 00:03:26.296 align:middle We're not going to talk about that here, but most of the time, 00:03:26.296 --> 00:03:31.676 align:middle you'll want to export just one thing, and this default keyword is how you do that. 00:03:33.006 --> 00:03:39.716 align:middle Next, back in app.js, the require changes to import getNiceMessage from '. 00:03:40.036 --> 00:03:41.756 align:middle /get_nice_message'. 00:03:42.676 --> 00:03:43.136 align:middle That's it! 00:03:43.486 --> 00:03:47.166 align:middle That is 100% the same as what we had before. 00:03:47.956 --> 00:03:49.796 align:middle So, which should you use? 00:03:50.466 --> 00:03:52.466 align:middle Use this syntax. 00:03:52.986 --> 00:03:55.366 align:middle The require function comes from Node. 00:03:55.756 --> 00:04:02.176 align:middle But the import and export syntax are the official way to do module loading in ECMAScript, 00:04:02.476 --> 00:04:06.246 align:middle which is the actual name for the JavaScript language specification. 00:04:06.896 --> 00:04:10.216 align:middle You can - and should - also use this for CSS. 00:04:10.556 --> 00:04:12.616 align:middle Just import, then the path. 00:04:13.076 --> 00:04:18.006 align:middle There's no from in this case because we don't need it to return a value to us. 00:04:18.006 --> 00:04:21.386 align:middle Make sure all this coolness works: refresh! 00:04:21.836 --> 00:04:24.686 align:middle Yes! Woh! Hey! 00:04:24.906 --> 00:04:25.936 align:middle Shut the front door! 00:04:26.216 --> 00:04:30.296 align:middle Did we just organize our JavaScript without global variables? 00:04:30.596 --> 00:04:32.626 align:middle Yes! We totally did! 00:04:32.806 --> 00:04:34.796 align:middle And that is no small thing. 00:04:35.316 --> 00:04:41.376 align:middle Heck, we could stop the tutorial right now, and you would still have this amazing superpower. 00:04:42.206 --> 00:04:43.466 align:middle But... we won't! 00:04:44.106 --> 00:04:46.876 align:middle There is still so much cool stuff to talk about. 00:04:47.356 --> 00:04:52.156 align:middle Like, how we can now super easily install third-party libraries via Yarn 00:04:52.366 --> 00:04:54.826 align:middle and import them in our code. 00:04:55.166 --> 00:04:56.166 align:middle Let's do it!