Dekoratory Webpack Babel 6 ES6


101

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.


Odkąd włączyłem ustawienie wstępne stage-0, pomyślałem, że zostaną one przekształcone. Dekoratory są częścią ustawienia wstępnego etapu 1, które powinno obejmować transformatory dekoratorów. Jak napisano na stronie babel.
Pavlin

@Pavlin Zastanawiam się, czy to może być problem z zamówieniem presets.
Sulthan

Myślałem, że tak może być, ale przetestowałem to ponownie. Tak czy inaczej, otrzymuję błąd. Wygląda na to, że kolejność ma znaczenie, ale nie sądzę, że w tym tkwi problem.
Pavlin

Odpowiedzi:


170

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.


Prawdopodobnie nie chciałbyś, aby wtyczka była włączona tylko dla development.
loganfsmyth

Dzięki @loganfsmyth. Zaktualizowałem odpowiedź, aby uwzględnić productionrównież
Kyle Finley

1
To znaczy, po co w ogóle umieszczać to w envbloku? Możesz mieć pluginsjako rodzeństwopresets
loganfsmyth

1
@ am5255, wydaje się, że nadal działa dla mnie. Czy mógłbyś zgłosić problem z autorem? github.com/loganfsmyth/babel-plugin-transform-decorators-legacy/…
Kyle Finley

1
W końcu udało mi się to uruchomić. Okazuje się, musiałem zainstalować transform-class-propertiesoraz babeljs.io/docs/plugins/transform-class-properties a także upewnić się, że wtyczka jest starszego typu przed transformacji wtyczki klasy zgodnie docs w github.com/loganfsmyth/babel-plugin- transform-decorators-legacy
reectrix

41

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.


6
Na podstawie tego wydania stworzono starszą wtyczkę „najlepiej z ograniczeniami”. Zobacz plik
Jason

Mogę potwierdzić, że dziedzictwo dekoratorów transformacji sprawdza się jako rozwiązanie tymczasowe.
dvlsg

@Pavlin, chociaż twoja odpowiedź mogła być poprawna, wtyczka wymieniona poniżej powinna być na razie zaakceptowaną odpowiedzią.
Ajax

8

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"]
    }
  },

1
Spędź tu i tam godzinę i to mi się udało.
Wielkie

3

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


1
Wciąż mi się to nie udało.
amcdnl

3
@amcdnl Mam wrażenie, że wtyczka dekoratorów transformacji jest oficjalna, ale nie została zaimplementowana z powodu ograniczeń TC39, w międzyczasie jest to - github.com/loganfsmyth/babel-plugin-transform-decorators-legacy
Qiming

@Qiming yup, to jest to, czego ostatecznie użyłem, a urzędnik Babel mówi nawet, że jeśli
kopiesz

1

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.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.