bin-design
- react hooks 新特性学习 demo 为组件 - 组件单元测试学习编写(jest + enzyme + storybook test addon) - typescript 语法学习
Last updated a year ago by songlibin .
Original npm · Tarball · package.json
$ cnpm install bin-design 
SYNC missed versions from official npm registry.

.tsx .ts 推荐使用eslint 校验

后续版本 tslint可能会被废弃 推荐使用eslint校验

参考antd一些基础组件的写法 结合ts react hooks 编写ui组件

  • react hooks 新特性学习 demo 为组件
  • 组件单元测试学习编写(jest + enzyme + storybook test addon)
  • typescript 语法学习

运行项目查看所有ui组件(开发环境)

  • yarn storybook
  • ????bin-design

build storybook 部署到server进行线上查看

  • yarn build-storybook

1.how to build and publish npm

  • 我使用webpack 打包ts react组件(注意事项, out.libraryTarget设置为 commonjs2, externals: react)
  • 可直接跑tsc命令 或者 用babel构建(暂无设计, 后续优化)
  • 运行yarn build yarn publish (test 命令仅供单元测试学习, 不在build前跑测试)

2.build 过程踩坑记录

  • 没有正确设置libraryTarget 导致模块不具备export 导出的模块, 报错: webpack does not provide an export name
  • 主项目引用 bin-design 时报错: Hooks can only be called inside the body of a function component.

3.fix

  • 针对webpack does not provide an export name, 设置libratyTarget, 参考文章: create react component and publish npm
  • 针对Hooks can only be called inside the body of a function component 报错, 官网解释, 解决办法:issue
  • 总结:
    1.如果主项目使用自定义的webpack构建 增加
    alias: { react: path.resolve('./node_modules/react') }
    2. 使用create-react-app, 暂未找到通过的解决办法请参考issue

4. use component

  • 主项目中yarn add bin-design, use like import { Tabs, TabPane } from 'bin-design'
  • 因为使用styled-components, 不用额外引入样式文件????

Current Tags

  • 1.1.0                                ...           latest (a year ago)

2 Versions

  • 1.1.0                                ...           a year ago
  • 1.0.0                                ...           a year ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |