File Babel disalin tanpa diubah

106

Saya memiliki kode ini:

"use strict";

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

let proxy = httpProxy.createProxyServer({});

dan saya telah menginstal babel-coredan babel-clisecara global melalui npm. Intinya adalah ketika saya mencoba mengkompilasi dengan ini di terminal saya:

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

File output disalin, bukan dikompilasi (maksud saya, itu sama dengan file sumber).

Apa yang kulewatkan di sini?

Raul Vallespin
sumber
apakah letberubah vartetapi importpernyataannya tetap?
runspired
Untuk versi react yang lebih baru, gunakan modul babel baru: stackoverflow.com/a/53927457/6665568 . Ini memiliki pesan kesalahan yang lebih baik dan mendukung fitur baru bereaksi.
Natesh bhat

Jawaban:

165

Babel adalah kerangka transformasi. Pre-6.x, ini mengaktifkan transformasi tertentu secara default, tetapi dengan peningkatan penggunaan versi Node yang secara native mendukung banyak fitur ES6, menjadi jauh lebih penting bahwa semuanya dapat dikonfigurasi. Secara default, Babel 6.x tidak melakukan transformasi apa pun. Anda perlu memberi tahu transformasi apa yang harus dijalankan:

npm install babel-preset-env

dan lari

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

atau buat .babelrcfile yang berisi

{
    "presets": [
        "env"
    ]
}

dan menjalankannya seperti sebelumnya.

envdalam hal ini adalah preset yang pada dasarnya mengatakan untuk mengkompilasi semua perilaku ES * standar ke ES5. Jika Anda menggunakan versi Node yang mendukung beberapa ES6, Anda mungkin ingin mempertimbangkan untuk melakukannya

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

untuk memberi tahu preset agar hanya memproses hal-hal yang tidak didukung oleh versi Node Anda. Anda juga dapat menyertakan versi browser di target Anda jika Anda membutuhkan dukungan browser.

loganfsmyth
sumber
15
ini berguna. mengapa mereka tidak memasukkan ini ke dalam dokumentasi? apakah aman memasang babel-preset secara global?
kidcapital
@kidcapital Dokumen memang menyertakan ini, tetapi tampaknya hanya sebagai catatan tambahan. Saya menghabiskan banyak waktu mencoba mencari cara untuk mendapatkan kembali babel 6.0 yang dikonfigurasi dengan benar ketika pertama kali dirilis.
torehan
Inti dari posting ini telah ditambahkan sebagai kotak info di halaman Setup per PR # 72 . Peningkatan yang sangat kecil, tetapi Anda harus mulai dari suatu tempat! Terima kasih Logan.
torehan
7
Begitu banyak untuk konvensi atas konfigurasi ... jadi di luar kotak Babel tidak melakukan apa-apa - hanya menyalin file?
alex.p
Silakan ajukan pertanyaan baru dengan semua info tentang penyiapan Anda sehingga seseorang dapat menjawabnya.
loganfsmyth
5

Sebagian besar jawaban ini sudah usang. @babel/preset-envdan "@babel/preset-reactapa yang Anda butuhkan (per Juli 2019).

mmla
sumber
3

Saya memiliki masalah yang sama dengan penyebab yang berbeda:

Kode yang saya coba muat tidak ada di direktori paket, dan Babel tidak default untuk transpiling di luar direktori paket.

Saya menyelesaikannya dengan memindahkan kode yang diimpor, tetapi mungkin saya juga bisa menggunakan beberapa pernyataan inklusi dalam konfigurasi Babel.

w00t
sumber
Bisakah Anda menjelaskannya? kode frontend saya juga tidak "di bawah direktori paket" dan berfungsi dengan baik. Kode server saya berisi "impor" tetapi babel-cli tidak menyelesaikannya ...
Philippe
Hmm, tidak yakin harus menjelaskan lebih lanjut? Babel tidak transparan. Coba lihat semua sumber konfigurasi Babel Anda…
w00t
masalah yang saya coba selesaikan adalah file server saya diatur dalam beberapa folder: Saya memiliki server.js, lalu / api / ... barang ... Ketika saya menjalankan dari memori, masing-masing "impor" atau "memerlukan" di file tersebut diselesaikan secara dinamis. Ketika saya menjalankan babel dari baris perintah, saya hanya mengeluarkan satu file, tetapi tidak menyelesaikan impor relatif, jadi saya tidak dapat menggunakannya untuk menjalankan server saya ...
Philippe
3

Pertama, pastikan Anda memiliki yang berikut node modules:

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

Selanjutnya, tambahkan ini ke file konfigurasi Webpack Anda ( webpack.config.js):

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

Referensi:

Semoga berhasil!

Akash
sumber
2

Sejak 2020, Jan:

LANGKAH 1: Instal Babel presets:

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

LANGKAH 2: Buat file: babelrc.jsdan tambahkan presets:

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

LANGKAH 3: - Instal babel-loader:

yarn add -D babel-loader

LANGKAH 4: - Tambahkan konfigurasi pemuat di webpack.config.js:

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

Semoga berhasil...

Akash
sumber
1

Kesalahan yang sama, penyebab berbeda:

Transpiling telah bekerja sebelumnya dan kemudian tiba-tiba berhenti bekerja, dengan file disalin apa adanya.

Ternyata saya membuka .babelrcdi beberapa titik dan Windows memutuskan untuk menambahkan .txtnama file. Sekarang .babelrc.txtitu tidak dikenali oleh babel. Menghapus .txtsufiks memperbaikinya.

robro
sumber
0

perbaiki .babelrc Anda

{
  "presets": [
    "react",
    "ES2015"
  ]
}
OSP
sumber
0

Di tahun 2018:

Instal paket berikut jika Anda belum melakukannya:

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

Solusi terbaik

Saya menyia-nyiakan 3 hari untuk ini

import react from 'react' unexpected identifier

Saya mencoba memodifikasi webpack.config.jsdan package.jsonfile, dan menambahkan .babelrc, menginstal & memperbarui paket melalui npm, saya telah mengunjungi banyak halaman tetapi tidak ada yang berhasil.


Apa yang berhasil? Dua kata: mulai npm. Betul sekali.

jalankan

npm start 

perintah di terminal untuk meluncurkan server lokal

...

(ingat bahwa ini mungkin tidak langsung berfungsi tetapi mungkin hanya setelah Anda melakukan beberapa pekerjaan pada npm karena sebelum mencoba ini saya telah menghapus semua perubahan dalam file-file itu dan berhasil, jadi setelah Anda benar-benar selesai, perlakukan itu sebagai yang terakhir resor )


Saya menemukan info itu di halaman yang rapi ini . Ini dalam bahasa Polandia tetapi jangan ragu untuk menggunakan terjemahan Google di atasnya.

Aduku
sumber