• Introduction
• Installation
• Usage
• Configuration Options
  • Node
  • React
  • commitlint
  • semantic-release

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

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

Configuration Options

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

Both come with

• eslint
  • Extends from Airbnb's eslint config
• Babel 7
  • Specifically
    • @babel/cli
    • @babel/core
    • @babel/preset-env
    • babel-core (the 7.0.0-bridge.0 version to play nicely with jest)
• jest
  • Run tests by executing npm run test
• rollup (duh)
  • rollup-plugin-babel
  • rollup-plugin-babel-minify
  • rollup-plugin-commonjs
  • rollup-plugin-filesize
  • rollup-plugin-local-resolve
  • rollup-plugin-node-resolve
• A .travis.yml configuration file that will build, lint, and test your project for the latest version of Node@8 and the latest version of npm@5
  • Runs the npm run deploy script on master (this defaults to a no-op for the non-semantic-release option
• Will initialize git
• An entry point at src/index.js
• Building umd, cjs, and es modules that will output to build/index.js, build/index.cjs.js, and build/index.esm.js respectively.

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

• @babel/preset-react
• enzyme
• rollup-plugin-peer-deps-external
• rollup-plugin-postcss

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

• @commitlint/cli
• @commitlint/config-angular
  • The default commit convention is Angular
• @commitlint/prompt
• @commitlint/prompt-cli
• husky

and the following npm scripts

• commitmsg
  • A commit message .git hook that will trigger commitlint
• gc
  • Triggers the @commitlint/cli to help build a syntactically correct commit message

semantic-release

I like to automate package deployment using semantic-release.

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

• semantic-release
• travis-deploy-once

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?)