React项目框架初始化操作（建框架，UI，样式，路由）及错误lessOptions?, prependData?, appendData?, sourceMap?解决

一、创建框架 CRA

命令： npx create-react-app item

注释： npx不可用的可使用cnpm创建

二、安装基本插件

yarn add react redux react-redux redux-devtools-extension immutable react-immutable react-router-dom

三、选择UI框架（此处以Antd4.3.3 UI 为例）

框架手册：https://ant.design/index-cn
（1）安装：

yarn add antd

（2）配置按需加载Antd

     1、安装：yarn add react-app-rewired customize-cra
     2 修改package.json  将react-scripts改成react-app-rewired
     3、创建config-overrides.js配置（见手册）
	 4、安装antd按需加载模块yarn add babel-plugin-import
	 5、修改config-overrides.js配置（见手册）

（2.2）修改package.json 将react-scripts改成react-app-rewired

"scripts": {
     
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },

（2.5）修改config-overrides.js配置
安装 yarn add less [email protected]

// 自定义主题
const {
      override, fixBabelImports, addLessLoader } = require('customize-cra');

// antd 用于修改默认配置
// module.exports = function override(config, env) {
     
//     // do stuff with the webpack config...
//     return config;
//   };


// 自定义主题
module.exports = override(
    fixBabelImports('import', {
     
      libraryName: 'antd',
      libraryDirectory: 'es',
    //   style: 'css',
      style: true,
}),
addLessLoader({
     
      javascriptEnabled: true,
      modifyVars: {
     
            // 重写全局样式
           '@primary color': '#1DA57A'
        },
    }),
);

（3）配置国际化 修改index.js（注：修改app.js也行）

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

import {
      ConfigProvider } from 'antd';
import zhCN from 'antd/es/locale/zh_CN';

ReactDOM.render(
<ConfigProvider locale={
     zhCN}>
    <App />
</ConfigProvider>, 
document.getElementById('root')
);

四、项目样式管理模块

（1）安装

yarn add styled-components

（2）src\static\reset.js文件

import {
     createGlobalStyle} from 'styled-components';

export const GlobalStyle = createGlobalStyle`
  html, body, div, span, applet, object, iframe,
  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  a, abbr, acronym, address, big, cite, code,
  del, dfn, em, img, ins, kbd, q, s, samp,
  small, strike, strong, sub, sup, tt, var,
  b, u, i, center,
  dl, dt, dd, ol, ul, li,
  fieldset, form, label, legend,
  table, caption, tbody, tfoot, thead, tr, th, td,
  article, aside, canvas, details, embed, 
  figure, figcaption, footer, header, hgroup, 
  menu, nav, output, ruby, section, summary,
  time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size:100%;
    font: inherit;
    vertical-align: baseline;
    font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
  }
  /* HTML5 display-role reset for older browsers */
  article, aside, details, figcaption, figure, 
  footer, header, hgroup, menu, nav, section {
    display: block;
  }
  body {
    line-height: 1;
  }
  body,html,#root{
   	 width: 100%;
  height: 100%;
  }
  ol, ul {
    list-style: none;
  }
  blockquote, q {
    quotes: none;
  }
  blockquote:before, blockquote:after,
  q:before, q:after {
    content: '';
    content: none;
  }
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  .icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
`;

五、路由模块初始化配置

（1）创建router\index.js输入下述代码

// 导入库
import React,{
     Component} from 'react';
import {
     
    HashRouter as Router,
    Route,
    Switch,
    Redirect
} from 'react-router-dom';

// 导入组件
import Login from '../pages/login/index';
import Admin from '../pages/admin/index';
import Err404 from '../components/err/404';
import Err500 from '../components/err/500';

class ReactRouter extends Component
{
     
    render()
    {
     
        return (
            <Router>
                <Switch>
                    <Route path="/login" component={
     Login}></Route>
                    <Route path="/admin">
                        <Switch>
                        {
     /* 
                        备注：后期这里有很多很多路由
                        举例：订单路由、商品路由等
                        */}
                        <Route path="/admin" exact component={
     Admin}></Route>
                        </Switch>
                    </Route>
                    <Route path="/404" component={
     Err404}></Route>
                    <Route path="/500" component={
     Err500}></Route>
                    <Redirect to="/404" /> 
                </Switch> 
            </Router>
        )
    } 
}

export default ReactRouter;

（2）创建下述代码所需组件

pages/login/index.js 
pages/admin/index.js 
components/err/404.js 
components/err/500.js

import React, {
      Component } from 'react'
 class 名称推荐同文件名 extends Component {
     
    render() {
     
        return (
            <div>
                this is 名称 index
            </div>
        )
    }
}

export default 组件名

（3）将router/index.js和项目关联起来（App.js）

// 导入库
import React, {
      Component } from 'react'

// 导入样式
import {
      GlobalStyle } from './static/reset';

// 导入UI组件
import {
      ConfigProvider } from 'antd';
import zhCN from 'antd/es/locale/zh_CN';

// 导入路由
import Router from './router/index'

// 定义组件
class App extends Component 
{
     
    render() {
     
        return (
            <ConfigProvider locale={
     zhCN}>
                <GlobalStyle />
                <Router />
            </ConfigProvider>
        )
    }
}

export default App

六、自定义
具体使用可根据自身情况进行对应修改
七、启动报错
（1）问题
ValidationError: Invalid options object. Less Loader has been initialized using an options object that does not match the API schema.
options has an unknown property ‘source’. These properties are valid:
object { lessOptions?, prependData?, appendData?, sourceMap? }
解决方案：

yarn remove less-loader
yarn add less-loader@5.0.0