Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Use Brace Expansion to Maximize Efficiency When Installing Packages from NPM

    Thomas GrecoThomas Greco

    This lesson teaches its viewers a neat trick for installing NPM packages. This trick is made possible through "Brace Expansion". It allows us to install groups of packages from NPM without having to name each package explicitly, granted that their names share similar text.

    By the end of this lesson you'll have learned how to eliminate the need to write out dozens of package names when adding them to a project.



    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson




    Instructor: Here, I just have a sample React application. If we look inside our package.json, we can see that we have a few starter libraries, as well as Prettier in our dev dependencies. We're off to a great start, but let's say I want to Redux-Saga for asynchronous activity, as well as any other packages.

    In addition to Saga, I'm going to install Redux-DSM. This is a neat little state machine package for Redux. To cap this off, I'm going to install the Redux DevTools extension, as well as the Redux Logger package, because why not have both? Running this would work fine, but there's an easier, or rather a more concise way, to do this.

    Since both of our packages start with this Redux -, I can write this, and then open up some brackets. Now, inside these brackets, I'm going to pass in Saga and DSM. I'm going to do the same for our Devtools extension and the logger package.

    This may seem sort of trivial. Let's check out another example where we're installing ESLint plugins and configs.

    Here I'm going to install the ESLint config here being B, the config Prettier, and then a gang of ESLint plugins. Now, as you'll notice, I have to write out the title of each plugin in its entirety.

    Only when I've written out every plugin I need is when I'm finished. Granted I don't make a mistake because then I might have to sift through this long line of plugins to figure out where it's occurring. N

    Now all that time I took resulted in nothing. There's no packages that have gotten installed. I'm back to zero.

    Now that we've seen the long-form, let's see how we could speed this up a little bit. Again, we're just going to have ESLint this time. The thing we'll have inside of our first pair of brackets is config. Config will then lead to another nested bracket, which we'll use to name all of the config packages that we want installed.

    Then filing our config packages, we'll use a comma to specify all of our ESLint plugins. Again, we're nesting another bracket inside here. Then we're just specifying the React, React hooks plugin, as well as HTML import, JSX a11y, and last but not least, Prettier.

    Before I run this, just to recap. It's going to pick up that ESLint parenthesis, and then it's going to start installing ESLint config Prettier, config BnB, and then filing this.

    It's going to do the same for our plugins, which as you see, we've passed a whole bunch of them there. Finally, we'll just add the d flag to specify these as the dev dependencies, and we're off.

    As you can see, they've installed just fine for us, and we've really got to cut done on the amount of code that we've had to write, or amount of text rather, to get these packages going.