在create-react-app项目中使用tiny-ui组件库

前言

tiny-ui是一个轻量级的React组件库，本文将详细介绍如何在create-react-app创建的项目中集成和使用tiny-ui组件。通过本文，你将学习到从基础集成到按需加载优化的完整流程。

环境准备

首先确保你的开发环境已经安装Node.js和npm包管理器。如果尚未安装，可以从Node.js官网下载安装包。

创建React项目

使用create-react-app脚手架工具可以快速初始化一个React项目：

npx create-react-app my-tiny-app

这条命令会：

1. 创建一个名为my-tiny-app的新目录
2. 初始化基本的React项目结构
3. 安装所有必需的依赖项

项目创建完成后，进入项目目录并启动开发服务器：

cd my-tiny-app
npm start

此时浏览器会自动打开http://localhost:3000/，显示默认的React欢迎页面。

安装tiny-ui

在项目中安装tiny-ui组件库：

npm install tiny-ui --save

基础使用方式

引入组件

修改src/App.js文件，引入Button组件：

import React from 'react';
import Button from 'tiny-ui/lib/button';
import './App.css';

function App() {
  return (
    <div className="App">
      <Button btnType="primary">主要按钮</Button>
    </div>
  );
}

export default App;

引入样式

在src/App.css文件顶部添加全局样式引入：

@import '~tiny-ui/dist/styles/index.css';

.App {
  text-align: center;
}

现在你应该能在页面上看到一个蓝色的主要按钮。这是使用tiny-ui最基本的方式，但这种方式会引入所有组件的样式，可能影响性能。

高级配置：按需加载

为了提高应用性能，我们可以配置按需加载，只引入使用到的组件和对应的样式。

安装必要工具

首先安装配置工具：

npm install react-app-rewired customize-cra --save-dev

修改package.json

更新package.json中的scripts部分：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test"
}

配置按需加载

安装babel插件：

npm install babel-plugin-import --save-dev

在项目根目录创建config-overrides.js文件：

const { override, fixBabelImports } = require('customize-cra');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'tiny-ui',
    libraryDirectory: 'lib',
    style: 'css',
  })
);

优化组件引入方式

现在可以修改组件引入方式：

import { Button } from 'tiny-ui';

这种方式会自动按需加载Button组件及其样式，不再需要手动引入全局样式。

常见问题解决

1. 样式不生效：确保已正确配置babel-plugin-import，并检查组件引入路径是否正确
2. 构建失败：检查node_modules是否完整，尝试删除后重新安装
3. 热更新失效：检查react-app-rewired配置是否正确

结语

通过本文，你已经学会了在create-react-app项目中使用tiny-ui的两种方式：基础引入和按需加载。按需加载能显著提升应用性能，是生产环境推荐的做法。tiny-ui提供了丰富的组件，可以帮助你快速构建美观的React应用界面。