ฉันมีรหัสนี้:

"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

ไฟล์ผลลัพธ์จะถูกคัดลอกแทนที่จะคอมไพล์ (ฉันหมายถึงมันเหมือนกับไฟล์ต้นฉบับ)

ฉันพลาดอะไรไปที่นี่?

Babel เป็นกรอบการเปลี่ยนแปลง Pre-6.x เปิดใช้งานการแปลงบางอย่างตามค่าเริ่มต้น แต่ด้วยการใช้งานเวอร์ชันโหนดที่เพิ่มขึ้นซึ่งรองรับคุณสมบัติ ES6 จำนวนมากโดยกำเนิดสิ่งนี้มีความสำคัญมากกว่าที่จะกำหนดค่าสิ่งต่างๆได้ ตามค่าเริ่มต้น Babel 6.x จะไม่ทำการเปลี่ยนแปลงใด ๆ คุณต้องบอกว่าการเปลี่ยนแปลงใดที่จะเรียกใช้:

npm install babel-preset-env

และเรียกใช้

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

หรือสร้าง.babelrcไฟล์ที่มี

{
    "presets": [
        "env"
    ]
}

และเรียกใช้เหมือนที่คุณเคยทำมาก่อน

envในกรณีนี้คือค่าที่ตั้งไว้ล่วงหน้าซึ่งโดยพื้นฐานแล้วจะบอกว่ารวบรวมพฤติกรรม ES * มาตรฐานทั้งหมดเป็น ES5 หากคุณกำลังใช้ Node เวอร์ชันที่รองรับ ES6 บางรุ่นคุณอาจต้องการลองทำ

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

เพื่อบอกให้พรีเซ็ตประมวลผลเฉพาะสิ่งที่เวอร์ชันโหนดของคุณไม่รองรับเท่านั้น คุณยังสามารถรวมเวอร์ชันของเบราว์เซอร์ไว้ในเป้าหมายของคุณหากคุณต้องการการสนับสนุนเบราว์เซอร์

คำตอบเหล่านี้ส่วนใหญ่ล้าสมัย @babel/preset-envและ"@babel/preset-reactเป็นสิ่งที่คุณต้องการ (ณ เดือนกรกฎาคม 2019)

ฉันมีปัญหาเดียวกันกับสาเหตุอื่น:

รหัสที่ฉันพยายามโหลดไม่ได้อยู่ในไดเร็กทอรีแพ็กเกจและ Babel ไม่ได้เป็นค่าเริ่มต้นในการถ่ายเทออกนอกไดเร็กทอรีแพ็กเกจ

ฉันแก้ไขได้โดยการย้ายรหัสที่นำเข้า แต่บางทีฉันอาจใช้คำสั่งรวมบางส่วนในการกำหนดค่า Babel

ก่อนอื่นให้แน่ใจว่าคุณมีสิ่งต่อไปนี้node modules:

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

ถัดไปเพิ่มนี้เพื่อ Webpack ของคุณตั้งค่าไฟล์ ( 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

โชคดี!

ณ วันที่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')
    ]
  ]
//...
}

โชคดี...

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

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

... จากนั้นสร้าง.babelrcด้วยค่าที่ตั้งล่วงหน้า:

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

... แก้ไขปัญหาที่คล้ายกันมากสำหรับฉันกับ babel 3.8.6และ nodev5.10.1

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

ข้อผิดพลาดเดียวกันสาเหตุต่างกัน:

Transpiling ทำงานมาก่อนแล้วหยุดทำงานกะทันหันโดยไฟล์จะถูกคัดลอกตามที่เป็นอยู่

ปรากฎว่าฉันเปิด.babelrcในบางจุดและ Windows ก็ตัดสินใจที่จะต่อท้าย.txtชื่อไฟล์ ตอนนี้บาเบล.babelrc.txtไม่รู้จัก การลบ.txtคำต่อท้ายคงที่

แก้ไข. babelrc ของคุณ

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

ในปี 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!
        }
      }
    ],
  }

ทางออกที่ดีที่สุด

ฉันเสียเวลา 3 วันกับเรื่องนี้

import react from 'react' unexpected identifier

ฉันพยายามแก้ไขwebpack.config.jsและpackage.jsonไฟล์และเพิ่ม.babelrcติดตั้งและอัปเดตแพ็คเกจผ่านnpmฉันได้เยี่ยมชมหลายหน้าหลายหน้า แต่ก็ไม่ได้ผล

ทำงานอะไร? สองคำ: npm start ถูกตัอง.

เรียกใช้

npm start 

คำสั่งในเทอร์มินัลเพื่อเปิดเซิร์ฟเวอร์ภายใน

...

(โปรดทราบว่ามันอาจไม่ได้ผลในทันที แต่อาจเป็นเพียงหลังจากที่คุณทำงานบางอย่างใน npm เพราะก่อนที่จะลองใช้ฉันได้ลบการเปลี่ยนแปลงทั้งหมดในไฟล์เหล่านั้นและใช้งานได้ดังนั้นหลังจากคุณทำเสร็จแล้วให้ถือว่าเป็นครั้งสุดท้าย รีสอร์ท )

ผมพบว่าข้อมูลในหน้านี้เรียบร้อย เป็นภาษาโปแลนด์ แต่อย่าลังเลที่จะใช้ Google แปลภาษา