Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/devunltd/js-library-boilerplate

Javascript Starter Boilerplate - Webpack 4, Babel 7, UMD, Hot Reloading, and more
https://github.com/devunltd/js-library-boilerplate

babel babel7 boilerplate javascript javascript-library library-boilerplate starter-kit webpack webpack4

Last synced: about 6 hours ago
JSON representation

Javascript Starter Boilerplate - Webpack 4, Babel 7, UMD, Hot Reloading, and more

Awesome Lists containing this project

README

        



Javascript Library Boilerplate


Library Starter Kit for your Javascript projects


npm version latest commit Build Status Publish Status

This is a more robust library boilerplate. For a minimal alternative, check out [js-library-boilerplate-basic](https://github.com/hodgef/js-library-boilerplate-basic).

## ⭐️ Features

- Webpack 5
- Babel 7
- Hot Reloading (`npm start`)
- CSS Autoprefixer
- SASS/SCSS support
- UMD exports, so your library works everywhere.
- Based on [CRA v5.0.0](https://github.com/facebook/create-react-app/releases/tag/v5.0.0) (For Vanilla JS libs or React libs)
- Jest unit testing
- `npm run demo` To build a ready-for-deployment demo [(Example)](https://github.com/hodgef/js-library-boilerplate/tree/master/demo)
- Customizable file headers for your build [(Example 1)](https://github.com/hodgef/js-library-boilerplate/blob/master/build/index.js) [(Example2)](https://github.com/hodgef/js-library-boilerplate/blob/master/build/index.css)
- Configurable `postinstall` message [(Example)](https://github.com/hodgef/js-library-boilerplate/blob/master/bin/postinstall)
- Daily [dependabot](https://dependabot.com) dependency updates

## 📦 Getting Started

```
git clone https://github.com/hodgef/js-library-boilerplate.git myLibrary
npm install
```

## 💎 Customization

> Before shipping, make sure to:

1. Edit `LICENSE` file
2. Edit `package.json` information (These will be used to generate the headers for your built files)
3. Edit `library: "MyLibrary"` with your library's export name in `./config/webpack.config.js`
4. Edit `./bin/postinstall` (If you would like to display a message on package install)

## 🚀 Deployment

1. `npm publish`
2. Your users can include your library as usual

### npm

```
import MyLibrary from 'my-library';
import 'my-library/build/index.css' // If you import a css file in your library

let libraryInstance = new MyLibrary();
...
```

### self-host/cdn

```

let MyLibrary = window.MyLibrary.default;
let libraryInstance = new MyLibrary();
...
```

## ✅ Libraries built with this boilerplate

> Made a library using this starter kit? Share it here by [submitting a pull request](https://github.com/hodgef/js-library-boilerplate/pulls)!

- [hovercard](https://github.com/AnandChowdhary/hovercard) - Wikipedia summary cards for the web
- [perfect-immutable](https://github.com/Lukasz-pluszczewski/perfect-immutable) - Library to provide immutable methods
- [react-simple-keyboard](https://github.com/hodgef/react-simple-keyboard) - React Virtual Keyboard
- [redux-better-promise](https://github.com/Lukasz-pluszczewski/redux-better-promise) - Simple and powerful redux middleware
- [redux-breeze](https://github.com/Lukasz-pluszczewski/reduxBreeze) - Powerful redux wrapper
- [regex-colorizer](https://github.com/geongeorge/regex-colorizer) - Highlighter for Javascript regex syntax
- [simple-keyboard](https://github.com/hodgef/simple-keyboard) - Javascript Virtual Keyboard
- [simple-keyboard-layouts](https://github.com/hodgef/simple-keyboard-layouts) - Layout kit for simple-keyboard