This is a post in a series about code projects, open source, build tools, and deployment.
<script> tag. But a lot of powerful developer features and improvements are available by using a build tool.
What is a build tool?
A build tool is code that does something to other code. There are a bunch of things you might want to do with build tools:
- Task Running. You need to have some way to execute your build tools. There are some older task runners that performed configurable actions for you, like grunt and gulp. These have plugins and modules that do specific things to your code, like minify, run compilers, or process CSS. These task runners aren’t as popular lately, not because they aren’t effective or don’t work, but because bundling provides more flexibility and power when it comes to generating the output of your build tasks.
- Test. Automated tests can give you confidence that your code is working properly as you make changes to it. This can be considered part of your build process, making it so the build doesn’t complete successfully unless all of the tests pass.
Build tools can be a bit of a pain, and while knowing them well can give you a leg-up, in a lot of cases it isn’t necessary for the average app developer. Tool and framework developers often create their own abstractions on top of these build tools that make it easier (and probably better) for developers.
One prolific example is Create React App. This handy package contains all of the necessary dependencies, task running scripts, code analysis, test framework, compiling tools, and bundlers which you could need to create… uhm… your own React app. It’s all configured for what is considered ‘best practices’, and gives you a couple of ways that you can customize it yourself. One of the best features is the ability to “eject”, or remove the abstraction and expose all of the underlying tools.
If you were to eject Create React App, you would find Webpack, Babel (and babel-plugin-macros), Jest, ESLint, SASS, PostCSS, and TypeScript are all baked into this little package. It also includes things to make your life and your users’ lives better too, like accessibility checking. It’s a really handy tool, and a perfect example of a low-to-no config build tool.
Another tool that can help with this is CodeSandbox, and online programming environment that lets you get up and running on a whole bunch of frameworks inside your web browser! It’s really cool, and very powerful.
Know it, but Don’t Sweat It
There’s a lot of stuff that I’ve shared here, and I think it’s good to know about it all. However, it can be really easy to get overwhelmed by all of the things you might think you have to learn. But guess what: In a lot of cases, you don’t have to learn all of these things. It’s good to know what’s under the hood, but even if you don’t, the engine will keep running.
Sometimes that might be necessary to change or tweak the settings in these build tools so it works for what you want to do, and that is a great time to dig into the documentation and understand how that specific tool works. But you don’t have to understand everything all at once.
Abstractions like Create React App and CodeSandbox make it easy to ignore these tools, and that’s a good thing. It lets you focus on building great things instead of continually messing around with the build process.
So go and build something!