[javascript] Webpack babel 6 ES6 데코레이터

Program / 글쓴이

내 번 들러로 webpack을 사용하여 ES6로 작성된 프로젝트가 있습니다. 대부분의 트랜스 파일은 잘 작동하지만 아무 데나 데코레이터를 포함하려고하면이 오류가 발생합니다.

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

바벨 이슈 트래커를 살펴 보았지만 거기에서 아무것도 찾을 수 없었기 때문에 잘못 사용하고 있다고 가정합니다. 내 웹팩 구성 (관련 비트) :

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

나는 다른 것, 화살표 기능, 모든 구조 분해에 문제가 없습니다.이게 작동하지 않는 유일한 것입니다.

얼마 전에 작동했던 바벨 5.8로 다운 그레이드 할 수 있다는 것을 알고 있지만 현재 버전 (v6.2.0)에서 작동하도록하는 방법이 있다면 도움이 될 것입니다.

답변

이 Babel 플러그인은 저에게 효과적이었습니다.

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

또는

웹팩

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

네이티브 반응

으로 react-native당신이 사용해야 babel-preset-react-native-stage-0하는 대신 플러그인을.

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

.babelrc

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

자세한 설명은이 질문과 답변 을 참조하십시오 .

답변

babels slack 웹 채팅에 5 분을 보낸 후, 나는 현재 버전의 babel (v6.2)에서 데코레이터가 깨지는 것을 발견했습니다. 유일한 해결책은 현재 5.8로 다운 그레이드하는 것 같습니다.

또한 문제 추적기를 github에서 https://phabricator.babeljs.io 로 옮긴 것 같습니다.

몇 시간 동안 검색 한 후 현재 문서가 매우 열악하고 부족하다는 것을 알게 되었기 때문에이 모든 것을 기록했습니다.

답변

설치 babel-plugin-transform-decorators-legacy는 나 에게만 효과 가 없었습니다 (카르마와 함께 효소를 사용하는 구성이 있습니다). 설치 결과 transform-class-properties: transform-class-properties 및 transform-decorators-legacy 의 문서에 따라 레거시 플러그인이 변환 클래스 플러그인 앞에 있는지 확인하여 마침내 작동하게되었습니다.

나는 또한 .babelrc파일을 사용하지 않지만 이것을 내 karma.conf.js파일에 추가하면 나를 위해 일했습니다. 

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

나는 또한 그것을 내 로더에 추가했습니다. 

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

답변

변형 데코레이터 플러그인이 필요합니다 : http://babeljs.io/docs/plugins/transform-decorators/

답변

프로젝트를 Babel 6에서 Babel 7로 업그레이드했다면 @babel/plugin-proposal-decorators.

Babel 5에서 사용되는 레거시 데코레이터를 지원하려면 .babelrc다음과 같이 구성해야 합니다.

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

확인 @babel/plugin-proposal-decorators앞에 오는 @babel/plugin-proposal-class-properties후자의 활용되는 경우.

답변