npm's personal messenger
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    js-babel-devpublic

    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

    Keywords

    install

    npm i js-babel-dev

    Downloadsweekly downloads

    28

    version

    6.0.7

    license

    MIT

    repository

    github.com

    last publish

    collaborators

    • avatar