0.0.1-development • Published 4 years ago

@starsoul/fruit v0.0.1-development

Weekly downloads
1
License
MIT
Repository
github
Last release
4 years ago

Introduction

Two of the most-popular libraries used to bundle JavaScript are rollup and webpack.

The general consensus is that rollup should be used for building libraries and webpack should be used for building applications.

This is because webpack comes with features like hot module reloading (which has obvious benefits for applications) while rollup "scope hoists", which guarantees smaller bundles than webpack.

However, there is a decent amount of boilerplate associated with configuring a baseline rollup library (.eslintrc, travis.yml, .babelrc, jest, etc.).

fruit aims to generate rollup library boilerplate (using some preferred configuration options) so that you can start building your library right away.

Installation

npm install @jaebradley/fruit --global

Usage

Execute fruit via the command line and then follow the configuration options

configuration-options

which will install dependencies and generate a basic bundle, with "logic" for placeholder library exports.

bundle-generation

Configuration Options

Right now, there are two different types of libraries you can generate boilerplate for - Node and React.

Both come with

Node

Node Library Directory Structure (with commitlinting)

/some/project/path
├── .babelrc
├── .eslintignore
├── .eslintrc
├── .gitignore
├── .npmignore
├── .travis.yml
├── build
|  ├── index.cjs.js
|  ├── index.esm.js
|  └── index.js
├── commitlint.config.js
├── package-lock.json
├── package.json
├── rollup.config.js
└── src
   ├── index.js
   └── index.test.js

React

This option also comes with the following additional dependencies

Production Dependencies

  • react
  • react-dom
  • prop-types

Development Dependencies

It also comes with Storybook which makes it easy to display different component use-cases.

You can run Storybook locally, on port 6006 by executing the storybook npm script (npm run storybook).

React Library Directory Structure (with commitlinting)

/some/project/path
├── .babelrc
├── .eslintignore
├── .eslintrc
├── .gitignore
├── .npmignore
├── .storybook
|  ├── addons.js
|  ├── config.js
|  └── webpack.config.js
├── .travis.yml
├── build
|  ├── index.cjs.css
|  ├── index.cjs.js
|  ├── index.css
|  ├── index.esm.css
|  ├── index.esm.js
|  └── index.js
├── commitlint.config.js
├── package-lock.json
├── package.json
├── rollup.config.js
└── src
   ├── AnExample
   |  ├── AnExample.scss
   |  ├── AnExample.stories.jsx
   |  ├── AnExample.test.jsx
   |  └── index.jsx
   ├── AnotherExample
   |  ├── AnotherExample.scss
   |  ├── AnotherExample.stories.jsx
   |  ├── AnotherExample.test.jsx
   |  └── index.jsx
   ├── index.js
   └── setupTest.js

commitlint

I like commitlinting.

If you select the commitlint feature, it'll add the following development dependencies

and the following npm scripts

  • commitmsg
    • A commit message .git hook that will trigger commitlint
  • gc

semantic-release

I like to automate package deployment using semantic-release.

If you select the semantic-release feature, the following dependencies will be added

along with the following npm scripts

  • deploy
    • which will trigger the semantic-release deploy process
  • semantic-release (for use in npm run deploy)
  • travis-deploy-once (for use in npm run deploy)

Footnotes

1 Ok, maybe more like "many seconds" (☕ time?)