webpack-es6-demo

A very basic but complete demo project that use Babel for ES6 transpilation, Webpack2 as module loader, SASS as a CSS preprocessor, Karma, Mocha, Chai, chai-as-promised, Sinon, sinon-stub-promise for tests, and Istanbul for code coverage.

Quick Start

$ npm i -g webpack webpack-dev-server karma-cli rimraf
$ git clone --depth 1 https://github.com/phiphou/webpack-es6-demo.git
$ cd webpack-es6-demo
$ npm install
$ npm run start

Your default browser should open at http://127.0.0.1:8080, then you can start developing in ./src/app/main.js

Table of contents

• Quick Start
• Installing
  • Global dependencies
  • Install
• Usage
  • Development
  • Building
  • Testing
• License

Installing

First, make sure you've got NodeJS installed. If not, go to nodejs.org to download and install it. It will also install NPM.

If everything is ok, node -v should print your node version and npm -v should print NPM's one. Minimum requirements for this project are node >= 5.x.x and NPM >= 3.x.x.

Global dependencies

Before installing the application, you may have to install some global dependencies.

Dependency	Version	Install
Webpack	2.1.0-beta.25	npm i webpack -g
Rimraf	2.5.x	npm i rimraf -g
Karma	1.3.x	npm i karma-cli -g
Webpack dev server	2.1.0-beta.0	npm i webpack-dev-server -g

You can also install all these dependencies in just one command :

$ npm i -g webpack webpack-dev-server karma-cli rimraf

Install

Clone or fork this repo and run npm install to install the application.

$ git clone https://github.com/phiphou/webpack-es6-demo.git
$ cd webpack-es6-demo
$ npm install

Dependencies will be installed in the ./node_modules folder.

Usage

Start developping

Dive into development right now by just running:

$ npm run start

This will pre-build the application, start webpack's dev server and open your browser at http://127.0.0.1:8080. Then, have a look at ./src/app/main.js.

Building

You can build the app and get a "ready to deploy" release by just running:

$ npm run prod

You'll find your build in the ./dist directory

Testing

Karma is used as test-runner, you can configure it in the ./config/karma/karma.conf.js file. You can run tests by just typing :

$ npm run test

Tests are written in ES6 for Mocha and use Chai, chai-as-promised, Sinon and sinon-stub-promise.

Code coverage

Istanbul is used as code coverage tool. You can configure it in the ./config/karma/karma.conf.js file.

It will produce reports you'll find in the ./coverage folder each time you run unit-tests.

License

This project is licensed under the terms of the MIT license.