create-react-app 2.1.8版本自定义配置

在用create-react-app新建项目后，运行eject命令，可看到各项配置。

按需引入ant design组件

1.yarn add babel-plugin-import
2.package.json文件的babel配置项中，添加

["import",{"libraryName": "antd","libraryDirectory": "es","style": "css"}]

增加装饰器配置

1.yarn add @babel/plugin-proposal-decorators --dev
2.package.json文件的babel配置项中，添加

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

legacy设为true，表示使用stage 1阶段装饰器语法和行为。

3.package.json文件的eslintConfig配置项中，添加

"parserOptions": {"ecmaFeatures": {"legacyDecorators": true}}

若没有设置第3步，则decorators的旧写法，即以下写法仍然无法使用。

@decorator
export class Foo {}

原因在Please use export @dec class instead中有提到：是因为目前只有babel-eslint@11支持，而babel-eslint@11目前为止，还只是一个beta版本。

开启HMR

在index.js的底部，增加以下代码if (module.hot) module.hot.accept();。不过，这么简单的配置，无法保持state状态，每次热更新时state状态会被重置。要想state状态能保持，可使用React-Hot-Loader实现。

参考自：
追溯 React Hot Loader 的实现
@babel/plugin-proposal-decorators
Please use export @dec class instead