hekigan / generator-module-extended-boilerplate

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

generator-module-extended-boilerplate

⚙️ 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

• README.md template 📝
• ... with npm, Travis, David, Gitmoji badges 📈
• License generation
• Travis CI integration 👷
• Coverage Reporting via Coveralls
• Typechecking: via Flow (optional)
• webpro/release-it integration
• Optimized for modern bundlers
• unpkg ready 😎

+ 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.