Consolidated babel dev-dependencies.
npm install js-babel-devThe 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.
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.
##### Example: package.json
``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:
`json`
{
"lint": "eslint --ext .js,.jsx ./src",
}
##### Example: .babelrc
`json`
{
"presets": ["es2015", "stage-0"],
"plugins": ["transform-class-properties"]
}
#### Example: .eslint
`json`
{
"parser": "babel-eslint",
"extends": "airbnb",
"rules": {
"no-multiple-empty-lines": 0,
"no-param-reassign": 0,
"padded-blocks": 0
}
}
Additional rules for React:
`json`
{
"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.
npm run build
npm run build:watch
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.
---