@frank3en/micro-library

micro-library

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

1. The Open Source Definition

2. Code of Conduct there is something, [contact method], needs to be updated.

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

1. ESLint
2. eslint --init
3. 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.

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

• how to use esm in webpack.config.js

Section6. CI with Github Actions

• quick start
• workflow
• starter-workflows

Section7. Publish

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

Section8. Semantic Release with Github Actions

• actions.yml
• semantic-release configuration

1. setup configuration
2. add secrets
3. update workflow

Other plugins like: semantic-release-gitmoji

TODOs...

1. ui-components test & test, coverage
2. lerna for monorepo
3. package size
4. document with storybook/dumi
5. ...

Links

sections

• opensource.org

open source libs

• React
• ant-design
• lodash
• umi
• tonic

resources

• shields.io
• commitizen