बैबल फ़ाइल को रूपांतरित किए बिना कॉपी किया जाता है

Question

मेरे पास यह कोड है:

"use strict";

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

let proxy = httpProxy.createProxyServer({});

और मैंने npm के माध्यम से स्थापित babel-coreऔर babel-cliविश्व स्तर पर किया है । बिंदु यह है कि जब मैं अपने टर्मिनल पर इसके साथ संकलन करने का प्रयास करता हूं:

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

आउटपुट फ़ाइल संकलित होने के बजाय कॉपी हो जाती है (मेरा मतलब है, यह स्रोत फ़ाइल के समान है)।

मुझे यहां क्या समझ नहीं आ रहा है?

Comments

letपरिवर्तन होता है, varलेकिन importबयान बने रहते हैं

— रनवे

प्रतिक्रिया के नए संस्करणों के लिए, नए बेबल मॉड्यूल का उपयोग करें: stackoverflow.com/a/53927457/6665568 । इसमें बेहतर त्रुटि संदेश हैं और प्रतिक्रिया की नई सुविधाओं का समर्थन करता है।

— नटेश भाट

Answer 1

बैबल एक ट्रांसफॉर्मेशन फ्रेमवर्क है। पूर्व 6.x, इसने डिफ़ॉल्ट रूप से कुछ परिवर्तनों को सक्षम किया, लेकिन नोड संस्करणों के बढ़ते उपयोग के साथ जो मूल रूप से कई ईएस 6 सुविधाओं का समर्थन करते हैं, यह बहुत अधिक महत्वपूर्ण हो गया है कि चीजें कॉन्फ़िगर करने योग्य हों। डिफ़ॉल्ट रूप से, Babel 6.x कोई भी परिवर्तन नहीं करता है। आपको यह बताने की आवश्यकता है कि किन परिवर्तनों को चलाना है:

npm install babel-preset-env

और भाग खड़ा हुआ

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

या .babelrcयुक्त फ़ाइल बनाएँ

{
    "presets": [
        "env"
    ]
}

और इसे वैसे ही चलाएं जैसे आप पहले थे।

envइस मामले में एक पूर्व निर्धारित है जो मूल रूप से ES5 के लिए सभी मानक ES * व्यवहार को संकलित करने के लिए कहता है। यदि आप कुछ ईएस 6 का समर्थन करने वाले नोड संस्करणों का उपयोग कर रहे हैं, तो आप करने पर विचार कर सकते हैं

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

पूर्व निर्धारित करने के लिए केवल उन चीजों को संसाधित करें जो आपके नोड संस्करण द्वारा समर्थित नहीं हैं। यदि आपको ब्राउज़र समर्थन की आवश्यकता है तो आप अपने लक्ष्य में ब्राउज़र संस्करण भी शामिल कर सकते हैं।

Comments

यह उपयोगी है। उन्होंने इसे दस्तावेज़ीकरण में क्यों नहीं डाला? क्या विश्व स्तर पर बैबेल-प्रीसेट स्थापित करना सुरक्षित है?

— 17

@kidcapital डॉक्स इसे शामिल करते हैं, लेकिन केवल एक साइड नोट के रूप में ऐसा लगता है। मैंने यह जानने में बहुत समय बिताया कि कैसे बेबल 6.0 को ठीक से कॉन्फ़िगर किया जाए, जब इसे पहली बार रिलीज़ किया गया था।

— निक

इस पोस्ट के सार को PR # 72 प्रति सेटअप पृष्ठ पर एक सूचना बॉक्स के रूप में जोड़ा गया है । एक बहुत ही मामूली सुधार, लेकिन आप कहीं शुरू करना होगा! धन्यवाद लोगन।

— निक

विन्यास पर अधिवेशन के लिए इतना ... बॉक्स के बाहर बैबेल कुछ नहीं करता है - बस फाइलों की नकल करता है?

— अलेक्स .p

कृपया अपने सेटअप के बारे में सभी जानकारी के साथ एक नया प्रश्न पूछें ताकि कोई इसका उत्तर दे सके।

— loganfsmyth

Answer 2

इनमें से अधिकांश उत्तर अप्रचलित हैं। @babel/preset-envऔर "@babel/preset-reactक्या आप की जरूरत है (जुलाई 2019 तक)

Answer 3

मुझे एक अलग कारण के साथ एक ही समस्या थी:

जिस कोड को मैं लोड करने की कोशिश कर रहा था वह पैकेज डायरेक्टरी के तहत नहीं था, और बैबेल पैकेज डायरेक्टरी के बाहर ट्रांसपिलिंग के लिए डिफ़ॉल्ट नहीं है।

मैंने इसे आयातित कोड को स्थानांतरित करके हल किया, लेकिन शायद मैं बैबेल कॉन्फ़िगरेशन में कुछ समावेश बयान का उपयोग भी कर सकता था।

Comments

क्या आप इसे विस्तार से समझा सकते हैं? मेरा फ्रंटएंड कोड "पैकेज डायरेक्टरी के तहत" या तो नहीं है और यह ठीक काम करता है। मेरे सर्वर कोड में "इम्पोर्ट" है, लेकिन बबैल-क्ली उन लोगों को हल नहीं कर रहा है ...

— फिलिप

हम्म, यकीन नहीं है कि क्या करना है? बैबल ट्रांसप्लानिंग नहीं था। कोलाहल config के सभी अपने स्रोतों पर देखने का प्रयास करें ...

— w00t

जिस समस्या को मैं हल करने की कोशिश कर रहा हूं, वह यह है कि मेरी सर्वर फाइलें कई फ़ोल्डरों में orgnanized हैं: मेरे पास server.js हैं, फिर / एपीआई / ... सामान ... जब मैं मेमोरी से चलता हूं, तो प्रत्येक "आयात" या "आवश्यकता" होती है उन फ़ाइलों में गतिशील रूप से हल किया जा रहा है। जब मैं कमांड लाइन से बेबल चलाता हूं, तो मैं केवल एक फाइल को आउटपुट करता हूं, लेकिन सापेक्ष आयात को हल नहीं करता, इसलिए मैं अपने सर्वर को चलाने के लिए उपयोग नहीं कर सकता ...

— फिलिप

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 शुरू। ये सही है।

चलाएं

npm start 

स्थानीय सर्वर लॉन्च करने के लिए टर्मिनल में कमांड

...

(मन है कि यह सीधे काम नहीं कर सकता है, लेकिन शायद आपके द्वारा npm पर कुछ काम करने के बाद ही क्योंकि इससे पहले कि मैंने उन फ़ाइलों में सभी परिवर्तनों को हटा दिया था और इसने काम किया था, इसलिए आपके वास्तव में काम करने के बाद, इसे अपना अंतिम व्यवहार मानें सहारा )

---

मुझे यह जानकारी इस साफ पेज पर मिली । यह पोलिश में है लेकिन इस पर Google अनुवाद का उपयोग करने के लिए स्वतंत्र महसूस करें।