让anujs支持rc-select

git clone git@github.com:react-component/select.git
cd select
npm i babel-plugin-antd --save-dev
npm i

然后自己使用webpack打包，里面是用webpack2，在根目录下建立webpack-config.js

var webpack = require('webpack');
var path = require('path');
module.exports = {
    context: path.resolve(__dirname, './src/'),
    entry: {
        app: './index.js'
    },
    //输出文件出口
    output: {
        /*
         输出路径，在这我们要手动创建一个文件夹，名字可以自己命名，
         输出的文件路径是相对于本文件的路径
         * */
        path: path.resolve(__dirname, './dist/'),
        filename: '[name].js' //输出文件名，文件可以自己定义，[name]的意思是与入口文件的文件对应，可以不用[name]，
    },
    /*
     * 标题：加载器（loaders）
     * 作用：需要下载不同别的加载器，如css，js，png等等
     * */
    module: {
        rules: [
            {
                test: /.jsx?$/,
                exclude: [/node_modules/],
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                           "presets": [ "es2015", "stage-0", "react"],
                           "plugins": [["antd", { "style": true }]]
                        }
                    }
                ]
            },
            { //解析 .less
              test: /.less$/,
              loader: 'style-loader!css-loader!less-loader' //从右往左 先把less解析成css，再加前缀
          }
            // Loaders for other file types can go here
        ]
    },
    /*
     *
     * */
    resolve: {
          extensions: [' ','.jsx','.js','.json'],
        /*
         * 别名配置，配置之后，可以在别的js文件中直接使用require('d3')，将导入的文件作为一个模块导入到你需要的项目中，不用配置别也可会当作模块导入项目中，只是你要重复写路径而已。
         * */
        alias: {}
    }
}

然后改造src/index.js

import Select from './Select';
import Option from './Option';
import { SelectPropTypes } from './PropTypes';
import OptGroup from './OptGroup';
Select.Option = Option;
Select.OptGroup = OptGroup;


import React from 'react';
import ReactDOM from 'react-dom';
import '../assets/index.less'

class Test extends React.Component {
  state = {
    destroy: false,
    value: String(9),
  };

  onChange = (e) => {
    let value;
    if (e && e.target) {
      value = e.target.value;
    } else {
      value = e;
    }
    console.log('onChange', value);
    this.setState({
      value,
    });
  };

  onDestroy = () => {
    this.setState({
      destroy: 1,
    });
  };

  onBlur = (v) => {
    console.log('onBlur', v);
  };

  onFocus = () => {
    console.log('onFocus');
  };

  render() {
    if (this.state.destroy) {
      return null;
    }
    return (
      <div style={{ margin: 20 }}>
        <div style={{ height: 150 }}/>

        <h2>Single Select</h2>

        <div style={{  300 }}>
          <Select
            value={this.state.value}
            placeholder="placeholder"
            dropdownMenuStyle={{ maxHeight: 200, overflow: 'auto' }}
            style={{  500 }}
            onBlur={this.onBlur}
            onFocus={this.onFocus}
            allowClear
            optionLabelProp="children"
            optionFilterProp="text"
            onChange={this.onChange}
            firstActiveValue="2"
            backfill
          >
            <Option value="01" text="jack" title="jack">
              <b
                style={{
                  color: 'red',
                }}
              >
                jack
              </b>
            </Option>
            <Option value="11" text="lucy">lucy</Option>
            <Option value="21" disabled text="disabled">disabled</Option>
            <Option value="31" text="yiminghe">yiminghe</Option>
            {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((i) => {
              return <Option key={i} text={String(i)}>{i}</Option>;
            })}
          </Select>
        </div>

      
        <p>
          <button onClick={this.onDestroy}>destroy</button>
        </p>
      </div>
    );
  }
}

ReactDOM.render(<Test />, document.getElementById('__react-content'));

然后命令行

webpack

建立一个index.html


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>rc-select-single</title>
    


</head>
<body>
  <div id="__react-content"></div>
  
  <script src='./dist/app.js'>    </script>
</body>
</html>

最后你可以安装 npm i serve来安装一个http服务器，或者使用vs code直接打开

第一阶段完成

然后要瘦身，将react改成anujs那套东西，只要在webpack的配置对象上改一改

 alias: {
            react: 'anujs',
            'react-dom': 'anujs',
            'prop-types': 'anujs/lib/ReactPropTypes',
            'create-react-class': 'anujs/lib/createClass'
        }