Всё дело в области видимости переменных. Обычный
<script></script> работает в контексте глобального объекта
window, ровно как и содержимое аттрибута
onClick внутри HTML-тегов.
В свою очередь, скрипты
<script type="text/babel" ></script>, которые в дальнейшем обрабатываются браузерным препроцессором
babel/browser.js, помещаются в иную область видимости, что и приводит к ошибке
starter() is not defined
Исправить ситуацию в данном случае просто — нужно привязать обработчик
onclick к кнопке не с помощью аттрибутов тега, а из тела babel-скрипта:
<!DOCTYPE html>
<html>
<head>
<script type="text/babel" >
'use strict';
var starter = function (){ alert("It works!") }
document.getElementById("btn").onclick = starter;
</script>
</head>
<body>
<button id="btn">start</button>
<script src="https://js.cx/babel-core/browser.min.js"></script>
</body>
</html>
Ну а в целом, браузерные препроцессоры имеют ряд недостатков и неудобств в использовании, особенно, когда дело доходит до продакшна. Именно поэтому браузерная версия препроцессора Babel более недоступна на официальном
сайте, где указано, что babel-browser
has been removed.
Такая же участь постигла браузерный JSXTransformer для обработки синтаксиса JSX в React.js
И для первого, и для второго случаев теперь рекомендуется использовать Babel, как модуль одной из
систем сборки проектов, будь то Gulp, Grunt, Webpack или что-либо еще. Отчасти обусловлено это тем, что современный ES2015 имеет множество фич и плагинов, которые Вы врядли будете в полном объёме использовать в своём проекте, а в рамках систем сборки необходимый набор инструментов гибко настраивается в
babelrc (например, если из всех прелестей нового EcmaScript нам нужны только стрелочные функции, нужно подключить только плагин
transform-es2015-arrow-functions).
При этом конфигурация файла
.babelrc будет выглядеть так:
{
"plugins": ["transform-es2015-arrow-functions"]
}
