npm-starter

This enables you to write ES2015 code but before the package is published on NPM, it gets converted to ES5 code so anyone can use it in their projects.

Features

• ECMAScript 2015 Support
• Airbnb Style Guide
• Mocha & Chai for Testing
• Predefined NPM Scripts
• No Unnecessary Boilerplate

Getting Started

You just need to clone this project, delete the .git folder and install the NPM dependencies.

$ git clone https://github.com/deiucanta/npm-starter.git
$ cd npm-starter
$ rm -rf .git
$ npm install

You can run git init as well to start your own git repo. Next, you should edit package.json to reflect your package name and version.

Usage

There are a few predefined NPM scripts available. Run them by typing this in your terminal: npm run [script]

Name	Description
lint	Runs ESlint on all files from ./src and ./tests
lint:fix	Runs ESlint and fixes all the inconsistencies
test	Runs the tests with Mocha
test:dev	Re-runs the tests whenever a change occurs
build	Compiles all ES2015 files to ES5 (legacy code)
clean	Removes the compiled files

NOTE: There is another script prepublish that runs before you publish the package to NPM. All it does is to run clean and build.

Short Guides

How to add object rest spread capabilities?

• Install the Babel plugin via NPM

npm i --save-dev babel-plugin-transform-object-rest-spread

• Add the transform-object-rest-spread to the plugins array in your .babelrc file.

{
  "presets": ["es2015"],
  "plugins": [
    "transform-runtime",
    "transform-object-rest-spread"
  ]
}

• Now you can use the spread operator (...) for objects as well!

How to add support for React and JSX?

• Install the Babel plugin via NPM

npm i --save-dev babel-preset-react

• Add the react preset in your .babelrc file.

{
  "presets": ["es2015", "react"],
  "plugins": [
    "transform-runtime"
  ]
}

• Install the ESlint React plugin via NPM

npm i --save-dev eslint-plugin-react

• Change the extends property in your .eslintrc file to be just airbnb instead of airbnb/base.

{
  "parser": "babel-eslint",
  "extends": "airbnb",
  "rules": {}
}

P.S. This approach is perfect if you write a React library but if you build an app you might want to consider Webpack which helps you bundle everything/

Want to know how to use other experimental features?

Open a new issue with the feature you want and I'll add a short tutorial for you - like the one above.

Troubleshooting

• After I run npm install I get UNMET PEER DEPENDENCY for two packages?

This is totally fine. It happens because Airbnb's ESlint package needs those but only when you want to use React. This project uses only the airbnb/base set of linters available in Airbnb. It includes everything you need except the React parts — which you might not need.

Change Log

1.0.0 (2016-04-15) — initial release

Contributing

Before you submit a pull request, please take the following actions.

• Open an issue describing the contribution you would like to make
• Discuss until we all agree that your idea is useful for the project
• Create a pull request but make sure you follow the style guide and the tests pass
• Voila! You've done an amazing job.

Credits

• Hexbridge for sponsoring my open-source work.
• Airbnb for the work they've put into the javascript style guide and into the ESlint package.

License

MIT @ Andrei Canta