create-react-app中按需引入Ant-Design
2018-02-02 本文已影响3149人
于晓俞
先来回顾一下create-react-app脚手架创建项目的方法
//安装create-react-app脚手架
npm i create-react-app -g
//创建项目
create-react-app antd-demo
//启动项目
npm start
安装Ant-Design
npm i antd -S
按需引入Ant-Design插件
这里需要用到两个插件
一、
react-app-rewired(一个对 create-react-app 进行自定义配置的社区解决方案)。
npm i react-app-rewired -D
然后更改一下package.json,这里有个坑,我们用create-react-app安装出来的package.json并不是都是使用react-scripts start
这种方式,还有node scripts/start.js
这种方式的,在第二种方式下这种更改就会出现问题,目前我还没有想到解决的方法,目前建议就是多试几次,尴尬😅。
/* package.json */
"scripts": {
- "start": "react-scripts start",
+ "start": "react-app-rewired start",
- "build": "react-scripts build",
+ "build": "react-app-rewired build",
- "test": "react-scripts test --env=jsdom",
+ "test": "react-app-rewired test --env=jsdom",
}
然后在项目根目录创建一个 config-overrides.js 用于修改默认配置。
module.exports = function override(config, env) {
// do stuff with the webpack config...
return config;
};
二、
babel-plugin-import (一个用于按需加载组件代码和样式的 babel 插件)。
npm i babel-plugin-import -D
修改 config-overrides.js 文件。
const { injectBabelPlugin } = require('react-app-rewired');
module.exports = function override(config, env) {
config = injectBabelPlugin(['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }], config);
return config;
};
经过上面两部的操作,我们的antd的按需引入就设置好了。
在组件中使用时,方法如下
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
//如下方式进行引入,这样就会按需引入所需的js和css了
import { Button, Icon, Row, Col } from 'antd';
import './index.css';
import registerServiceWorker from './registerServiceWorker';
class App extends Component {
render() {
return (
<div className="App">
button<Button type="primary">Button</Button><br />
icon<Icon type="link" /><br />
<div className="grid">
<Row className="row">
<Col className="col" span={12}>col-12</Col>
<Col className="col" span={12}>col-12</Col>
</Row>
<Row className="row">
<Col className="col" span={8}>col-8</Col>
<Col className="col" span={8}>col-8</Col>
<Col className="col" span={8}>col-8</Col>
</Row>
<Row className="row">
<Col className="col" span={6}>col-6</Col>
<Col className="col" span={6}>col-6</Col>
<Col className="col" span={6}>col-6</Col>
<Col className="col" span={6}>col-6</Col>
</Row>
</div>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
上面引用了antd的三个组件,按钮、icon和栅格。效果如下