У меня есть такой код:

"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 - это фреймворк трансформации. До 6.x он позволял определенные преобразования по умолчанию, но с увеличением использования версий Node, которые изначально поддерживают многие функции 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" } }],
    ]
}

чтобы предустановка обрабатывала только те вещи, которые не поддерживаются вашей версией Node. Вы также можете включить версии браузера в свои цели, если вам нужна поддержка браузера.

Большинство этих ответов устарели. @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

Та же ошибка, другая причина:

Транспилирование работало раньше, а затем внезапно перестало работать, файлы просто копировались как есть.

Оказывается, .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.