How to setup an app using browserify, babel, eslint, react/jsx, and jest (no gulp/grunt)?

Question

I would like to setup an app using

1. Browserify
2. BabelJS
3. ESLint
4. React(with jsx)
5. Jest

Npm as task manager (no gulp|grunt|brocoli)

Answer 1

First of all you need to install all those libraries with npm.

npm install --save-dev eslint, browserify, babelify, jest-cli

The package names self explain what lib is installed.

Browserify:

Assuming that app/index.js is your root file. You can add the following scripts to build and watch the source file.

"scripts": {
    "build": "browserify app/index.js > public/js/bundle.js",
    "install": "npm run build",
    "watch": "watchify app/index.js -o public/js/bundle.js"
  }

ES6 and JSX

To compile ES6 and JSX, add the following to package.json :

"browserify": {
    "transform": [
      "babelify"
    ]
  }

Now, browserify transforms your ES6 and JSX syntax to plain Javascript 5. For more transformations check this out https://github.com/substack/node-browserify/wiki/list-of-transforms.

JEST

To use Jest add the following to package.json.

"scripts": {
   "test": ""
 }

After that, you can run tests using npm test. Jest documentation

ESLINT

If it's your first time using ESLint, you should set up a config file using eslint --init and then you need to add a new script to package.json.

For example:

"lint" : "eslint app/*.js"

Note, you need to specify all your source files you want to be lint in the above command.