preface

Building a wheel is a cliche. There are a lot of great LIBRARIES of UI components out there, but people tend to scoff at the idea of reinventing the wheel. But for me as a front-end programmer, being able to use and being able to build are two different things. You don’t have to reinvent the wheel, but you have to be able to build the wheel. Today I will write a basic introduction to the UI component library. The main contents include:

  • Build the process from zero
  • How to debug locally
  • Release NPM

Source reference

Address: github.com/xiumubai/xm…

The packaging tool used is rollup

Project initialization

  1. To open the command line tool, I’m using iTerm, a working directory of my own, create a folder,

mkdir xmb-ui-master

Then go to this folder

cd xmb-ui-master

Note: The folder name here can be chosen as you like, and should be the same as your UI component library name (package.json file name).

  1. Project initialization

npm init -y

It’s all by default. All the way back to the car.

Install dependencies

All dependency package management tools use YARN.

yarn add rollup @babel/core @babel/preset-env @babel/preset-react @rollup/plugin-babel

configurationrollup.config.js

Here is a simple configuration of input, output, plugins, external.

import babel from '@rollup/plugin-babel';

export default {
  input: 'src/index.js'.output: {
    file: './lib/bundle.js'.format: 'umd',},plugins: [babel()],
  external: ['react']};Copy the code

Then we can see that our entry file is in index.js, so let’s add an entry file.

configuration.babelrc

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
  ]
}
Copy the code

Add entry fileindex.js

Create a SRC directory under the root of the file, and add the index.js file under SRC.

mkdir src && cd src touch index.js

Add anything to index.js

export const a = 'this is ui test';
Copy the code

Configure the package entry and command

After packaging, we need to link the component library in the main field of packgae.json for user use, so we write the main field like this:

{
    "main": "lib/bundle.js",}Copy the code

Then add a package command:

{
    "scripts": {
        "start": "yarn run rollup -c -w"."build": "yarn run rollup -c"}},Copy the code

Next run YARN Build

There is a lib/bundle.js file under the root directory, which is the packaged component library source file for users to use.

Now that all of the above environments are configured, let’s develop a Switch component.

Switch Component Development

Create a Components/Switch folder under SRC and create an index.js file.

Under SRC /index.js, introduce:

export { default as Switch } from './Components/Switch/index';
Copy the code

This can be used when using component libraries:

import { Switch } from 'xmb-ui-master';
Copy the code

The Components/Switch/index. Js add content:

import React, { useState } from 'react';
/ * *@jsx jsx */
import { css, jsx } from '@emotion/react';

export default Switch = () = > {
  const [state, setState] = useState(false);
  const handleOnTap = () = >{ setState(! state); };return (
    <div
      className='container'
      css={css`
        width: 100px;
        height: 50px;
        background: red;
        border-radius: 50px;
        position: relative;
      `}
      onClick={handleOnTap}
    >
      <div
        className='ball'
        css={css`
          width: 50px;
          height: 50px;
          background: green;
          border-radius: 50%;
          position: absolute;
          left:The ${state ? 'unset' : 0};
          right:The ${state ? 0 : 'unset'};
          transition: all ease 1s;
        `}
      ></div>
    </div>
  );
};
Copy the code

Here simply add a Switch Switch function.

Note: Dependencies need to be installed here

yarn add @emotion/core @emotion/react @emotion/babel-preset-css-prop @emotion/css

npm link

Now let’s test if our component library works.

Run the command NPM link from the root component library and see the following:

success Registered "xmb-ui-master".
info You can now run `yarn link "xmb-ui-master"` in the projects where you want to use this package and it will be used instead.
Copy the code

Create a crA project file and run the NPM link “xMB-uI-master” command from the root directory. This creates a soft link between your package and your project, just as you would with a normal NPM package.

Direct introduction to use:

import { Switch } from 'xmb-ui-master';
Copy the code

This allows you to preview components in real time as you develop them.

npm unlink

At the end of development, manual NPM unlink is required.

Published to the NPM

Create the. Npmignore file under the root directory

src
Copy the code

This allows you to ignore the SRC file when publishing.

The NPM publish

disadvantages

At present, the development of component library like this, the first one, is particularly unfriendly for developers, can not preview the effect directly in one project, have to use another project, use NPM link, it is difficult to write UI documents, next time we use Dumi to build a more perfect component library.

Next up

  • Build UI component library with Dumi

series

  • Build cli scaffolding from 0

Common UI component libraries are recommended

  • ant design
  • Element
  • Naive UI