react+antd+mobx项目搭建过程记录

npx create-react-app project

 antd 安装

npm install antd --save

报错了：npm WARN deprecated core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.

解决方法参考http://www.mamicode.com/info-detail-2825972.html

安装nrm，此模块主要的功能可以切换镜像源地址

npm install -g nrm

查询目前可用镜像源地址

nrm ls

切换镜像源

nrm use taobao

重新安装antd

npm install antd --save

按需加载的方式antd

//引入 react-app-rewired 并修改 package.json 里的启动配置。
yarn add react-app-rewired

/* package.json */
"scripts": {
"start": "react-app-rewired start",
 "build": "react-app-rewired build",
 "test": "react-app-rewired test --env=jsdom",
}

yarn add babel-plugin-import

yarn add less less-loader

yarn add customize-cra

yarn add react-app-rewired@2.x

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

const {
    override,
    fixBabelImports,
    addLessLoader,
  } = require("customize-cra");
  
  
  module.exports = override(
    fixBabelImports("import", {
      libraryName: "antd", libraryDirectory: "es", style: true // change importing css to less
    }),
    addLessLoader({
      JavascriptEnabled: true,
      modifyVars: { "@primary-color": "#1DA57A" }
    })
  );

关于Mobx中装饰器语法的环境配置

git add .
git commit -m "init"
npm run eject
//安装装饰器所需依赖
npm install --save-dev babel-plugin-transform-decorators-legacy

//安装应用配置
npm install @babel/plugin-proposal-decorators

//安装mobx和mobx-react
npm install mobx --save
npm install mobx-react

配置package.json

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

在config-overrides.js中添加addDecoratorsLegacy()

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


module.exports = override(
    fixBabelImports("import", {
        libraryName: "antd", libraryDirectory: "es", style: true // change importing css to less
    }),
    addLessLoader({
        JavascriptEnabled: true,
        modifyVars: { "@primary-color": "#1DA57A" }
    }),
    addDecoratorsLegacy(),
);

环境测试

1.新建store.js模拟本地数据库

import {observable} from "mobx";
class Store {
    @observable title="mobx装饰器成功载入";
}
export  default  new Store()

在app.js中调用

import React, { Component } from 'react';
import {Button} from 'antd';
import Store from "./store";
import {observer} from "mobx-react"

@observer
class App extends Component {
  render() {
    return (
        

          测试
          {Store.title}
        
    );
  }
}
export default App;

结果：create-react-app+antd+mobx项目搭建成功