共计 831 个字符，预计需要花费 3 分钟才能阅读完成。
在用 create-react-app 新建项目后，运行 eject 命令，可看到各项配置。
按需引入 ant design 组件
1.yarn add babel-plugin-import2.package.json 文件的 babel 配置项中，添加
[“import”,{“libraryName”: “antd”,”libraryDirectory”: “es”,”style”: “css”}]
增加装饰器配置
1.yarn add @babel/plugin-proposal-decorators –dev2.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-decoratorsPlease use export @dec class instead
