Skip to content

hekigan/generator-module-extended-boilerplate

 
 

Repository files navigation

generator-module-extended-boilerplate

npm version David

⚙️ This generator generates a (universal) npm module boilerplate

What does module-boilerplate offer?

  • Project structure to create a cross build npm module
  • Linting: via ESLint
  • Testing: with Coverage via Jest
  • CommonJS: build (/cjs) via Babel
  • ES2015: build (/es) via Babel
  • CSS/SASS: build (/css) via node-sass
  • AutoPrefixer via postcss
  • UMD build: (/dist) via Rollup (unminified & minified version)
  • Watch scripts: npm run (test|build):watch
  • Git hooks: precommit, prepush hooks defined in package.json
  • prepublish (before publishing to npm) script npm run build
  • Only publish what's needed (files field in package.json)

Nice to haves

+ Invisible contract which states that you will use gitmoji for commits 🤘 (just kidding, but you should)

You should probably enable greenkeeper (keeps your dependencies up to date)

Getting Started

Dependencies

install yeoman & this module globally via yarn

(this is one of the 'never install modules globally' exceptions)

yarn global add yo
yarn global add generator-module-extended-boilerplate

or via npm

npm install yo -g
npm install generator-module-extended-boilerplate -g

Running the generator

yo module-extended-boilerplate

Getting Started / Scripts

watch 👀

Testing via Jest in interactive watch mode

npm run test:watch

CommonJS build (/cjs) via Babel

npm run build:watch

ℹ️ use a split terminal window for maximum developer experience

build ⚙️

npm run build

The build command runs the following steps:

  1. Linting via ESLint (+ optional Flow typechecking)
  2. Testing (with Coverage) via Jest
  3. CommonJS build (/cjs) via Babel
  4. ES2015 build (/es) via Babel
  5. UMD builds (/dist) via Rollup
  6. CSS/SASS builds (/css) via node-sass and AutoPrefixer (optional)

which equals to:

  1. npm run lint
  2. npm run test:coverage
  3. npm run build:cjs
  4. npm run build:es
  5. npm run build:umd
  6. npm run build:sass

testing ✅

Tests your src folder via Jest, (test env is included in .babelrc)

npm run test

or with coverage (also used in precommit / prepush / prepublish)

npm run test:coverage

releasing 🔖

ℹ️ more info on webpro/release-it
ℹ️ premajor = x.x.x-beta.x


⚠️ watch out, semver has different rules pre 1.0.0

npm run release (premajor|patch|minor|major)
  1. Creates a version bump in package.json
  2. Commits a change with this message '🔖 vX.X.X'
  3. Creates a tag (github release) with the name 'vX.X.X' and as description 'Version X.X.X'
  4. Push to remote (with tags)
  5. npm publish (with npm run build as prepublish script)

⚠️ don't forget to answer Y on the 'publish to npm' question

You can change the release settings in the .release.json file in the root of your module folder.

Git Hooks ⛏

There are 2 git hooks defined in scripts in package.json
they check for broken builds and prevent push or commit.

prepush and precommit trigger:

  1. Linting via ESLint (+ optional Flow typechecking)
  2. Testing via Jest

License

The code is available under the MIT license.

About

⚙ npm module (UMD, CJS, ES6, SASS) boilerplate generator

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%