storybook-react+ts

• 安装

# Create our application:
npx create-react-app ui-lib

cd ui-lib

# Add Storybook:
npx storybook init

• 修改packjson,name需要加@,配置git地址repository.url。安装UI组件库需要的插件例如antd,codemirror,lessd等。

  package.josn

{  
"name": "@ui-lib",  
"version": "5.0.2", //每次更新时需要更新版本号  
"private": false,  
"dependencies": {  
    "@storybook/addon-essentials": "^7.4.6",  
    "@storybook/addon-interactions": "^7.4.6",  
    "@storybook/addon-links": "^7.4.6",  
    "@storybook/addon-onboarding": "^1.0.8",  
    "@storybook/blocks": "^7.4.6",  
    "@storybook/react": "^7.4.6",  
    "@storybook/react-webpack5": "^7.4.6",  
    "@storybook/testing-library": "^0.2.2",  
    "@types/node": "^20",  
    "@types/react": "^18",  
    "@types/react-dom": "^18",  
    "@types/styled-jsx": "^3.4.4",    
    "eslint": "^8",  
    "eslint-plugin-storybook": "^0.6.14",  
    "react": "^18",  
    "react-dom": "^18",  
    "storybook": "^7.4.6",  
    "styled-jsx": "^5.1.2",  
    "tsup": "^7.2.0",  
    "typescript": "^4.9.5",  
},  
"scripts": {  
    "dev": "npm run storybook",  
    "build": "tsup",  
    "build:doc": "npm run build-storybook",  
    "storybook": "storybook dev -p 6006",  
    "build-storybook": "storybook build"  
},  
"main": "dist/index.js",  
"module": "dist/index.js",  
"eslintConfig": {  
    "extends": [  
        "react-app",  
        "react-app/jest",  
        "plugin:storybook/recommended"  
    ]  
},  
"browserslist": {  
    "production": [  
        ">0.2%",  
        "not dead",  
        "not op_mini all"  
    ],  
    "development": [  
        "last 1 chrome version",  
        "last 1 firefox version",  
        "last 1 safari version"  
    ]  
},  
"repository": {  
    "type": "git",  
    "url": "git地址配置npm 下载"  
},  
"peerDependency": {  
    "webpack": "*"  
},  
"devDependencies": {  
    "@storybook/addon-essentials": "^7.6.6",  
    "@storybook/addon-interactions": "^7.6.6",  
    "@storybook/addon-links": "^7.6.6",  
    "@storybook/addon-onboarding": "^1.0.10",  
    "@storybook/blocks": "^7.6.6",  
    "@storybook/preset-create-react-app": "^7.6.6",  
    "@storybook/react": "^7.6.6",  
    "@storybook/react-webpack5": "^7.6.6",  
    "@storybook/test": "^7.6.6",  
    "antd": "^5",  
    "eslint-plugin-storybook": "^0.6.15",  
    "http-proxy-middleware": "^2.0.6",  
    "less": "^4.2.0",  
    "less-loader": "^11.1.3",  
    "prop-types": "^15.8.1",  
    "storybook": "^7.6.6",  
    "webpack": "^5"  
    }  
}

• 修改packages/index.ts

export {Button} from './Button/Button';  
export type { ButtonProps } from './Button/Button';  
export * from './Header';  
export * from './Page';

• 配置ci 文件（git 自动化部署）

stages:  
- deploy  
  
deploy-npm:  
image: rxxxx:node16  
stage: deploy  
tags:  
- gci  
script:  
- echo "xxxxx" >.npmrc  
- echo "xxxxx" >> .npmrc  
- echo "Created the following .npmrc:"; cat .npmrc  
- npm set registry http://registry.npmmirror.com  
- npm install  
- npm run build  
- npm publish --verbose

• 在项目中引入遇到的bug Error: Cannot find module 'webpack/lib/util/makeSerializable.js' 解决方案：package.json中配置

"peerDependency": {  
    "webpack": "*"  
},