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