In the past, I would use Gulpjs to run all my tasks. Although I don’t see anything wrong with that solution, this time around, I decided to try and do this with just NPM and Webpack. Its actually not that hard, and I’m happy with how this came out. As a disclaimer, I haven’t used this yet, so I’m not sure how well it will scale if I start adding packages.
Key NPM Packages and Tools used
Webpack is a module bundler. In the context of this app, it was used for the purpose of taking code in ES6 and React/JSX and bundling that into code that the browser can read. You can also use Webpack to compile your Typescript, Coffeescript and Templates like Handlebars. Although I didn’t use it, it can compile SCSS to CSS. This could be an improvement for this starter package later on.
This basically tells Webpack to use Babel to transpile the code to one file that can be used in the browser.
I used this package to compile my SCSS code into a CSS file. With this package, I was able to make a custom npm script that would watch for changes to scss.
"watch:scss": "node-sass --watch sass -o build/css --output-style compressed"
Note that the flag
--output-style compressed is used to minify the final CSS.
"watch:js": "onchange 'js/**/*.js' -- npm run webpack",
In the end there are three npm scripts that can be used to watch your files:
The repository can be located below:
There is still room for improvement here. As mentioned, it hasn’t be “battle tested” yet. I would like to add some support for unit tests (most likely using Jest). Also as mentioned above Webpack does have SASS support. It might be more efficient to use Webpack for this purpose. Finally, I think a live reload feature to refresh the browser on any changes would be a welcome feature to have during development.
As a final note, I wanted to point out that React JS has their own started kit which can be found here. Putting this together was good because it gave me a better understand of how the NPM ecosystem works. However if you do simply want to get up and running with React, the link above is the best place to start
I don’t believe that this is necessarily a better solution then using Gulp or Grunt as a task runner. The major advantage I feel is that there are less dependencies using this system.