ওয়েবপ্যাক ব্যাবেল 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

আমি ভেবেছিলাম যেহেতু আমি পর্যায় -0 প্রিসেটটি অন্তর্ভুক্ত করেছি, তারা সঠিকভাবে রূপান্তরিত হবে। সাজসজ্জারীরা স্টেজ -১ প্রিসেটের অংশ যা ট্রান্সফর্ম-ডেকোরেটর অন্তর্ভুক্ত করা উচিত। বাবেল লিখিত হিসাবে।

— পাভলিন

@ পাভলিন আমি ভাবছি যে এটি অর্ডার দেওয়ার ক্ষেত্রে কোনও সমস্যা হতে পারে কিনা 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।

— লগানফস্মিথ

ধন্যবাদ @ লগনফস্মিথ আমি উত্তর আপডেট অন্তর্ভুক্ত করা করেছি productionপাশাপাশি

— কাইলি ফিনলে

আমি বলতে চাইছি, কেন একে একে কোনও envব্লক লাগিয়েছে? আপনি থাকতে পারে pluginsএকটি সহোদর হিসাবেpresets

— loganfsmyth

@ am5255, এখনও এটি আমার জন্য কাজ করছে বলে মনে হচ্ছে। আপনি লেখকের সাথে একটি সমস্যা জমা দিতে আপত্তি করতে চান? github.com/loganfsmyth/babel-plugin-transfor-decorators-legacy/…

— কাইল ফিনলে

অবশেষে এটি কাজ করতে সক্ষম হয়েছিল। দেখা যাচ্ছে যে আমাকে transform-class-propertiesপাশাপাশি ব্যাবেলজ.ইও / ডকস / প্লাগইনস

— সজ্জকার

Answer 2

বাবেলজ স্ল্যাক ওয়েবচ্যাটে 5 মিনিট ব্যয় করার পরে আমি জানতে পেরেছি যে বাবেলের বর্তমান সংস্করণে সজ্জকারগুলি ভেঙে গেছে (v6.2)। একমাত্র সমাধান হ'ল এই সময়ে 5.8 এ ডাউনগ্রেড করা।

দেখে মনে হবে যে তারা তাদের ইস্যু ট্র্যাকারটি গিথব থেকে https://phabricator.babeljs.io এ স্থানান্তরিত করেছে

আমি এই সমস্ত লিখছি, যেহেতু কয়েক ঘন্টা অনুসন্ধানের পরে আমি বর্তমান নথিটি খুব দরিদ্র এবং অভাবের সাথে খুঁজে পেয়েছি।

Comments

এই সমস্যাটি থেকে, "সীমাবদ্ধতার সাথে সেরা চেষ্টা" লিগ্যাসি প্লাগইন তৈরি হয়েছিল। সীমাবদ্ধতার জন্য রিডমি

— জেসন

আমি নিশ্চিত করতে পারি যে ট্রান্সফর্ম সাজসজ্জার উত্তরাধিকার অন্তর্বর্তীকালীন সমাধান হিসাবে আমার জন্য কাজ করছে।

— ডিভিএলসজি

@ পাভলিন, যদিও আপনার উত্তরটি সঠিক হতে পারে, নীচের তালিকাভুক্ত প্লাগইনটি আপাতত স্বীকৃত উত্তর হওয়া উচিত।

— আজাক্স

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

এখানে এবং সেখানে এক ঘন্টা ব্যয় করুন এবং এই জিনিসগুলি আমার পক্ষে কাজ করেছিল। অনেক ধন্যবাদ

— সিজমিলিং

Answer 4

আপনার কেবলমাত্র একটি রূপান্তর সজ্জকার প্লাগইন দরকার: http://babeljs.io/docs/plugins/transform-decorators/

Comments

তবুও আমার জন্য ব্যর্থ হয়েছে।

— amcdnl

@ এমসিডিএনএল আমার ধারণাটি যে ট্রান্সফর্ম সজ্জাকরণ প্লাগইনটি অফিসিয়াল এক তবে টিসি

— 39

@ কিমিং ইয়ুপ ঠিক কীভাবে আমি ব্যবহার শেষ করেছি এবং আধিকারিকরা এমনকি বলেছে যে আপনি যদি যথেষ্ট পরিমাণ খনন করেন তবে তাদের অংশ সম্পর্কে দুর্দান্ত ভয়ঙ্কর ধারণা ইমো

— এমসিডিএনএল

Answer 5

আপনি যদি বাবেল 6 থেকে বাবেল 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আসবে।