create-react-app脚手架创建应用

脚手架安装

npm install -g create-react-app

yarn global add create-react-app

脚手架创建项目

create-react-app app-name

---

引入antd

yarn add antd-mobile

antd按需加载

yarn add babel-plugin-import

yarn add react-app-rewired customize-cra

yarn add less less-loader

新建文件   config-overrides

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' },

    }),

);

---

引入路由react-router-dom

yarn add react-router-dom

yarn add react-loadable(路由分块加载)

创建routes文件，定义整个项目的路由对象,然后在全局index中引入router

---

引入redux

rematch(redux二次封装，方便使用)

yarn add redux

yarn add react-redux

yarn add rematch

---

支持装饰器模式

yarn add @babel/plugin-proposal-decorators

package.json中新增配置

"babel": { "presets": [ "react-app" ], "plugins": [ [ "@babel/plugin-proposal-decorators", { "legacy": true } ] ] }