@frank3en/micro-library NPM

micro-library

Codecov GitHub Workflow Status npm bundle size NPM

Front-end devs share toys.

Features

Setup
Lint
Test -jest
Babel - transpile code from cmj to esm vite
Webpack - build - npm pack
CI github actions
Publish
Semantic Release with Github Actions
Git hooks
Test Coverage Report - in codecov

Getting started

Section1. Setup

The Open Source Definition
Code of Conduct there is something, contact method, needs to be updated.

npm-config-doc run npm config list -g

 init-author-email = "xxx@gmail.com"
 init-author-name = "xxx"
 init-license = "MIT"
 init-version = "0.0.1"

Section2. Lint

ESLint
eslint --init
in package.json add script: lint: "eslint ."

Section3. Test

Section4. Babel

transpiling files && use esmodule to run test

babel config

in 03-trend-babel branch run npm run test, will occur:

Jest encountered an unexpected token

Solution:

npm install --save-dev @babel/core @babel/cli @babel/preset-env

create babel.config.json

add cross-env and {env:{test:{...}}} in babel.config.json

add eslint plugins for jest yarn add --dev eslint eslint-plugin-jest

Section5. Webpack for build command

The goal is to build src into a umd-lib.

create webpack.config.babel.js
add npm run build:umd script
add prebuild script

how to use esm in webpack.config.js

Section6. CI with Github Actions

Section7. Publish

npm login && npm publish
dupication name -> add scope
1. npm login --scope=<scope>
2. change package name with <scope>/pagename
3. npm publish --access public
npm version

Section8. Semantic Release with Github Actions

setup configuration
add secrets
update workflow

Other plugins like: semantic-release-gitmoji

TODOs...

ui-components test & test, coverage
lerna for monorepo
package size
document with storybook/dumi
...

@frank3en/micro-library v2.1.0