cloud function. So, let's say we had a directory called auto imports. Then, inside of this directory, we have two files. js.
Each file will just contain a console log. letting us know that the file is in fact included and running. js, I'll create a variable called autoImportedModules. glob.
This function takes a glob pattern for matching a certain set of files. We'll target all the js files in the autoImports directory. Now, let's just console log autoImportedModules to see what we get. Okay, that's actually pretty cool.
We've got the two file names as the keys and then a function that dynamically imports the modules as the values. That means that we should be able to loop over the properties of this object and run the dynamic import for each of them. Let's give that a try. I'll give the browser a reload just to clear up the console and sure enough In the console we get the logs from the two auto imported files.
Very nice. I think it's important to notice here that the console logs from the files do come after the happy happy happy message from the last lesson though. js before the view app is ever created. That's because the files matched by the glob function are actually loaded asynchronously and they'll be split up into separate chunks at build time.
If you need the files to be imported and run synchronously though, you could provide an options object as the second argument to the glob function and then set eager to true. And since there are no more dynamic imports to call, we can actually remove the loop altogether. I'll save and then when I refresh the page again, this time the console logs from the files are first and the happy happy happy message is after. Using the glob to import these JavaScript files isn't really that practical though.
A more practical use case would be to create a folder of images in your assets directory. Here I have called all of these images my avatars. Inside here I've stored a number of different JPEG images. Now let's say I wanted to use these in a carousel or some kind of grid display of all the avatars in my app.
glob all of the JPEG files inside of that folder, eagerly load them, and then I can display each of them on the page by looping over the results of the glob import. default and not just the actual image itself, as this refers to the module that was imported. Over in the browser, you can see what the result of this would be. All of my images are displayed and are available, and I didn't have to import these images one by one.
Instead, I did them all at one time. cloud function. So, let's say we had a directory called auto imports. Then, inside of this directory, we have two files.
js. Each file will just contain a console log. letting us know that the file is in fact included and running. js, I'll create a variable called autoImportedModules.
glob. This function takes a glob pattern for matching a certain set of files. We'll target all the js files in the autoImports directory. Now, let's just console log autoImportedModules to see what we get.
Okay, that's actually pretty cool. We've got the two file names as the keys and then a function that dynamically imports the modules as the values. That means that we should be able to loop over the properties of this object and run the dynamic import for each of them. Let's give that a try.
I'll give the browser a reload just to clear up the console and sure enough In the console we get the logs from the two auto imported files. Very nice. I think it's important to notice here that the console logs from the files do come after the happy happy happy message from the last lesson though. js before the view app is ever created.
That's because the files matched by the glob function are actually loaded asynchronously and they'll be split up into separate chunks at build time. If you need the files to be imported and run synchronously though, you could provide an options object as the second argument to the glob function and then set eager to true. And since there are no more dynamic imports to call, we can actually remove the loop altogether. I'll save and then when I refresh the page again, this time the console logs from the files are first and the happy happy happy message is after.
Using the glob to import these JavaScript files isn't really that practical though. A more practical use case would be to create a folder of images in your assets directory. Here I have called all of these images my avatars. Inside here I've stored a number of different JPEG images.
Now let's say I wanted to use these in a carousel or some kind of grid display of all the avatars in my app. glob all of the JPEG files inside of that folder, eagerly load them, and then I can display each of them on the page by looping over the results of the glob import. default and not just the actual image itself, as this refers to the module that was imported. Over in the browser, you can see what the result of this would be.
All of my images are displayed and are available, and I didn't have to import these images one by one. Instead, I did them all at one time.