The whole component library series (zero) project construction (White piao Plan)

React – based mobile, incremental enhancement component library. @one-component/component

Whim, want to build a component library, really not idle boring. The final demand is:

  1. Support for Webpack Tree Sharking
  2. Support for Dark Night mode [Progressive]
  3. Multi-theme color switch [progressive]

Use the idea of progressive enhancement to do this (in other words, not compatible with low versions, which are only guaranteed to be available), and we intend to do it for free.

Prepare resources

Be prepared for GitHub organizations and NPM organizations, because these two places can also have a good name (free).

Making organization

The new organization

New organization -> Select Free plan -> Whole Good Name -> Create

Organize Action Secret (Automatic publishing)

Set Action Secret for your new organization, which will be used for automatic distribution of NPM packages.

  1. Generate NPM Access Tokens copy for later use

  1. Set up the

Open organization -> Settings -> Secrets -> New organization Secrets -> Set NPM_TOKEN

NPM organization

New organization -> Whole good name (same as GitHub organization) -> Create

Project initialization

project

Initialize the project on GitHub and then go down to local.

dumi

Dumi is a documentation tool for component development scenarios

  1. Initialize the project with dumi
$ npx @umijs/create-dumi-lib --site Initialize the component library development scaffolding for a site pattern
Copy the code

After initialization, it will look like 👇

  1. Install the mobile themedumi-theme-mobile
$ npm i dumi-theme-mobile -D Install the mobile theme
Copy the code

After installing you can have mobile demo, about 👇 so long.

  1. Put in some needed dependencies
# Code style, COMMIT specification, prettier code formatting
$ npm i @one-style/commit @one-style/eslint @one-style/prettier -D

# test library
$ npm i @types/react-test-renderer @types/jest react-test-renderer -D

Copy the code
  1. Configure yourtsconfig.json

Tsconfig. json adds the type of jest

{
  compilerOptions: {
    "types": ["@types/jest"].}}Copy the code

  1. Modify package.json, component library name, refer to implementation

  2. Modified. Fatherrc. Ts

export default {
  esm: 'rollup'.cjs: process.env.NODE_ENV === 'production' ? 'rollup' : false,}Copy the code
  1. Modify the.umirc.ts

Modify according to your own needs.

hello world

  1. Simply write a component
import React from 'react'

export const Title: React.FC<{ title: React.ReactNode }> = (props) = > <h1>{props.title}</h1>

Copy the code
  1. Simply write a component document

  1. Write component tests
import React from 'react'
import renderer from 'react-test-renderer'
import { Title } from './index'

test('Title render'.() = > {
  const t = 'Foo render'
  const c = renderer.create(<Title title={t} />)
  const tree = c.toJSON()
  expect(tree).toMatchSnapshot()
})

Copy the code

Support for Webpack Tree Sharking

Json. See the Webpack Tree Sharking documentation for a description of the sideEffects field.

// package.json
{
  "sideEffects": [
    "*.less"."*.css"]}Copy the code

automation

Github Action -> Create action -> Write the code

Configuration Reference

Open the project setting -> GitHub Pages -> Select the branch to deploy the document

Too long to watch

  1. Clone project
$ git clone --depth 1 -b feat/init_project https://github.com/one-component/component.git
Copy the code
  1. delete.git
$ rm -rf .git
Copy the code
  1. reinitialization
$ git init
Copy the code

Release v0.0.1

  1. Changing the Version number
$ npm run release
Copy the code
  1. Push to remote + tag push
$ git push --tags
Copy the code
  1. Delete the tag and repeat 1-2

link

Project address github.com/one-compone…

The document address one – component. Dead simple. IO/component /