Dekoratory Webpack Babel 6 ES6

Mam projekt napisany w ES6 z pakietem webpack. Większość transpilingów działa dobrze, ale kiedy próbuję dodać dekoratory w dowolnym miejscu, pojawia się ten błąd:

Decorators are not supported yet in 6.x pending proposal update.

Przejrzałem narzędzie do śledzenia problemów Babel i nie udało mi się tam niczego znaleźć, więc zakładam, że używam go źle. Moja konfiguracja webpacka (odpowiednie bity):

loaders: [
  {
    loader: 'babel',
    exclude: /node_modules/,
    include: path.join(__dirname, 'src'),
    test: /\.jsx?$/,
    query: {
      plugins: ['transform-runtime'],
      presets: ['es2015', 'stage-0', 'react']
    }
  }
]

Z niczym innym nie mam problemu, funkcje strzałek, destrukturyzacja wszystkiego działa dobrze, to jedyna rzecz, która nie działa.

Wiem, że zawsze mógłbym przejść na starszą wersję babel 5.8, gdzie pracowałem jakiś czas temu, ale jeśli istnieje sposób, aby to działało w aktualnej wersji (v6.2.0), to by pomogło.

Ta wtyczka Babel działała dla mnie:

https://github.com/loganfsmyth/babel-plugin-transform-decorators-legacy

npm i --save-dev babel-plugin-transform-decorators-legacy

.babelrc

{
  "presets": ["es2015", "stage-0", "react"],
  "plugins": [
    ["transform-decorators-legacy"],
    // ...
  ]
}

lub

Webpack

{
  test: /\.jsx?$/,
  loader: 'babel',
  query: {
    cacheDirectory: true,
    plugins: ['transform-decorators-legacy' ],
    presets: ['es2015', 'stage-0', 'react']
  }
}

React Native

Z react-nativenależy użyć babel-preset-react-native-stage-0wtyczki zamiast.

npm i --save babel-preset-react-native-stage-0

.babelrc

{
  "presets": ["react-native-stage-0/decorator-support"]
}

Zapoznaj się z tym pytaniem i odpowiedzią, aby uzyskać pełne wyjaśnienie.

Po spędzeniu 5 minut na luźnym czacie internetowym babeljs, dowiedziałem się, że dekoratory są zepsute w obecnej wersji babel (v6.2). Jedynym rozwiązaniem wydaje się w tej chwili obniżenie wersji do 5.8.

Wydawałoby się również, że przenieśli swój tracker problemów z github do https://phabricator.babeljs.io

Wszystko to spisuję, bo po godzinach poszukiwań stwierdziłem, że aktualna dokumentacja jest bardzo uboga i jej brakuje.

Instalacja tylko babel-plugin-transform-decorators-legacymi nie wyszła (mam konfigurację z użyciem enzymu wraz z karmą). Okazuje się, że instalacja transform-class-properties: właściwości klasy transformacji, a także upewnienie się, że starsza wtyczka znajduje się przed wtyczką klasy transformacji, zgodnie z dokumentacją w transform-decorators-legacy końcu sprawiła, że ​​zadziałała.

Nie używam też .babelrcpliku, ale dodanie tego do mojego karma.conf.jspliku zadziałało:

babelPreprocessor: {
  options: {
    presets: ['airbnb', 'es2015', 'stage-0', 'react'],
    plugins: ["transform-decorators-legacy", "transform-class-properties"]
  }
}

Dodałem również do moich ładowarek:

loaders: [
  {
    test: /\.js$/,
    loader: 'babel',
    exclude: path.resolve(__dirname, 'node_modules'),
    query: {
      presets: ['airbnb', 'es2015', 'stage-0', 'react'],
      plugins: ["transform-decorators-legacy", "transform-class-properties"]
    }
  },

Potrzebujesz tylko wtyczki dekoratorów transformacji: http://babeljs.io/docs/plugins/transform-decorators/

Jeśli zaktualizowałeś swój projekt z Babel 6 do Babel 7, chcesz zainstalować @babel/plugin-proposal-decorators.

Jeśli chcesz obsługiwać starsze dekoratory używane w Babel 5, musisz skonfigurować .babelrcnastępujące elementy:

plugins: [
      ['@babel/plugin-proposal-decorators', { legacy: true }],
      ['@babel/plugin-proposal-class-properties', { loose: true }],
]

Upewnij się, że @babel/plugin-proposal-decoratorsjest wcześniej @babel/plugin-proposal-class-propertiesw przypadku, gdy korzystasz z tego drugiego.