Check out a free preview of the full JavaScript and TypeScript Monorepos course

The "Scripty" Lesson is part of the full, JavaScript and TypeScript Monorepos course featured in this preview video. Here's what you'd learn in this lesson:

Mike explains that it is best practice when building a monorepo to link, test, and build each repository the same way, in other words, to centralize the build script, and explains how and when to use scripty. Scripty is a CLI tool that allows developers to extract npm scripts into their own files without changing the command used to run them.

Preview
Close

Transcript from the "Scripty" Lesson

[00:00:00]
>> The next step we're going to take in making our mono repo more manageable. It's a lot of EMS there is I want to centralise our build scripts and here's what I mean by build scripts this stuff here. So the way I like to set up my mono repos.

[00:00:19]
Is whenever possible, build the same way, lint the same way. Test the same way, clean the same way. The more of that you can centralize the lower your maintenance overhead gets We're going to install a tool. It's not mono repo specific, but it works beautifully in this case.

[00:00:41]
And it is called script. The script job is to get this stuff out of the JSON file. Because this is frankly, this is not where scripts belong. You don't get syntax highlighting here. As things get more complicated. I mean, so in the class Raise your hands if you've worked on a project that has an NPM script like this where you have like, thing one and thing two and thing three, right.

[00:01:08]
It's just so painful to manage. And you can have bugs that are lurking in there. And it's just tough to see because it's just this one line that keeps going and going and going. We don't want to read code like that. And this is code don't make a mistake and think it's not.

[00:01:25]
So let's begin by installing scripting. This is another workspace level dependency because it's just a COI that we're invoking, right. It's not a library that we're requiring. Alright, so it's installed now and we can create a folder. Not in packages though. Just create a folder called scripts. And I'm going you don't have to do what I'm going to do.

[00:02:00]
I'm taking I'm taking some intermediate steps. Here to illustrate how this works. I just want to show you how scripting works. So I have no scripts in this package. json. I'll show you in the outline here. All I ever dev dependencies and volta and these top level things.

[00:02:23]
But if here I were to add scripts and then let's give ourselves great script D So the theme here, but the way this works is instead of actually implementing your script here, which could be echo Hi, Mike. Could be something like that, right? I mean, this would work for sure.

[00:02:50]
If I went yarn greet. Hi Mike. No problem. Instead of this, we're gonna say, you know what script D, you handle it for me. And then we would go into our Scripts folder and create create any executable file. Now today we're going to be mostly working with bash scripts, but I'm going to show you a more creative example.

[00:03:27]
Let me cheat here real quick. I have a mental block against the way this shibang works. Yep. Like, is it the exclamation first or what is it? Check that out user bin and node. So I'm going to close this and I'm going to reopen it. Okay, my syntax highlighting there and what type of file does this look like?

[00:03:54]
J s. And now I can run your and greet and let's add an emoji here something just to make it obvious we're not seeing the previous result. One last thing I have to do here, I have to make this file executable. And on a Unix system that's with chmod plus x and then you pass it the file.

[00:04:31]
That means this is not just a file I can read, and write to I can run it like a program. So now if I do yarn great. There's my emoji with Hi Mike. That's all it is. You just say, scripting handle this for me. And then you have this Scripts folder.

[00:04:49]
And the fact that this is this file is called greet. It just works. That this is where I can put my NPM script. Now I can have it in JavaScript. I can have it as a shell script. It's a real file with code in it, that syntax highlighting, I can lint it.

[00:05:10]
There's a great shell lint, it's great linter for shell scripts. So this is what scripting does for us.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now