বাবেল ফাইলটি রূপান্তরিত না করে অনুলিপি করা হয়

Question

আমার এই কোডটি রয়েছে:

"use strict";

import browserSync from "browser-sync";
import httpProxy from "http-proxy";

let proxy = httpProxy.createProxyServer({});

এবং আমি ইনস্টল করা আছে babel-coreএবং babel-cliবিশ্বব্যাপী npm মাধ্যমে। মূল বিষয়টি যখন আমি আমার টার্মিনালে এটি সংকলনের চেষ্টা করি:

babel proxy.js --out-file proxified.js

আউটপুট ফাইলটি সংকলনের পরিবর্তে অনুলিপি করা হয় (মানে, এটি উত্স ফাইলের মতোই)।

আমি এখানে কি মিস করছি?

Comments

না letপরিবর্তন varকিন্তু importবিবৃতি থাকবেন?

— রান্পায়ার্ড

প্রতিক্রিয়াটির নতুন সংস্করণগুলির জন্য, নতুন বাবেল মডিউলগুলি ব্যবহার করুন: stackoverflow.com/a/53927457/6665568 । এটিতে আরও ভাল ত্রুটি বার্তা রয়েছে এবং প্রতিক্রিয়াটির নতুন বৈশিষ্ট্যগুলিকে সমর্থন করে।

— নাটেশ ভাট

Answer 1

বাবেল একটি রূপান্তর কাঠামো। প্রাক-x.x, এটি ডিফল্টরূপে কিছু রূপান্তর সক্ষম করেছে, তবে নোড সংস্করণগুলির বর্ধিত ব্যবহারের সাথে যা মূলত অনেকগুলি ES6 বৈশিষ্ট্য সমর্থন করে, এটি বিষয়গুলি কনফিগারযোগ্য হওয়ার চেয়ে আরও বেশি গুরুত্বপূর্ণ হয়ে উঠেছে। ডিফল্টরূপে, বাবেল 6.x কোনও রূপান্তর সম্পাদন করে না। কি রূপান্তরগুলি চলতে হবে তা আপনাকে জানাতে হবে:

npm install babel-preset-env

এবং চালান

babel --presets env proxy.js --out-file proxified.js

অথবা সমন্বিত একটি .babelrcফাইল তৈরি করুন

{
    "presets": [
        "env"
    ]
}

আপনি যেমন আগে ছিলেন তেমন চালান।

envএই ক্ষেত্রে একটি প্রিসেট যা মূলত ES5 এর সাথে সমস্ত স্ট্যান্ডার্ড ES * আচরণকে সংকলন করতে বলে। আপনি যদি কিছু ES6 সমর্থন করে নোড সংস্করণ ব্যবহার করে থাকেন তবে আপনি করণ বিবেচনা করতে পারেন

{
    "presets": [
        ["env", { "targets": { "node": "true" } }],
    ]
}

আপনার নোড সংস্করণ দ্বারা সমর্থিত নয় এমন জিনিসগুলিকে কেবল প্রক্রিয়া করার জন্য প্রাইসেটটিকে জানাতে। আপনার ব্রাউজারের সমর্থন প্রয়োজন হলে আপনি আপনার লক্ষ্যগুলিতে ব্রাউজার সংস্করণগুলিও অন্তর্ভুক্ত করতে পারেন।

Comments

এটি দরকারী। তারা কেন এটি ডকুমেন্টেশনে রাখেনি? বিশ্বব্যাপী বাবেল-প্রিসেট ইনস্টল করা কি নিরাপদ?

— কিডকাপিটাল

@ কিডকাপিটাল ডকসগুলিতে এটি অন্তর্ভুক্ত রয়েছে তবে এটি কেবল একটি পার্শ্ব নোট হিসাবে মনে হচ্ছে। আমি যখন প্রথম প্রকাশিত হয়েছিল তখন কীভাবে বাবেল 6.0 সঠিকভাবে কনফিগার করা যায় তা নির্ধারণের জন্য আমি অনেক সময় ব্যয় করেছি।

— নিক

এই পোস্টের সংক্ষেপে পিআর # 72 প্রতি সেটআপ পৃষ্ঠায় একটি তথ্য বাক্স হিসাবে যুক্ত করা হয়েছে । খুব সামান্য উন্নতি, কিন্তু আপনি কোথাও শুরু করতে হবে! ধন্যবাদ লোগান

— নিক

কনফিগারেশন ওভার কনভেনশনের পক্ষে ... তাই বাক্সের বাইরে বাবেল কিছুই করেন না - কেবল ফাইলগুলি অনুলিপি করে?

— alex.p

আপনার সেটআপ সম্পর্কে সমস্ত তথ্যের সাথে একটি নতুন প্রশ্ন জিজ্ঞাসা করুন যাতে কেউ এর উত্তর দিতে পারে।

— লোগানফস্মিথ

Answer 2

এই উত্তরগুলির বেশিরভাগ অপ্রচলিত। @babel/preset-envএবং "@babel/preset-reactআপনার যা প্রয়োজন তা হল (জুলাই 2019 হিসাবে)।

Answer 3

ভিন্ন কারণ নিয়ে আমার একই সমস্যা ছিল:

আমি যে কোডটি লোড করার চেষ্টা করছিলাম সেটি প্যাকেজ ডিরেক্টরিের অধীনে ছিল না এবং প্যাকেজ ডিরেক্টরিটির বাইরে বাবেল ডিফল্ট হয় না।

আমি এটি আমদানি করা কোডটি সরিয়ে নিয়ে সমাধান করেছি, তবে সম্ভবত আমি বাবেল কনফিগারেশনে কিছু অন্তর্ভুক্তির বিবৃতিও ব্যবহার করতে পারতাম।

Comments

আপনি কি এই বিস্তারিত বলতে পারেন? আমার ফ্রন্টএন্ড কোডটি "প্যাকেজ ডিরেক্টরিের অধীনে" নয় এবং এটি দুর্দান্ত কাজ করে। আমার সার্ভার কোডটিতে "আমদানি" রয়েছে তবে ব্যাবেল-ক্লিমে সেগুলি সমাধান করছে না ...

— ফিলিপ

হুম, কী বিষয়ে বিস্তারিত বলবেন তা নিশ্চিত নন? বাবেল চলাচল করছিল না। আপনার বাবেল কনফিগারেশনের সমস্ত উত্সগুলি দেখার চেষ্টা করুন ...

— w00t

যে সমস্যাটি আমি সমাধান করার চেষ্টা করছি তা হ'ল আমার সার্ভার ফাইলগুলি বেশ কয়েকটি ফোল্ডারে অরগানাইজড রয়েছে: আমার কাছে সার্ভার.জেএস, তারপরে / এপিআই / ... স্টাফ রয়েছে ... যখন আমি স্মৃতি থেকে রান করি তখন প্রতিটি "আমদানি" বা "প্রয়োজনীয়" হয় এই ফাইলগুলিতে গতিময় সমাধান করা হচ্ছে। আমি যখন কমান্ড লাইন থেকে বাবেল চালাই, আমি কেবল একটি একক ফাইল আউটপুট করি, তবে আপেক্ষিক আমদানিগুলি সমাধান করি না, তাই আমি এটি আমার সার্ভার চালানোর জন্য ব্যবহার করতে পারি না ...

— ফিলিপ

Answer 4

প্রথমে আপনার নিম্নলিখিতগুলি নিশ্চিত করুন node modules:

npm i -D webpack babel-core babel-preset-es2015 babel-preset-stage-2 babel-loader

এর পরে, এটি আপনার ওয়েবপ্যাক কনফিগারেশন ফাইলে যুক্ত করুন ( webpack.config.js):

// webpack.config.js
...
module  :  {
  loaders  :  [
    {
      test    :  /\.js$/,
      loader  :  'babel',
      exclude :  /node_modules/,
      options :  {
        presets  :  [ 'es2015', 'stage-2' ] // stage-2 if required
      } 
    } 
  ]
}
...

তথ্যসূত্র:

• https://gist.github.com/Couto/6c6164c24ae031bff935
• https://github.com/babel/babel-loader/issues/214

শুভকামনা!

Answer 5

হিসাবে 2020, Jan:

পদক্ষেপ 1: ইনস্টল করুন Babel presets:

yarn add -D @babel/preset-env @babel/preset-react

পদক্ষেপ 2: একটি ফাইল তৈরি করুন: babelrc.jsএবং যুক্ত করুন presets:

module.exports = {
  // ...
  presets: ["@babel/preset-env", "@babel/preset-react"],
  // ...
}

পদক্ষেপ 3: - ইনস্টল করুন babel-loader:

yarn add -D babel-loader

পদক্ষেপ 4: - আপনার মধ্যে লোডার কনফিগারেশন যুক্ত করুন webpack.config.js:

{
//...
  module: [
    rules: [
      test: /\.(js|mjs|jsx|ts|tsx)$/,
      loader: require.resolve('babel-loader')
    ]
  ]
//...
}

শুভকামনা ...

Answer 6

npm install --save-dev babel-preset-node5

npm install --save-dev babel-preset-react

... এবং তারপরে .babelrcপ্রিসেটগুলি দিয়ে একটি তৈরি করুন :

{
  "presets": [
    "node5",
    "react"
  ]
}

... বাবেল 3.8.6এবং নোডের সাথে আমার জন্য খুব অনুরূপ সমস্যা সমাধান করেছেv5.10.1

https://www.npmjs.com/package/babel-preset-node5
https://www.npmjs.com/package/babel-preset-react

Answer 7

একই ত্রুটি, ভিন্ন কারণ:

ট্রান্সপ্লাইং আগে কাজ করেছিল এবং তারপরে হঠাৎ কাজ করা বন্ধ হয়ে যায়, কেবল ফাইলগুলি অনুলিপি করা হয়।

দেখা যাচ্ছে আমি এক .babelrcপর্যায়ে এটি খুললাম এবং উইন্ডোজ .txtফাইলের নামটিতে যুক্ত করার সিদ্ধান্ত নিয়েছে । এখন এটি .babelrc.txtবাবেল দ্বারা স্বীকৃত ছিল না। .txtপ্রত্যয় মুছে ফেলা যা স্থির।

Answer 8

আপনার .babelrc ঠিক করুন

{
  "presets": [
    "react",
    "ES2015"
  ]
}

Answer 9

2018 সালে:

আপনার যদি এখনও না থাকে তবে নিম্নলিখিত প্যাকেজগুলি ইনস্টল করুন:

npm install babel-loader babel-preset-react

webpack.config.js

{
    test: /\.jsx?$/,
    exclude: /node_modules/,
    use: [
      {
        loader: 'babel-loader',
        options: {
          presets: ['es2015','react']  // <--- !`react` must be part of presets!
        }
      }
    ],
  }

Answer 10

চূড়ান্ত সমাধান

আমি এই 3 দিন নষ্ট

import react from 'react' unexpected identifier

আমি সংশোধন webpack.config.jsএবং package.jsonফাইলগুলি চেষ্টা করেছিলাম , এবং এর .babelrcমাধ্যমে প্যাকেজগুলি সংযোজন , ইনস্টল ও আপডেট করার চেষ্টা npmকরেছি, আমি অনেকগুলি, বহু পৃষ্ঠা পরিদর্শন করেছি তবে কিছুই কার্যকর হয়নি।

---

কি কাজ? দুটি শব্দ: এনপিএম শুরু। সেটা ঠিক.

চালান

npm start 

একটি স্থানীয় সার্ভার আরম্ভ করার জন্য টার্মিনালে কমান্ড

...

(মনে রাখবেন এটি সরাসরি কাজ করবে না তবে সম্ভবত এনএমপি তে আপনি কিছু কাজ করার পরে কেবল কারণ এটি চেষ্টা করার আগে আমি এই ফাইলগুলির সমস্ত পরিবর্তন মুছে ফেলেছিলাম এবং এটি কাজ করেছিল, সুতরাং আপনি সত্যিকার অর্থে কাজ শেষ করার পরে, এটি আপনার শেষ হিসাবে বিবেচনা করুন) অবলম্বন )

---

আমি এই পরিষ্কার পৃষ্ঠায় তথ্যটি পেয়েছি । এটি পোলিশ ভাষায় তবে এটিতে গুগল অনুবাদ ব্যবহার করতে নির্দ্বিধায়।