使用babel搭建react组件库,ts版

话不多说，上代码
项目结构，只用创建src,babel.config.json,和package.json

package.json文件

{
    
    
  "name": "react-ts-component",
  "version": "0.1.1",
  "private": false,
  "title": "babeltest",
  "devDependencies": {
    
    
    "@babel/cli": "^7.13.0",
    "@babel/core": "^7.13.8",
    "@babel/plugin-transform-typescript": "^7.13.0",
    "@babel/preset-env": "^7.13.9",
    "@babel/preset-react": "^7.12.13",
    "@babel/preset-typescript": "^7.13.0"
  },
  "dependencies": {
    
    
    "@babel/polyfill": "^7.12.1"
  }
}

记得npm i
babel.config.json文件代码

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

src下的目录

index.ts文件

import FtP1 from './component/p/ft-p1'
import stringUtil from './component/utils/stringUtil'
export {
    
    FtP1,stringUtil}

ft-p1.tsx文件

import React, {
    
     Fragment } from 'react';
import './ft-p1.css'
function FtP1(props){
    
    
    function handleClick(){
    
    
        //props.onClick();
    }
 
    return(
        <Fragment>
            <p className="ft-p1" onClick={
    
    handleClick}>{
    
    props.children}</p>
        </Fragment>
    )
}
export default FtP1;

stringUtil.ts文件

class StringUtil{
    
    
    //去除字符串中的空行
    removeSpace(str:string) {
    
    
        return str.replace(/\s+/g, "");
    }
}
export default new StringUtil();

在项目根目录运行命令
npx babel src --out-dir lib --extensions .ts,.js,tsx
就可以看到生成lib了