react组件库开发

注意node版本，开发时使用v12.x 使用yarn安装的包 已添加 upstream 指向源站，同步更新 git pull --rebase upstream master 模版生成 npm run plop [componentname]

打包编译

# 打包：注意这里多条命令依次执行需要 &&，如果是 & 则是同时执行
# 默认打包生成4种格式modern，esm，cjs，umd，这玩意有个bug，就是esm和cjs名字一样(react-assembly-newming.js)，会导致覆盖。所以需要分开打包，先打包全部类型完成后，使用cjs打包进行覆盖
# 这个暂时有问题，打出来的包好像把react打进去了，先使用 npm run build-tsc 打包，同时 main 入口和 module 入口使用 dist/index.js
npm run build
# 发包
npm publish
# 测试
npm run test
npm run coverage
# 开发时storybook预览
npm run storybook

组件列表

• button
• highlight
• icon
• avatar
• radio
• badge

storybook 6.x升级

• 升级文档
• storybook使用教程

storybook 6.x已经自带的preset

• "@storybook/addon-actions": "^6.0.12"
• "@storybook/addon-viewport": "^6.0.12"
• @storybook/addon-knobs
• @storybook/addon-docs

快照测试

storyShots

参考链接

• 原子方案页面

BUGFIX

问题1 npm run coverage 报错

错误信息：Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null

解决：测试覆盖率没通过 react-scripts test --coverage --watchAll=false。解决方案，改写 return jsx 方式，使用 return React.createElement()

问题2 modern使用存在问题-未解决

part5使用 microbundle 打包后，并且设置了package.json module 指向 modern 版本的js文件，安装使用时发现有问题

暂不使用该打包方式

"main": "dist/react-assembly-newming.js",
"module": "dist/react-assembly-newming.modern.js",

TODO

• 发布github package，注意，这里踩了坑，在package.json中增加了 publishConfig 但是并没有按照github package修改名称，导致后边 npm publish 的时候一直405，后边将package.json中 publishConfig 配置项先删除
• github actions持续集成
• 通过coveralls自动生成代码覆盖率
• CODE FACTOR代码因子
• 添加sponsor
• 使用 np 实现标准化发布版本

"publishConfig": {
  "registry": "https://npm.pkg.github.com/newming"
},