从零开始封装React UI 组件库并发布到NPM

自我简介：4年导游，10年程序员，最近6年一直深耕低代码领域，分享低代码和AI领域见解。

这篇文章您将学会

1.如何从零开始搭建属于自己的react ui 组件库,并发布到npm开源.

2.如何从零配置 webpack 打包项目,例如 jsx , less 等打包处理.

3.发布到 npm 有哪些注意事项?

github 开源地址zswui

github 说明文档wiki

npm仓库地址 zswui

创建项目

(1)进入到 zswui 目录执行 npm init 命令初始化项目。根据提示信息填充将会生成的 package.json 文件.

(2)在根目录下新建 webpack 打包配置文件 webpack.config.js.

(3)新建 README.md 项目说明文件.

(4)新建 .gitignore 项目忽略文件.

(5)安装webpack 用于编译 JavaScript 模块.

bash 复制代码

npm install webpack webpack-cli --save-dev

(6)安装 babel 相关的编译库，将javascript 代码转换成浏览器兼容的代码。

bash 复制代码

npm install babel-loader @babel/core --save-dev

(7)给 webpack.config.js 配置 babel-loader 解析信息

js 复制代码

module: {
        rules: [
            { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
        ]
}

(8)创建 .babelrc 文件,虽然已经配置好了 Babel ，但并没有让它真正生效。在项目的根目录中创建一个 .babelrc 文件并启用一些插件。首先，你可以使用转换 ES2015+ 的 env preset

bash 复制代码

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

为了让 preset 生效，你需要像下面这样定义你的 .babelrc 文件

js 复制代码

{
  "presets": ["@babel/preset-env"]
}

(9)安装编译 jsx 语法的库

bash 复制代码

npm install --save-dev @babel/preset-react

修改.babelrc文件配置

js 复制代码

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

(10) 安装 html-webpack-plugin 插件，生成 html 文件.配置到 webpack.config.js 文件

bash 复制代码

npm install  html-webpack-plugin  --save-dev

(11)安装 react 相关的包

bash 复制代码

npm i react react-dom --save-dev

(12)安装 webpack-dev-server 作为本地开发环境

bash 复制代码

npm  i webpack-dev-server -g

(13)在 package.json文件中添加自定义启动脚本

js 复制代码

"scripts": {
    "start": "webpack --config webpack.config.js",
    "test": "npm run test"
}

(14)安装清理文件夹的插件

bash 复制代码

npm install clean-webpack-plugin --save-dev

(15)安装提取 css 到一个文件的库

bash 复制代码

npm install --save-dev extract-text-webpack-plugin

(16)安装支持 sass / less 文件的库

bash 复制代码

npm install --save-dev style-loader css-loader less-loader less  sass-loader node-sass webpack

package.json 字段含义解释：

name 包名，如果有重名可以添加 scoped 前缀,例如（@winyh/wui）
verson 版本号，每次发布版本前需要递增修改版本号
description 包简介。
private 是否私有。一定要设置为 false
main 项目入口。
directorities 描述模块的结构,暂时可以忽略。
scripts 执行脚本，可以在这里添加自定义的执行脚本。
registory 仓库地址，设置代码所在仓库地址。
keywords 关键字，设置仓库的关键字，方便检索。
author 作者，可以输入作者名称。
license 许可协议。
bugs 提交地址。
homepage 项目主页。
devDependencies 开发环境依赖包记录。

发布：

1.修改package.json文件，添加 "private": false 设置当前组件库为非私有的。否则 npm publish 会报错。

2.修改 version 版本号，npm 发布版本时，会向上叠加（v0.0.1 -> v0.0.2)。发布前不修改版本号也会报错。

3.执行 npm login 登录 npm 账户（需要现在官网注册npm账号）。

4.执行 npm publish 发布最新版本。（发布成功后一般注册邮箱会收到发布版本的消息）

报错：

(1)Tapable.plugin is deprecated. Use new API on .hooks instead

原因：

extract-text-webpack-plugin目前版本不支持webpack4

解决办法：

bash 复制代码

npm install extract-text-webpack-plugin@next

使用

bash 复制代码

npm install zswui

引入库样式

bash 复制代码

import "zswui/lib/zswui.css"

引用示例

js 复制代码

import React, { Component } from 'react';
import { Button } from "zswui";

class App extends Component {
  render(){
    return (
      <div className="main">
        <Button> Hi, Boy! </Button>
      </div>
    );
  }
}

export default App;

AI时代，对各行业的冲击力只会越来越大，随着AI大模型的竞赛，越来越多强悍的AI模型都会涌现，像软件开发行业的很多工作都会被取代。软件将不再是程序员的专属产物，会由AI创建很多的软件产品。

4年导游，10年程序员，深耕低代码领域6年，持续分享低代码和AI领域领域有价值的思考和沉淀，欢迎关注：winyh5

后续会推出：【挑战365天做 100 套常见的互联网系统】系列文章，让大家可以真实感受到低代码快速落地项目的可行性