js-babel-dev

Consolidated Babel development dependencies.

The development tools comprise of:

• Linting tools.
• Babel CLI (for building to ES5 from scripts).

IMPORTANT

Do not reference this library unless you are happy staying in with the babel transpiler plugins used by my modules and other idiomatic decisions that I make.

Install

A single dependency will bring all the standard babel development dependencies:

npm install --D js-babel js-babel-dev

Typically you'll want to keep js-babel within the devDependencies, however the core Babel language libs are kept separate from the development tools enabling you to distribute the core language libraries with a module and avoid the extra weight of the linting and CLI tools.

Configuration

Example: package.json

{
  "scripts": {
    "test": "./node_modules/mocha/bin/mocha --recursive --compilers js:babel-register",
    "tdd": "./node_modules/mocha/bin/mocha --recursive --compilers js:babel-register --watch",
    "lint": "eslint ./src",
    "build": "babel src --out-dir lib --source-maps",
    "build:watch": "npm run build -- --watch",
    "prepublish": "npm test && npm run lint && npm run build"
  },
  "devDependencies": {
    "js-babel": "^6.0.0",
    "js-babel-dev": "^6.0.0"
  }
}

When linting modules with JSX use:

{
  "lint": "eslint --ext .js,.jsx ./src",  
}

Example: .babelrc

{
  "presets": ["es2015", "stage-0"],
  "plugins": ["transform-class-properties"]
}

Example: .eslint

{
  "parser": "babel-eslint",
  "extends": "airbnb",
  "rules": {
    "no-multiple-empty-lines": 0,
    "no-param-reassign": 0,
    "padded-blocks": 0    
  }
}

Additional rules for React:

{
  "rules": {
    "new-cap": [0, { "capIsNewExceptions": ["React.Component"] }],
    "react/jsx-closing-bracket-location": [2, { "location": "after-props" }]    
  }
}

Note: The babel-preset-react is not included. Reference the UIHarness for a compact and complete set of UI centric Babel presets.

Building ES6 =>ES5

npm run build
npm run build:watch

Linting

npm run lint

Linting uses the AirBnB style guide and corresponding Eslint based linter.

Why the AirBnB style guide?

When evaluating a number of JS styleguides the AirBnB guide was at the top of the list with respect to popularity. This was echoed in the number of stars on the Github repository (~29K at time or writing) compared to the second most popular style guide (ideomatic.js) which sat at ~10k.

Given styleguides are largely about attempting to standardize to the common norms ("code should look like it was authored by one person") unless the most popular option is flat-out insane, I feel the popularist decision has the most payoff.

Furthermore the AirBnB styleguide seemed to have the most up-to-date support for babel plugins to Eslint.

Tests

npm install
npm test

---

License: MIT