Файл Babel копируется без преобразования

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

"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

Выходной файл копируется вместо скомпилированного (я имею в виду, он такой же, как исходный файл).

Что мне здесь не хватает?

Ответ 1

Вавилон - это основа трансформации. До 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. Вы также можете включить версии браузера в свои цели, если вам нужна поддержка браузера.

Ответ 2

У меня была та же проблема с другой причиной:

Код, который я пытался загрузить, не находился под каталогом пакетов, и Babel не по умолчанию не транслирует вне каталога пакета.

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

Ответ 3

Сначала убедитесь, что у вас есть следующий 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
      } 
    } 
  ]
}
...

Литература:

Удачи!

Ответ 4

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

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

... и затем создав .babelrc с пресетами:

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

... разрешил очень похожую проблему для меня, с babel 3.8.6 и node v5.10.1

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

Ответ 5

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

Transpiling работал до этого, а затем внезапно переставал работать, файлы просто копировались как есть.

Оказывается, в какой-то момент я открыл .babelrc, и Windows решила добавить .txt в имя файла. Теперь, когда .babelrc.txt не был распознан babel. Удаление суффикса .txt исправлено.

Ответ 6

исправить ваш .babelrc

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

Ответ 7

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

Ответ 8

Окончательное решение

Я потратил 3 дня на это

import react from 'react' unexpected identifier

Я попытался изменить webpack.config.js и package.json и добавить .babelrc, установить и обновить пакеты через npm, я посетил много, много страниц, но ничего не помогло.

Что сработало? Два слова: начало npm. Это так.

запустить

npm start

команда в терминале запустить локальный сервер

...

(имейте в виду, что это может не сработать сразу, но, возможно, только после того, как вы поработаете над npm, потому что перед тем, как попробовать это, я удалил все изменения в этих файлах, и это сработало, поэтому после того, как вы действительно это сделаете, обработайте его как свой последний курорт)

Я нашел эту информацию на этой аккуратной странице. Это на польском языке, но не стесняйтесь использовать Google Translate на нем.

Ответ 9

Большинство из этих ответов устарели. @babel/preset-env и "@babel/preset-react - это то, что вам нужно (по состоянию на июль 2019 года).