Bu koda sahibim:

"use strict";

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

let proxy = httpProxy.createProxyServer({});

ve ben yüklemiş babel-coreve babel-cliküresel NPM yoluyla. Önemli olan, bununla terminalimde derlemeye çalıştığım zamandır:

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

Çıktı dosyası derlenmek yerine kopyalanır (yani, kaynak dosya ile aynıdır).

Burada neyi özlüyorum?

Babel bir dönüşüm çerçevesidir. 6.x öncesi, varsayılan olarak belirli dönüşümleri etkinleştirdi, ancak birçok ES6 özelliğini yerel olarak destekleyen Node sürümlerinin artan kullanımı ile, şeylerin yapılandırılabilir olması çok daha önemli hale geldi. Varsayılan olarak, Babel 6.x herhangi bir dönüştürme gerçekleştirmez. Hangi dönüşümlerin çalıştırılacağını ona söylemelisiniz:

npm install babel-preset-env

ve koş

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

veya .babelrciçeren bir dosya oluşturun

{
    "presets": [
        "env"
    ]
}

ve daha önceki gibi çalıştır.

envbu durumda, temel olarak tüm standart ES * davranışını ES5'e derlemeyi söyleyen bir ön ayardır. Bazı ES6'yı destekleyen Düğüm sürümleri kullanıyorsanız, yapmayı düşünebilirsiniz.

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

ön ayara yalnızca Düğüm sürümünüz tarafından desteklenmeyen şeyleri işlemesini söylemek için. Tarayıcı desteğine ihtiyacınız varsa, hedeflerinize tarayıcı sürümlerini de dahil edebilirsiniz.

Bu cevapların çoğu geçerliliğini yitirmiştir. @babel/preset-envve "@babel/preset-reactihtiyacınız olan şey (Temmuz 2019 itibariyle).

Aynı sorunu farklı bir nedenle yaşadım:

Yüklemeye çalıştığım kod paket dizini altında değildi ve Babel varsayılan olarak paket dizininin dışına aktarım yapmıyor.

İçeri aktarılan kodu hareket ettirerek çözdüm, ancak belki de Babel yapılandırmasında bazı dahil etme ifadeleri de kullanabilirdim.

Öncelikle aşağıdakilere sahip olduğunuzdan emin olun node modules:

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

Sonra, bunu Webpack yapılandırma dosyanıza ekleyin ( webpack.config.js):

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

Referanslar:

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

İyi şanslar!

İtibariyle 2020, Jan:

ADIM 1: Şunları kurun Babel presets:

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

ADIM 2: Bir dosya oluşturun: babelrc.jsve şunları ekleyin presets:

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

ADIM 3: - Şunları kurun babel-loader:

yarn add -D babel-loader

ADIM 4: - Yükleyici yapılandırmasını aşağıdakilere ekleyin webpack.config.js:

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

İyi şanslar...

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

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

... ve sonra .babelrcön ayarlarla bir oluşturma :

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

... babel 3.8.6ve node ile benim için çok benzer bir sorunu çözdüv5.10.1

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

Aynı hata, farklı neden:

Transpiling daha önce işe yaradı ve sonra aniden çalışmayı bıraktı, dosyalar sadece olduğu gibi kopyalandı.

.babelrcBir noktada açtım ve Windows .txtdosya adına eklemeye karar verdi . Şimdi bu .babelrc.txtBabel tarafından tanınmadı. .txtSoneki kaldırmak bunu düzeltti.

.babelrc'nizi düzeltin

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

2018 yılında:

Henüz yüklemediyseniz aşağıdaki paketleri kurun:

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!
        }
      }
    ],
  }

Nihai çözüm

Bunun için 3 günümü boşa harcadım

import react from 'react' unexpected identifier

Değiştirmeyi webpack.config.jsve package.jsondosyaları dosyalamayı ve .babelrcpaket eklemeyi , yüklemeyi ve güncellemeyi npmdenedim, birçok sayfayı ziyaret ettim ama hiçbir şey işe yaramadı.

Ne işe yaradı? İki kelime: npm start. Doğru.

koş

npm start 

terminalde yerel bir sunucu başlatmak için komut

...

(Hemen işe yaramayabileceğini unutmayın, ancak belki de sadece npm üzerinde biraz çalıştıktan sonra çünkü bunu denemeden önce bu dosyalardaki tüm değişiklikleri sildim ve işe yaradı, bu yüzden gerçekten işiniz bittikten sonra bunu sonunuz olarak kabul edin çare )

Bu bilgiyi bu temiz sayfada buldum . Lehçe ama Google çeviri kullanmaktan çekinmeyin.