- Creating scripts to automate tasks on your computer
- Access to manipulating files
- Creating HTTP servers
- Creating tools for more robust development environments for frontend code with Bundlers
Babel has a plug-in architecture that allows you to add special features like transpiling JSX in react or other custom syntax. It has certainly made maintaining browser compliant code much easier.
Sass/SCSS, Stylus, and LESS are different CSS processors. What they do is let you write your styling using a different sometimes more robust syntax which is then compiled into standard CSS. Before there was CSS custom-properties, people would use Sass for variables, functions, mix-ins, and other really helpful features in making more CSS faster.
Prettier is a code formatter. Prettier can be used in your IDE, as a separate process or in your build process. Many believe it is best to have it as part of your build step or CI/CD pipeline so the developer doesn’t get lazy in writing well-formatted code but still ensures code pushed to the team’s repository is formatted based on team conventions. Many just use prettier as an IDE extension and allow it to format their code on save, making sure all the indentation and syntax is looking alright and organized.
Bundlers and TaskRunners
During these times having your code run through all these tools could get really tedious, so Task Runners like Gulp and Grunt came into existence that allowed you to create a chain of tasks to run. So with a command, we can set it to run ESLint, compile our Sass, transpile with Babel, then bundle with Browserify.
Webpack came and changed all of it, a bundler with a plug-in architecture so you can configure all your build steps into webpack instead of using a separate task runner. Just install webpack plug-ins for babel, typescript, prettier, eslint, etc. so when you trigger webpack to bundle your code it executes your desired workflow.
Rollup entered the bundler world with the innovation of treeshaking. Treeshaking allows the bundler to monitor your dependencies for unused code so if you only use one or two lodash or jQuery functions you don’t have to bundle the whole library allowing for much more optimized bundles. The creators of Roll-Up also created the Frontend framework, Svelte.
Configuring Rollup or Webpack can be a painful process so Parcel was created which is a no config bundler, it just works. It detects config files for babel or typescript and immediately knows what to do. (For most common uses, Webpack and Rollup are still the way to go for more granular control).
Browser compatibility with ES6 modules has finally hit a critical mass that it may be more practical to begin using them instead of pretending to use them as currently done with modern bundlers. Snowpack, the newest player in the bundler space doesn’t really bundle your code but still runs all the main processes but allows your code to be separate modules. The benefit of this is as your code gets larger the speed of the development server stays fast cause it isn’t rebuilding your entire app with every save, just the modules that have changed. Snowpack shows a lot of promise for the future of more productive development environments.
While typically a lot of tooling is already configured for you in the project generators for all the major frameworks, knowing what the role of these tools are can certainly make it easier to navigate errors and the sea of config files in your projects to diagnose a problem and begin to fix it.