Зачем Babel заменяет import на require?

Question

[chirsss]

Я новичок и хочу частично сделать функционал на сайте на React. При этом хочу разбить функционал на отдельные js файлы, т.е. использовать модули. В современном JavaScript это делается с помощью команд export / import (никакие доп.библиотеки вроде как не требуются).

Подключил react, babel и мой скрипт так:

<script src="/React/react.development.js" crossorigin></script>
<script src="/React/react-dom.development.js" crossorigin></script>
<script src="/React/babel.min.js"></script>
<script src="/app.js" type="text/babel"></script>

Далее, в моем скрипте app.js хочу импортировать функцию из модуля:

import {Top} from './top.js'; 

class App extends React.Component {
  render () {
    <Top />
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

Однако, babel преобразует команду import в require и возникает ошибка:
Uncaught ReferenceError: require is not defined
Как исправить ситуацию ? Что я делаю не так ?

Answer 1

[Павел Диденко]

На тостере пробовал поискать ответ? ответ <<<

Comments

[chirsss]

Там сказано: "Браузеры сами по себе не понимают модули".
Но на самом деле ведь, сейчас современные браузеры понимают ES6, а в нем уже есть модули модули https://learn.javascript.ru/modules-intro
Если убрать babel.min.js и написать, что скрипт type="module" - то всё прекрасно работает. Как я понимаю, сегодня для модулей не нужно никаких сборщиков - всё работает стандартными export и import. Но как сделать так, чтобы они работали и babael при этом тоже использовать ?

[Dymok]

chirsss, не все поддерживают https://caniuse.com/#search=es6%20import

[chirsss]

Ясно. Значит, babel правильно делает, что преобразовывает в require ?
Получается, что нужно всё-таки использовать webpack например ?

[Павел Диденко]

chirsss, если хотите писать современный фронт - webpack или какой-нибудь другой сборщик обязателен.

[chirsss]

Павел Диденко, Спасибо большое за ответы. Буду изучать webpack.