Babel7: декораторы предотвращают использование статических свойств класса - PullRequest
Новая
       66

Babel7: декораторы предотвращают использование статических свойств класса

0 голосов
/ 25 октября 2018

У меня проблема с транспарантной машинкой Babel7, декораторами и свойствами класса.Вот типичный компонент, украшенный MobX @observer и нашим @custom декоратором. 

@observer
@custom
export class Trends extends React.Component<TrendsProps> {
  .....

  public static readonly METHODS = {
    TOTAL: 'total',
    DIFFERENT: 'different'
  };
  public static readonly defaultState: TrendsStates = {
    method: Trends.METHODS.TOTAL
  };

  .....
}

После переноса его с помощью babel-loader я получаю следующий целевой код: 

// transpiled Trends module code
  return Trends;
}(__WEBPACK_IMPORTED_MODULE_7_react__["Component"]), _class2.METHODS = {
  TOTAL: 'total',
  DIFFERENT: 'different'
}, _class2.defaultState = {
  method: Trends.METHODS.TOTAL
}, _temp)) || _class) || _class);
;

Таким образом, хотя объявленные статические свойства подключаются к декорированному классу _class2, внутри них есть старый вызов класса Trends, которого просто нет в текущей области видимости.Когда декораторы удалены, все работает как шарм.Мои babel.config.js: 

module.exports = api => {
  api.cache(false);

  return {
    presets: [
      [
        '@babel/preset-env',
        {
          targets: {
            browsers: ['last 2 Chrome versions', 'last 2 Safari versions', 'last 2 Firefox versions']
          },
          modules: false,
          forceAllTransforms: true
        }
      ],
      '@babel/preset-react',
      '@babel/preset-typescript',
    ],
    env: {
      test: {
        presets: [['@babel/preset-env'], '@babel/preset-react']
      }
    },
    plugins: [
      ['@babel/plugin-proposal-decorators', { legacy: true }],
      ['@babel/plugin-proposal-class-properties', { loose: true }],
      '@babel/plugin-proposal-object-rest-spread',
      '@babel/plugin-syntax-dynamic-import',
      [
        '@babel/plugin-transform-runtime',
        {
          helpers: true
        }
      ],
      'react-hot-loader/babel'
    ]
  };
};

Корни проблемы объясняются здесь , но без решения для babel7.Как видите, я использовал предложенный конфиг из этого потока , и он действительно позволяет использовать декораторы, но вылетает из-за статических свойств.Удаление декоратора @custom не повлияет на проблему.

...