Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/theoomoregbee/rollup-babel-react-browser-lib-starter
This is a starter pack for building maintainable browser library with Rollup, babel and react 🚀
https://github.com/theoomoregbee/rollup-babel-react-browser-lib-starter
babel browser iife javascript library pack react rollup starter
Last synced: 3 months ago
JSON representation
This is a starter pack for building maintainable browser library with Rollup, babel and react 🚀
- Host: GitHub
- URL: https://github.com/theoomoregbee/rollup-babel-react-browser-lib-starter
- Owner: theoomoregbee
- License: mit
- Created: 2018-06-28T13:56:51.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-07-16T05:10:49.000Z (over 6 years ago)
- Last Synced: 2024-10-12T01:11:52.504Z (3 months ago)
- Topics: babel, browser, iife, javascript, library, pack, react, rollup, starter
- Language: JavaScript
- Homepage: https://theo4u.github.io/rollup-babel-react-browser-lib-starter
- Size: 167 KB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Rollup + Babel + React Browser Lib
This is a starter pack for building **maintanable** browser library with
* [rollup](https://github.com/rollup/rollup) building browser compatible `.js` lib
* [Babel](https://github.com/babel/babel)
* [React](https://github.com/facebook/react)
## Use Cases
* **Image previewer**: Where you can trigger a complex image previewer with a particular class name or selector
* **Image Editor**: Complex image editor where including the distributed `.js` does the trick, like the libraries created with JQuery
* **And So On**
## Babel Plugins Supported
Currently supports the below babel plugin
* [async/await](https://www.npmjs.com/package/babel-plugin-transform-async-to-generator)
* [spread...rest](https://www.npmjs.com/package/babel-plugin-transform-object-rest-spread)
* You can add more in `.babelrc`
## Styles
* Supports `scss`
**Note** Make sure to isolate your styles under a particular class name like the `LibraryName` to not conflict with parent caller. If you want to make use of external scss, use `@import` directive like so
```scss
.libraryName {
// external
@import '../../node_modules/bootstrap/scss/bootstrap.scss';
... custom styles
}
```
### Dev server
```
npm run dev
```
To run dev server in watch mode. Which builds in `/dist` directory. Open `index.html` in your browser to see it in action
## Build
```
npm run build
```
```html
...
...
function success (param){
alert('Done with success, check console');
console.log(param)
}
new LibraryName('.btn', success);
```
## Build Config
* Library name can be updated in [rollup.config.js](rollup.config.js), `moduleName` field. Then `new NewName(...args)`
* Generated library file name can be changed in [package.json](package.json), `browser` field.
## Helpers
* [Cache](/src/cache.js): An in app memory singleton for holding global variables which can be gotten anywhere even in the react app services like so
```js
// setting a variable to be global
import Cache from './helpers/cache'
...
Cache.set('key', value)
```
```js
import Cache from './helpers/cache'
...
// usage
export const performAction = () => {
const key = Cache.get('key')
console.log('key', key)
}
```
Check [main.js](/src/main.js) for setting and usage in [service.js](src/app/utils/service.js)
## Contribution
Stick to
* [standardjs](https://github.com/standard/standard) formatting and linting
* [conventional commit message](https://conventionalcommits.org/) for commit message patterns
## Contributors
* Theophilus Omoregbee