使用注意

组件引入问题

由于一些历史原因，我们的示例上，组件的引入方式描述不正确，统一使用如下方式：

  1. import { Button } from 'tinper-bee'；

另外，有几个组件因为使用的第三方的包比较大，所以我们没有将它们打包进tinper-bee.js。

这些组件是Datepicker日期选择组件、Timepicker时间选择组件、Dnd拖拽组件、Calendar日历组件。

这些组件使用如下方式引入，不需要单独引入样式。

  1. import Datepicker from 'tinper-bee/lib/Datepicker';
  3. import Timepicker from 'tinper-bee/lib/Timepicker';
  5. import Dnd from 'tinper-bee/lib/Dnd';
  7. import Calendar from 'tinper-bee/lib/Calendar';
  9. import Carousel from 'tinper-bee/lib/Carousel';

样式引入问题

为了方便用户单独处理样式和js文件，所以我们对js和css进行了单独的打包。

所以当你使用组件库时，需要单独引入js和样式文件。

  • 直接import引入：

js

  1. import { Button } from 'tinper-bee';

在入口处，引入样式：

  1. import 'tinper-bee/assets/tinper-bee.css';
  • CDN引入：

js

  1. <script src="//design.yonyoucloud.com/static/tinper-bee/[版本号]/build/tinper-bee.js"></script>

并且，在你的webpack处，配置

  1. ...
  2. externals: {
  3.    'tinper-bee': 'TinperBee'
  4. }
  5. ...

css

  1. <link href="//design.yonyoucloud.com/static/tinper-bee/[版本号]/assets/tinper-bee.css">

按需加载

当你的项目只用到了部分组件，你想要更小的打包体积的时候，我们提供了按需加载的能力。

  • 下载babel插件
  1. npm install -D babel-plugin-import-bee
  • 配置.babelrc
  1. {
  2.   "presets": ["es2015", "stage-0", "react"],
  3.   "plugins": [["import-bee"] ]
  4. }

如果你需要自动帮助你引用组件的样式，就设置style: true，如果不需要，就不需要设置这个属性。

  1. {
  2.   "presets": ["es2015", "stage-0", "react"],
  3.   "plugins": [["import-bee", { "style": true}] ]
  4. }