React antd 安装配置按需加载

Create React App是FaceBook的React团队官方出的一个构建React单页面应用的脚手架工具。它本身集成了Webpack，并配置了一系列内置的loader和默认的npm的脚本，是用React 创建新的单页面应用的最佳方式。

安装React

第一种方法

• 全局安装react脚手架

npm install -g create-react-app   // 等待其安装

• 新建React项目

create-react-app my-app
cd my-app
npm start

第二种方法

• 应用npm5.2+ 附带的package运行工具 npx 创建
  你需要在你的机器上安装 Node >= 8.10 和 npm >= 5.6

npx create-react-app my-app
cd my-app
npm start

如果你先全局安装了npm install -g create-react-app 在应用 npx create-react-app my-app ,创建出来的应用肯能会缺少很多内容，如script 相关等等，这时可以先卸载、删除 create-react-app，npm uninstall -g create-react-app ,在直接从来一遍第一种方法或是第二种方法，如果你不确定当前版本是否最新，也可以如上。如果卸载的不干净，可以删除文件,如下：

 which create-react-app
->/usr/local/bin/create-react-app
rm -rf /usr/local/bin/create-react-app

antd 按需加载

• 用create-react-app创建项目后，如果需要第三方的插件库，需要配置webpack配置文件，步骤如下：
  1、运行npm run eject暴露出webpack的配置文件，项目会添加config和scripts文件夹。
  2、安装完antd和babel-plugin-import后，修改根目录下的package.json babel处，在persets后面添加

{
  "plugins": [
    ["import", {
      "libraryName": "antd",
      "libraryDirectory": "es",
      "style": "css" // `style: true` 会加载 less 文件
    }]
  ]
}

• 安装antd

cnpm i antd -S

• 安装babel-plugin-import

cnpm i babel-plugin-import -D

3、运行npm start，在文件中按需引入antd组件

import React from 'react';
import logo from './logo.svg';
import './App.css';
import { DatePicker } from 'antd';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
        <br/>
        <DatePicker />
      </header>
    </div>
  );
}
export default App;

参考

https://www.jianshu.com/p/77bf3944b0f4