npm-starter
v1.1.5
Published
A starter codebase for writing NPM packages using ES2015
Downloads
6
Maintainers
Readme
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 justairbnb
instead ofairbnb/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 getUNMET 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