Frontend build system

TLDR Winner – Webpack

https://webpack.js.org/concepts/

There are numerous options for building, boundling and managing packages on the market.

 

Package managers:

  • Bower – no longer supported, creates flat tree of packages, it requre to resolve packets conflicts and uses only one copy of each package (contrary to npm, where we can have huge tree with many copies of the same package)
  • JSPM – slow and limited bundling
  • Yarn – actually quite good, reasonable competitor
  • Webpack – nice boundling, uses npm (might be slow on test builds from scratch)

 

Builders:

  • Gulp – quite nice configuration, wide variety of available packages, huge community support
  • Grunt – bloated config files
  • Webpack – flexible and smart way to configure required code, can handle basic jobs like minifiaction and mapping

 

Grande finale Webpack vs Gulp&Yarn

There is a key difference in a way webpack and gulp  works.

  • Gulp is a task runner, most common flow goes like this: concatenates all js files and then process the whole file through pipe to get final app boundle.
  • Webpack’s job, on the other hand, is to bundle scripts together, it starts on some entry points, then track required files and modules and join them together. This mean that not used modules are omitted Also webpack is capable of performing some tasks like minification and creating sourcemaps for the bundle. The only thing it is missing compared to gulp pipes, is test running. But that can be ran directly by npm scripts, which is common trend among react community.

Leave a Reply

Your email address will not be published. Required fields are marked *