从零搭建react+ts组件库(封装antd)的详细过程

下面是从零搭建react+ts组件库（封装antd）的详细过程：

第一步：初始化项目

首先，在命令行终端中执行以下命令，初始化一个空的npm项目：

npm init -y

第二步：安装依赖

接着安装以下依赖：

npm install react react-dom antd babel-loader @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript typescript css-loader less less-loader style-loader webpack webpack-cli --save-dev
npm install antd --save

这里我提到了两个示例：

antd是我们要封装的UI库，所以必须安装。
webpack、babel、css-loader等工具是我们需要用到的打包、编译、加载样式的工具，也必须安装。

第三步：创建webpack配置文件

根目录下新建一个webpack.config.js文件，编写以下代码：

const path = require('path');

module.exports = {
  entry: './src/index.tsx',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index.js',
    libraryTarget: 'umd'
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      },
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      }
    ]
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js', '.less']
  },
  externals: {
    react: 'React',
    'react-dom': 'ReactDOM',
    antd: 'antd'
  }
};

该配置文件的作用是将src/index.tsx打包成dist/index.js，并且允许其他项目通过import或require方式引入这个组件库。

这里我们要说明的是：externals选项中的react、react-dom、antd属性，它们的值'React'、'ReactDOM'、'antd'分别代表着指向这些库的全局变量名，这保证了我们的组件库可以在不同的环境中使用。

第四步：创建组件库入口文件

在项目根目录下的src目录下创建index.tsx文件，作为组件库的入口文件，编写以下内容：

import React from 'react';
import ReactDOM from 'react-dom';
import { ConfigProvider } from 'antd';

import 'antd/dist/antd.less';

export * from './components';

export const render = (container: HTMLElement) => {
  ReactDOM.render(
    <ConfigProvider>
      {/* 在这里放置你想要渲染的组件 */}
    </ConfigProvider>,
    container
  );
};

这里的export * from './components';是导出我们组件库中所有的组件。

第五步：创建组件

在src/components目录下创建一个Button.tsx文件，作为示例组件，编写以下内容：

import React from 'react';
import { Button } from 'antd';

interface Props {
  children: React.ReactNode;
}

const CustomButton: React.FC<Props> = ({ children }) => {
  return <Button>{children}</Button>;
};

export default CustomButton;

第六步：测试

在根目录下新建一个example目录，在其中创建一个index.html文件，编写以下内容：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <div id="root"></div>
  <script src="../dist/index.js"></script>
  <script>
    const { render } = window.yourLibName;
    const root = document.getElementById('root');
    render(root);
  </script>
</body>

</html>

这里的window.yourLibName代表我们组件库导出的全局变量，也可以使用其他的命名方式。

然后在命令行终端中执行以下命令，打包组件库：

npx webpack

现在，用浏览器打开example/index.html，可以看到示例组件CustomButton的效果了。

总结

以上就是从零搭建react+ts组件库（封装antd）的详细过程，其中包含了创建webpack配置文件、创建组件库入口文件、创建示例组件等多个步骤。我们也提供了示例代码，以便大家更加清晰地了解整个过程。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：从零搭建react+ts组件库(封装antd)的详细过程 - Python技术站