基于文档我们可以知道create-react-app是facebook官方推出的现代化脚手架，可以让开发人员不用去配置过多的配置文件，只需要通过简单的命令就可以完成配置，所以说是当前最简洁的脚手架，今天我们会完成create-react-app基于antd的基本配制。

创建APP

基于官方文档我们使用yarn来安装，今天就不多说yarn的好处，如果没有安装yarn请使用

npm install yarn

接下来安装APP

yarn create react-app my-app

来看下结构
my-app

├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js

接下来我们开始启动服务在开发模式

cd my-app

yarn start

image.png

第一步完成

传送门 https://facebook.github.io/create-react-app/docs/folder-structure

引入antd

根据antd的网址我们需要使用react-app-rewired 进行自定义配置

yarn add react-app-rewired@2.1.1 customize-cra@0.2.12

/* 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",
+   "test": "react-app-rewired test",
}

然后在项目根目录创建一个 config-overrides.js 用于修改默认配置。

module.exports = function override(config, env) {
  // do stuff with the webpack config...
  return config;
};

我们需要使用babel-plugin-import去让组件和样式按需加载

yarn add babel-plugin-import

修改config-overrides.js

const { override, fixBabelImports, addLessLoader } = require('customize-cra');

module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true
    })
);

此时我们就可以使用如下方法引入antd组件

import { Button } from 'antd'

传送门 https://ant.design/docs/react/use-with-create-react-app-cn

使用less

yarn add less less-loader

修改config-overrides.js

const { override, fixBabelImports, addLessLoader } = require('customize-cra');

module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true
    }),
    addLessLoader({
        javascriptEnabled: true,
        modifyVars: { '@primary-color': '#1DA57A' }
    })
);

使用sass

关于sass的入门好处请看我之前关于sass的文章

传送门https://www.jianshu.com/p/5e6f4b41c3aa

yarn add node-sass

修改config-overrides.js

const { override, fixBabelImports } = require('customize-cra');

module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: 'css'
    })
);

然后我们将.css替换为.scss

我们就可以使用sass的特性了

传送门 https://facebook.github.io/create-react-app/docs/adding-a-sass-stylesheet

使用ESLint

因为create-react-app希望尽可能加速开发所以尽可能的减少了很多的规则如果希望加强一些规则可以使用 Prettier来替换

创建.eslintrc文件

{
  "extends": "react-app"
}

传送门 https://facebook.github.io/create-react-app/docs/setting-up-your-editor

安装dependencies

因为我们要react开发使用这些dependencies是不够的，我们还需要一些其他的dependencies列如router和redux这里放出我的package.json,大家可以酌情使用

{
  "name": "react_app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "antd": "^3.10.7",
    "babel-plugin-import": "^1.11.0",
    "customize-cra": "^0.2.12",
    "node-sass": "^4.11.0",
    "react": "^16.6.3",
    "react-app-rewire-less": "^2.1.3",
    "react-app-rewired": "^2.1.1",
    "react-dom": "^16.6.3",
    "react-redux": "^5.1.1",
    "react-router-dom": "^4.3.1",
    "react-scripts": "2.1.1",
    "redux": "^4.0.1",
    "redux-thunk": "^2.3.0"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

到此我们可以使用create-react-app基于antd来尽情开发。

接下来我们就可以进入第二章节学习来结合eslint airbnb 或者 Prettier https://www.jianshu.com/p/4dacf0e9cf27