在用 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