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={{ width: 300 }}>
<Select
value={this.state.value}
placeholder="placeholder"
dropdownMenuStyle={{ maxHeight: 200, overflow: 'auto' }}
style={{ width: 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'
}