ola-ui

基于 Xeact 与 Ant Design 的组件库。

Install

yarn add ola-ui

DEV

yarn build  ## 打包

yarn dev  ## 打包 (watch 模式)

Quick Start

import style

import 'ola-ui/dist/ola.less'; 

use component

import { Button } from 'ola-ui';

...

<Button>Button</Button>  

...

use components as xeact

<script src="//mytask.jd.com/api/download?fileName=env_1522133871096.js"></script>

import 'ola-ui/lib/x';

<div>
  <x-button type="primary" loading>Primary Button</x-button>
</div>

webpack rule for ola-ui style

{
  test: /ola\.less$/,
  use: [ 'style-loader',
    {
      loader: "css-loader",
      options: {
        minimize: true,
        sourceMap: true,
        importLoaders: 1,
        modules: false,
        localIdentName: '[local]--[hash:base64:5]'
      }
    }, {
      loader: "less-loader",
      options: {
        sourceMap: true,
        modifyVars: theme,
        javascriptEnabled: true,
        paths: [ path.resolve(__dirname, "node_modules") ]
      }
    }
  ]
}

webpack rule for app style

{
  test: /\.less$/,
  exclude: [
    /ola\.less$/,
  ],
  use: ['style-loader',
    {
      loader: "css-loader",
      options: {
        minimize: true,
        sourceMap: true,
        importLoaders: 1,
        modules: true,
        localIdentName: '[local]--[hash:base64:5]'
      }
    }, {
      loader: "less-loader",
      options: {
        sourceMap: true,
        modifyVars: theme,
        javascriptEnabled: true,
      }
    }
  ]
}

工程类依赖添加按需加载 babel 插件

yarn add --dev babel-plugin-transform-imports

[
  "transform-imports",
  {
    "ola-ui": {
      "transform": "ola-ui/lib/components/${member}"
    }
  }
]

Structure

components

• index.js --- 组件实现
• x.js --- 组件的 xeact 封装
• x-foo-bar.js --- 关联内部组件的 xeact 封装
• style.less --- 内部样式(css modules)

styles

• fonts/ icon font
• global/ 全局公共样式