Как подключить babel к html

Добавляем React на сайт

These docs are old and won’t be updated. Go to react.dev for the new React docs.

See Add React to an Existing Project for the recommended ways to add React.

Используйте React в том объёме, в котором вам хочется.

Для внедрения React не надо ничего переписывать. Его можно использовать как для маленькой кнопки, так и для целого приложения. Возможно, вы захотите немного «оживить» вашу страницу. React-компоненты подходят для этого как нельзя лучше.

Большинство сайтов в Интернете является обычными HTML-страницами. Даже если ваш сайт не относится к одностраничным приложениям, вы можете добавить на него React, написав всего несколько строк кода без каких-либо инструментов сборки. В зависимости от целей, можно постепенно перенести на React весь сайт или переписать всего несколько виджетов.

• Добавляем React за одну минуту
• Необязательно: Используем React с JSX (без каких-либо бандлеров!)

Добавляем React за одну минуту

В этом разделе вы научитесь добавлять React на существующую HTML-страницу. Вы можете практиковаться на своём собственном сайте или создать для этого пустой HTML-файл.

Мы не будем пользоваться сложными инструментами сборки или что-то устанавливать. Всё, что вам нужно — это доступ к Интернету и минута свободного времени.

Шаг 1: Добавляем DOM-контейнер в HTML

Для начала, откройте HTML-файл страницы, которую хотите отредактировать. Добавьте пустой тег в месте, где вы хотите отобразить что-нибудь с помощью React. Например:

 div id="like_button_container">div> 

Затем назначьте созданному уникальный атрибут id . Это позволит впоследствии найти тег из JavaScript-кода и отобразить React-компоненты внутри него.

Совет

«Контейнер» можно поместить где угодно внутри тега . Вы можете создать любое количество независимых DOM-контейнеров на одной странице. Эти контейнеры принято оставлять пустыми, так как React в любом случае заменяет всё их содержимое.

Шаг 2: Добавляем script-теги

Теперь добавьте три -тега перед закрывающим тегом :

     script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin> script> script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin> script>  script src="like_button.js"> script> body>

Первые два тега загружают React. Третий тег загружает код вашего собственного компонента.

Шаг 3: Создаём React-компонент

Создайте файл с именем like_button.js рядом с вашим HTML-файлом.

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

Совет

В данном коде создаётся React-компонент с именем LikeButton . Не беспокойтесь, если что-то кажется вам непонятным — мы подробно разберём принципы разработки на React позже, в нашем практическом руководстве и во введении в основные понятия. Пока же мы просто посмотрим, как это выглядит на экране.

Добавьте ещё 3 строки в конец файла like_button.js , после стартового кода:

// . стартовый код . const domContainer = document.querySelector('#like_button_container');const root = ReactDOM.createRoot(domContainer);root.render(e(LikeButton));

Эти три строки кода ищут элемент , который мы добавили в HTML на первом шаге, а затем отображают React-компонент с кнопкой «Нравится» внутри него.

Вот и всё! Вы только что добавили свой первый React-компонент на страницу.

Перейдите к следующим разделам, если хотите узнать о других способах добавить React.

Совет: Повторное использование компонентов

Зачастую, вам может понадобиться отобразить React-компонент в нескольких местах одной и той же HTML-страницы. Вот как можно показать сразу три кнопки «Нравится» с разными данными:

Примечание

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

Совет: Минификация JavaScript для продакшена

Публикуя ваш сайт на продакшен, имейте в виду, что несжатый JavaScript значительно замедляет страницу для ваших пользователей.

Если вы уже минифицируете свои скрипты, то не забудьте подготовить к продакшену сам React. Для этого поменяйте окончания ссылок на React на production.min.js :

script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin> script> script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin> script>

Если же вы не настроили минификацию для ваших скриптов, то вот один из вариантов, как это сделать.

Необязательно: Используем React с JSX

В предыдущих примерах мы не выходили за рамки обычных браузерных возможностей. В частности, мы указываем, что React должен выводить на экран, просто вызывая JavaScript-функцию:

const e = React.createElement; // Отобразить с текстом «Нравится» return e( 'button',  onClick: () => this.setState( liked: true >) >, 'Нравится' );

Однако, React позволяет использовать специальный синтаксис, называющийся JSX:

// Отобразить с текстом «Нравится» return ( button onClick=() => this.setState( liked: true >)>> Нравится button> );

Эти два примера делают одно и то же. Несмотря на то, что JSX является совершенно необязательным, многие разработчики считают его удобным для разработки UI — как с React, так и с другими библиотеками.

Вы можете попробовать JSX в этом онлайн-конвертере.

Быстрый старт с JSX

Чтобы быстро попробовать JSX, добавьте такой -тег на страницу:

script src="https://unpkg.com/babel-standalone@6/babel.min.js"> script>

Теперь синтаксис JSX доступен внутри каждого -тега, у которого есть атрибут type=»text/babel» . Скачайте пример HTML-кода с JSX, чтобы поэкспериментировать.

Такой подход удобен для обучения или создания быстрых демо, но следует помнить, что работа сайта при этом сильно замедляется. Поэтому для продакшена JSX лучше добавить по-другому. Если вам интересно попробовать, удалите добавленный ранее -тег и все атрибуты type=»text/babel» . Вместо них мы будем пользоваться препроцессором JSX, который автоматически трансформирует весь код внутри -тегов.

Добавляем JSX в проект

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

С помощью терминала перейдите в директорию вашего проекта и запустите следующие команды:

1. Шаг 1: Запустите команду npm init -y (если появляются ошибки, попробуйте этот способ)
2. Шаг 2: Запустите команду npm install babel-cli@6 babel-preset-react-app@3

Совет

Мы используем npm только для установки препроцессора JSX. React и код приложения всё ещё остаются в -тегах.

Поздравляем! Вы только что добавили в ваш проект поддержку JSX, готовую к продакшену.

Запускаем препроцессор JSX

Создайте директорию с названием src и наберите в терминале следующую команду:

npx babel --watch src --out-dir . --presets react-app/prod

Примечание

npx не является опечаткой. Это инструмент запуска пакетов, появившийся в npm версии 5.2+.

Если у вас появляется сообщение об ошибке, похожее на «You have mistakenly installed the babel package», то это означает, что вам нужно пройти предыдущий шаг, а затем повторить запуск команды.

Дожидаться завершения работы команды не нужно — она работает в режиме наблюдения за изменениями в JSX-коде.

Попробуйте создать файл с названием src/like_button.js и вставить в него этот стартовый JSX-код. Препроцессор автоматически трансформирует новый код в чистый JavaScript, пригодный для выполнения в браузере, и сохранит его в новый файл like_button.js . При редактировании JSX-кода в существующих файлах трансформация также происходит автоматически.

Кроме препроцессинга JSX, вы в качестве бонуса получаете синтаксические новинки JavaScript, такие как классы, без головной боли с их браузерной поддержкой. Всё это доступно благодаря использованию инструмента под названием Babel, информацию о котором вы можете узнать из его документации.

Если вы неплохо разбираетесь в инструментах сборки и хотите создавать приложения на React с их помощью, обратитесь к следующему разделу, где описаны некоторые из наиболее популярных способов. Если нет — не беспокойтесь, уже знакомые нам script-теги ничуть не хуже!

Как правильно подключить babel?

но при этом получаю

если же пишу: type=»text/jsx» src=»https://qna.habr.com/q/js/app.js»
то получаю пустую страницу (хотя и без ошибок)

• Вопрос задан более трёх лет назад
• 1606 просмотров

4 комментария

Оценить 4 комментария

@babel/standalone

@babel/standalone provides a standalone build of Babel for use in browsers and other non-Node.js environments.

When (not) to use @babel/standalone​

If you’re using Babel in production, you should normally not use @babel/standalone . Instead, you should use a build system running on Node.js, such as Webpack, Rollup, or Parcel, to transpile your JS ahead of time.

However, there are some valid use cases for @babel/standalone:

• It provides an easy, convenient way to prototype with Babel. Using @babel/standalone , you can get started using Babel with just a simple script tag in your HTML.
• Sites that compile user-provided JavaScript in real-time, like JSFiddle, JS Bin, the REPL on the Babel site, JSitor, etc.
• Apps that embed a JavaScript engine such as V8 directly, and want to use Babel for compilation
• Apps that want to use JavaScript as a scripting language for extending the app itself, including all the goodies that modern ES provides.
• Other non-Node.js environments (ReactJS.NET, ruby-babel-transpiler, php-babel-transpiler, etc).

Installation​

There are several ways to get a copy of @babel/standalone . Pick whichever one you like:

Use it via UNPKG. This is a simple way to embed it on a webpage without having to do any other setup.

script src="https://unpkg.com/@babel/standalone/babel.min.js"> script> 

Как подключить babel к html

В прошлых темах для компиляции JSX в полноценный JavaScript в React.js на веб-страницу подключался компилятор Babel, который динамически при запуске веб-страницы выполнял компиляцию. Но существует и другой способ компиляции JSX в JavaScript — статическая компиляция, при которой мы явно создаем код на JavaScript.

Так, продолжим работу с проектом из прошлой темы (или создадим новый). В этом проекте у нас есть файл index.jsx , который содержит код на JSX:

const rootNode = document.getElementById("app"); // элемент для рендеринга приложения React // получаем корневой элемент const root = ReactDOM.createRoot(rootNode); // рендеринг в корневой элемент root.render( 
Hello React
, // элемент, который мы хотим создать );

И также есть html-страница index.html :

Стоит отметить, что в данном случае уже не подключается компилятор Babel как отдельный файл, более того сам файл приложения называется index.js , а не index.jsx . Хотя у нас определен именно файл index.jsx.

Далее добавим в папку проекта новый файл, который назовем package.json и в котором определим следующий код:

< "name": "helloapp", "version": "1.0.0", "devDependencies": < "@babel/cli": "^7.17.0", "@babel/core": "^7.17.0", "@babel/preset-react": "^7.16.0" >, "babel": < "presets": [ "@babel/preset-react" ] >>

В секции devDependencies определены зависимости для компилятора Babel. А секция «babel» определяет пресеты — наборы плагинов, которые используются для работы с React.

Далее установим эти пакеты. И для этого перейдем в командной строке/терминале к папке проекта и выполним следующую команду

npm install

Итак, у нас есть файл index.jsx с кодом JSX, теперь скомпилируем его в файл index.js. Для этого выполним следующую команду:

npx babel index.jsx --out-file index.js

Команда npx babel позволяет определить местоположение скриптов babel в рамках проекта (вместо этой команды также можно использовать относительный путь к babel — .\node_modules\.bin\babel ).

В данном случае компилятору babel передается компилируемый файл — index.jsx , а после параметра —out-file указывается выходной файл. Более подробно про параметры компиляции можно прочитать на официальной странице по babel-cli. И после выполнения команды в папке проекта окажется файл index.js, который мы можем использовать.

В качестве сервера опять же возьмем определенное в прошлой теме приложение node.js в файле app.js :

const http = require("http"); const fs = require("fs"); http.createServer(function(request, response) < let filePath = "index.html"; if(request.url !== "/")< // получаем путь после слеша filePath = request.url.substring(1); >fs.readFile(filePath, function(error, data) < if(error)< response.statusCode = 404; response.end("Resourse not found!"); >else < response.end(data); >>); >).listen(3000, function()< console.log("Server started at 3000"); >);

Теперь, как и в прошлой теме можно запустить проект на выполнение с помощью команды node app.js , и в браузере мы увидим ту же страницу:

Чтобы не запускать при запуске две команды (одна для компиляции файла javascript и другая для запуска сервера), определим скрипт в файле package.json , изменив код файла следующим образом:

< "name": "helloapp", "version": "1.0.0", "scripts": < "start": "npx babel index.jsx --out-file index.js && node app.js" >, "devDependencies": < "@babel/cli": "^7.17.0", "@babel/core": "^7.17.0", "@babel/preset-react": "^7.16.0" >, "babel": < "presets": [ "@babel/preset-react" ] >>

Здесь в секции scripts определена команда start , которая позволяет последовательно запустить обе команды и сразу скомпилировать файл javascrript и запустить сервер. Теперь нам достаточно выполнить в командной строке/консоли команду npm start :

Если мы хотим, чтобы при этом автоматически открывался браузер с запущенной страницей, то на Windows для этого можно добавить команду «start http://localhost:3000/»:

"scripts": < "start": "npx babel index.jsx --out-file index.js && start http://localhost:3000/ && node app.js" >,