В командной строке Babel не передаются операторы импорта - React

Question

У меня есть следующий файл JSX.

import React from "react";

export default class Code extends React.Component {
    render() {
        return <div></div>
    }
}

React.render(<Code />, document.getElementById('code'));

Я запускаю Babel из командной строки, используя следующее

babel --plugins transform-react-jsx app.jsx -d dist

Я получаю следующий вывод

import React from "react";
export default class Code extends React.Component {
  render() {
    return React.createElement("div", null);
  }

}
React.render(React.createElement(Code, null), document.getElementById('code'));

Это явно не работает в браузере, так как импорт и экспорт недопустимы. Какие настройки мне нужно указать, чтобы Babel трансформировал импорт es6?

Вот мой файл .babelrc

{
    "plugins": [
        [
            "transform-react-jsx",
            {
                "pragma": "dom" // default pragma is React.createElement
            },
        ]
    ]
}

Спасибо

Answer 1

Как насчет использования preset-react вместо этого, который также будет включать плагин transform-react-jsx.

1. Установить предустановленный модуль npm install --save-dev @babel/preset-react

2. Добавьте пресеты в ваш файл .babelrc, т.е.

   { "пресеты": ["@ babel / пресет-реагировать"] }

3. Запустите скрипт Babel babel app.jsx -d dist

Если вы не хотите добавлять файл .babelrc, просто запустите скрипт, как и после установки предустановленного модуля babel --presets @babel/preset-react app.jsx -d dist

Подробнее о preset-react здесь