Tôi có mã này:

"use strict";

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

let proxy = httpProxy.createProxyServer({});

và tôi đã cài đặt babel-corevà babel-clitoàn cầu thông qua npm. Vấn đề là khi tôi cố gắng biên dịch với điều này trên thiết bị đầu cuối của mình:

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

Tệp đầu ra được sao chép thay vì được biên dịch (ý tôi là, nó giống với tệp nguồn).

Tôi còn thiếu gì ở đây?

Babel là một khung chuyển đổi. Trước 6.x, nó cho phép một số biến đổi nhất định theo mặc định, nhưng với việc sử dụng ngày càng nhiều các phiên bản Node vốn hỗ trợ nhiều tính năng của ES6, điều quan trọng hơn là mọi thứ có thể cấu hình được. Theo mặc định, Babel 6.x không thực hiện bất kỳ phép biến đổi nào. Bạn cần cho nó biết những biến đổi nào để chạy:

npm install babel-preset-env

và chạy

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

hoặc tạo một .babelrctệp chứa

{
    "presets": [
        "env"
    ]
}

và chạy nó giống như bạn trước đây.

envtrong trường hợp này là một giá trị đặt trước về cơ bản có nghĩa là biên dịch tất cả các hành vi ES * tiêu chuẩn sang ES5. Nếu bạn đang sử dụng các phiên bản Node hỗ trợ một số ES6, bạn có thể muốn xem xét việc

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

để yêu cầu cài đặt trước chỉ xử lý những thứ không được phiên bản Node của bạn hỗ trợ. Bạn cũng có thể đưa các phiên bản trình duyệt vào mục tiêu của mình nếu bạn cần hỗ trợ trình duyệt.

Hầu hết những câu trả lời này đã lỗi thời. @babel/preset-envvà "@babel/preset-reactlà những gì bạn cần (kể từ tháng 7 năm 2019).

Tôi đã gặp vấn đề tương tự với một nguyên nhân khác:

Mã mà tôi đang cố tải không nằm trong thư mục gói và Babel không mặc định chuyển mã ra bên ngoài thư mục gói.

Tôi đã giải quyết nó bằng cách di chuyển mã đã nhập, nhưng có lẽ tôi cũng có thể sử dụng một số câu lệnh bao gồm trong cấu hình Babel.

Trước tiên, hãy đảm bảo bạn có những điều sau node modules:

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

Tiếp theo, thêm cái này vào tệp cấu hình Webpack của bạn ( webpack.config.js):

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

Người giới thiệu:

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

Chúc may mắn!

Kể từ 2020, Jan:

BƯỚC 1: Cài đặt Babel presets:

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

BƯỚC 2: Tạo tệp: babelrc.jsvà thêm presets:

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

BƯỚC 3: - Cài đặt babel-loader:

yarn add -D babel-loader

BƯỚC 4: - Thêm cấu hình bộ tải trong webpack.config.js:

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

Chúc may mắn...

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

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

... và sau đó tạo một .babelrcvới các giá trị đặt trước:

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

... đã giải quyết một vấn đề tương tự đối với tôi, với babel 3.8.6và nútv5.10.1

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

Cùng một lỗi, nguyên nhân khác nhau:

Việc vận chuyển đã hoạt động trước đó và sau đó đột nhiên ngừng hoạt động, với các tệp chỉ được sao chép nguyên trạng.

Hóa ra tôi đã mở nó .babelrcvào một thời điểm nào đó và Windows đã quyết định thêm .txtvào tên tệp. Giờ điều đó .babelrc.txtđã không được babel nhận ra. Loại bỏ .txthậu tố đã khắc phục điều đó.

sửa lỗi .babelrc của bạn

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

Trong năm 2018:

Cài đặt các gói sau nếu bạn chưa có:

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

Giải pháp tối hậu

Tôi đã lãng phí 3 ngày cho việc này

import react from 'react' unexpected identifier

Tôi đã thử sửa đổi webpack.config.jsvà package.jsoncác tệp, và thêm .babelrc, cài đặt và cập nhật các gói thông qua npm, tôi đã truy cập rất nhiều trang nhưng không có gì hoạt động.

Điều gì đã hoạt động? Hai từ: npm bắt đầu. Đúng rồi.

chạy

npm start 

lệnh trong thiết bị đầu cuối để khởi chạy máy chủ cục bộ

...

(lưu ý rằng nó có thể không hoạt động ngay lập tức nhưng có lẽ chỉ sau khi bạn thực hiện một số thao tác trên npm vì trước khi thử điều này, tôi đã xóa tất cả các thay đổi trong các tệp đó và nó hoạt động, vì vậy sau khi bạn thực sự hoàn thành, hãy coi nó như lần cuối cùng của bạn khu nghỉ mát )

Tôi tìm thấy thông tin đó trên trang gọn gàng này . Nó bằng tiếng Ba Lan nhưng hãy sử dụng Google dịch trên đó.