वेबपैक बाबेल 6 ईएस 6 सज्जाकार

Question

मुझे अपने बंडल के रूप में वेबपैक के साथ 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) में इसे काम करने का कोई तरीका है, तो इससे मदद मिलेगी।

Comments

मैंने सोचा था कि जब से मैं मंच-पूर्व निर्धारित को शामिल करता हूं, तो वे उचित रूपांतरित हो जाएंगे। डेकोरेटर स्टेज -1 प्रीसेट का हिस्सा हैं जिसमें ट्रांसफॉर्म-डेकोरेटर्स शामिल होने चाहिए। जैसा कि बेबेल वेबसाइट पर लिखा गया है।

— पावलिन

@Pavlin मैं सोच रहा हूँ कि क्या यह आदेश के साथ एक मुद्दा हो सकता है presets।

— सुल्तान

मुझे लगा कि यह हो सकता है, लेकिन मैंने इसे फिर से परखा। किसी भी तरह से मैं इसे डाल देता हूं मुझे एक त्रुटि मिलती है। जाहिरा तौर पर आदेश मायने रखता है, लेकिन मुझे नहीं लगता कि यहाँ समस्या है।

— पावलिन

Answer 1

इस बैबल प्लगइन ने मेरे लिए काम किया:

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

या

Webpack

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

कृपया इस प्रश्न और उत्तर को पूर्ण विवरण के लिए देखें।

Comments

आप शायद नहीं चाहते कि प्लगइन केवल इसके लिए सक्षम हो development।

— loganfsmyth

धन्यवाद @loganfsmyth मैं इस सवाल का जवाब अद्यतन शामिल करने के लिए है productionके रूप में अच्छी तरह से

— केली फिनले

मेरा मतलब है, इसे एक envब्लॉक में क्यों रखा जाए ? आपके पास pluginsएक भाई-बहन के रूप में हो सकता हैpresets

— loganfsmyth

@ am5255, यह अभी भी मेरे लिए काम कर रहा है। क्या आप लेखक के साथ कोई मुद्दा प्रस्तुत करना चाहेंगे? github.com/loganfsmyth/babel-plugin-transform-decorators-legacy/…

— काइल फिनाले

आखिरकार यह काम करने में सक्षम था। बाहर मैं बदल जाता है स्थापित करने के लिए किया था transform-class-propertiesऔर साथ ही babeljs.io/docs/plugins/transform-class-properties है और यह भी कि विरासत प्लगइन से पहले दस्तावेज़ों के अनुसार वर्ग प्लगइन को बदलने में है सुनिश्चित करें कि github.com/loganfsmyth/babel-plugin- ट्रांसफॉर्मर-डेकोरेटर्स-विरासत

— रेक्ट्रिक्स

Answer 2

Babeljs सुस्त वेबचैट पर 5 मिनट बिताने के बाद, मुझे पता चला कि सज्जाकार बेबल (v6.2) के वर्तमान संस्करण में टूट गए हैं। एकमात्र समाधान इस समय घटकर 5.8 रह गया है।

यह भी लगता है कि वे अपने मुद्दे पर नजर रखने वाले को github से https://phabricator.babeljs.io पर ले गए

मैं यह सब लिखता हूं, क्योंकि खोज के घंटों के बाद मैंने मौजूदा दस्तावेज को बहुत खराब और कमी पाया है।

Comments

उस मुद्दे से, "सीमाओं के साथ सबसे अच्छा प्रयास" विरासत प्लगइन बनाया गया था। सीमाओं के लिए रीडमी देखें: npmjs.com/package/babel-plugin-transform-decorators-legacy

— जेसन

मैं पुष्टि कर सकता हूं कि ट्रांसफॉर्मर डेकोरेटर्स की विरासत मेरे लिए एक अंतरिम समाधान के रूप में काम कर रही है।

— १०:१५ को १०:५०

@Pavlin, हालांकि आपका उत्तर सही हो सकता है, नीचे सूचीबद्ध प्लगइन अभी के लिए स्वीकृत उत्तर होना चाहिए।

— अजाक्स

Answer 3

केवल स्थापित babel-plugin-transform-decorators-legacyकरने से मेरे लिए काम नहीं हुआ (मेरे पास कर्म के साथ एंजाइम का उपयोग करके एक कॉन्फ़िगरेशन है)। स्थापित करने की बारी transform-class-properties: ट्रांसफ़ॉर्म-क्लास-प्रॉपर्टीज़ और यह भी सुनिश्चित करना कि लीगेसी प्लग - इन ट्रांसफ़ॉर्म-डेकोरेटर्स-लीगेसी में डॉक्स के अनुसार ट्रांसफॉर्म क्लास प्लगइन से पहले है, आखिरकार यह मेरे लिए काम कर गया।

मैं किसी .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"]
    }
  },

Comments

यहां और वहां एक घंटा बिताएं और यह चीजें मेरे लिए काम की हैं। बहुत बहुत धन्यवाद

— cjmling

Answer 4

आपको बस एक ट्रांसफ़ॉर्म डेकोरेटर प्लगइन की आवश्यकता है: http://babeljs.io/docs/plugins/transform-decorators/

Comments

अभी भी मेरे लिए असफल w / कि।

— एमसीडीएनएल

@amcdnl मेरी धारणा है कि ट्रांसफ़ॉर्म डेकोरेटर्स प्लगइन आधिकारिक है, लेकिन TC39 बाधाओं के कारण इसे छोड़ दिया गया है, इस बीच में यह है - github.com/loganfsmyth/babel-plugin-transform-decorators-legacy

— Qiming

@Qiming हाँ, जो मैंने प्रयोग किया और बाबेल अधिकारी ने कहा कि अगर यू काफी दूर खोदें तो बहुत अच्छा लगता है .. उनके भाग imo पर बहुत भयानक विचार

— amcdnl

Answer 5

यदि आपने अपने प्रोजेक्ट को Babel 6 से Babel 7 में अपग्रेड किया है, तो आप इंस्टॉल करना चाहते हैं @babel/plugin-proposal-decorators।

यदि आप बबैल 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कि मामले में आप बाद का उपयोग कर रहे हैं।