create-react-app+mobx（+装饰器）+antd 一步一步搭建过程

全局安装

npm install -g create-react-app yarn
//yarn  这是一个类npm 的管理工具 挺好用的 安装包可以离线安装  安装过一次 不需要重复请求外网

create-react-app 你的项目名字
//创建项目 

然后开始安装配置 和工具
下面是antd官方网站引入的解释 和步骤
详情自己看下就好了很简单的

//安装antd ui库
yarn add antd

按需加载的方式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",
}

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

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

使用 babel-plugin-import#
babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件（原理），现在我们尝试安装它并修改 config-overrides.js 文件。

yarn add babel-plugin-import

//config-overrides.js
+ const { injectBabelPlugin } = require('react-app-rewired');

  module.exports = function override(config, env) {
+   config = injectBabelPlugin(
+     ['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }],
+     config,
+   );
    return config;
  };

自定义主题

$ yarn add react-app-rewire-less

//照 配置主题 的要求，自定义主题需要用到 less 变量覆盖功能。我们可以引入 react-app-rewire 的 less 插件 react-app-rewire-less 来帮助加载 less 样式，同时修改 config-overrides.js 文件。
  const { injectBabelPlugin } = require('react-app-rewired');
+ const rewireLess = require('react-app-rewire-less');

  module.exports = function override(config, env) {
    config = injectBabelPlugin(
-     ['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }],
+     ['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }], // change importing css to less
      config,
    );
+   config = rewireLess.withLoaderOptions({
+     modifyVars: { "@primary-color": "#1DA57A" },
+     javascriptEnabled: true,
+   })(config, env);
    return config;

//下面开始装 mobx

    npm install mobx-react mobx  --save

如果不使用装饰器到此为止了

装饰器 是es7里面的 目前 有个比较high外国blog配置好了关于这个东西

第一步先把webpack 暴露出来 即使用 npm run eject 把react-script 里面的webpack配置全部暴露出来 然后 你仔细看的话会发现多了好多东西 稍微花点心思看下 挺好 ， 至少不用在 npm start 报错之后去百度 一堆 不相关的关键字，

然后 接着装相关依赖

npm install --save-dev babel-plugin-transform-decorators-legacy

//package.json
"babel": {
  "plugins": [
    "transform-decorators-legacy"
  ],
  "presets": [
    "react-app"
  ]
},

然后 你就该启动项目了

npm start

然后你就看到报错了 unfind’react-script/**’
接着你就去 node_modules里面找
诶 我曹 真不见了
不见了 就蒙圈了 这玩意儿 不是官方配置的webpack 便民启动包 么
这么 一顿瞎鸡儿操作 就没了
这个东西就是你在执行了npm run eject 之后被删除的 而且是工程不可逆的；
当然他给你关闭了一扇大门 就会给你开个狗洞

嗯嗯 所以 当你用完 npm run eject 之后 我们需要进一步修改package.json
···
“scripts”: {
“start”: “node scripts/start.js”,
“build”: “node scripts/build.js”,
“test”: “node scripts/test.js –env=jsdom”
},
···

改完之后 可以试试 npm start 或者 yarn start
如果依旧报错了类似于下图中的

上图顺序为
npm run eject
yarn start ==>得到报错
重新安装过包
npm i

good luck（如果你按照这玩意儿走了一遍还有问题 请不要再下面问我 我也是个菜鸟 我反正用这个没问题 没办法 人菜就这么任性 最后那个blog 和第一个blog 都是大佬 有问题去问他们吧）

如果非要用react-script的话 请执行

create-react-app 你的工程名

后面附上 优秀连接
添加装饰器的blog

mobx状态管理官网

antd官网

这个blog非常好 react 应用中使用装饰器