create-react-app如何配置@修饰器功能

用create-react-app生成项目后，默认是不支持@修饰器的，
如果我们需要使用@修饰器，比如使用mobx时，应该如何配置呢？
网上看了很多资料，基本都是关于 babel6 及以下版本的方案，
所以写了这篇文章，专门说说 babel7+ 版本如何配置

1.暴露配置文件
使用create-react-app生成项目后，
执行yarn eject，将 webpack 配置文件暴露出来。

2.修改配置文件
修改/config/webpack.config.dev.js和/config/webpack.config.prod.js文件，
两个文件的修改内容相同，都是添加两行代码，如下

{
  test: /\.(js|mjs|jsx|ts|tsx)$/,
  include: paths.appSrc,
  loader: require.resolve('babel-loader'),
  options: {
    // ... 省略其他代码
    plugins: [
      // ！！要添加以下两行代码：
      ["@babel/plugin-proposal-decorators", { "legacy": true }],
      ["@babel/plugin-proposal-class-properties", { "loose": true }],
      // ... 省略其他代码
    ],
    // ... 省略其他代码
  },
  // ... 省略其他代码
}

注意插件排序：@babel/plugin-proposal-decorators应该是插件列表中的第一个插件

3.安装依赖包:
npm install --save-dev @babel/plugin-proposal-decorators babel-plugin-transform-decorators-legacy

4.万事大吉
是不是很简单，此时执行npm start，项目就跑起来了，快试试吧