Babel в браузере через require

@andyj · Регистрация: 16.03.2017

Студворк — интернет-сервис помощи студентам

Добрый день, подскажите плииз.

Хочу попрбовать запустить Babel прямо в браузере.
Нашел исходники в js, который можно подгрузить прямо в браузер (1.5 мб сжатых и 2.8 без min)

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

Но все примеры выглядят примерно так:

JavaScript
1
2
3
4
5
6
7
8
require("@babel/parser").parse("code", {
  sourceType: "module",
 
  plugins: [
    "jsx",
    "flow"
  ]
});

Конечно выдает ошибку на require (в Ноде подобное работает)

Как подобное использовать в браузере??? Какую-то библиотеку надо подгрузить?

Изучил (примерно) babel.js - там все функции получаются через объект export, может можно напрямую через него искать функции?

@shvyrevvg · 07.08.2019, 07:36

andyj, странная затея, но https://requirejs.org/

@j2FunOnly · 07.08.2019, 08:07

andyj, а что вы хотите сделать?

PHP/HTML
1
2
3
4
5
6
7
8
<div id="app"></div>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script type="text/babel">
  const App = props => <h1>Hello React with Babel</h1>;
  ReactDOM.render(<App />, document.querySelector('#app'));
</script>

@andyj · 07.08.2019, 21:51 **[ТС]**

Сообщение от shvyrevvg

странная затея, но https://requirejs.org/

Спасибо попробую

Сообщение от j2FunOnly

а что вы хотите сделать?

Идея еще четко не сформулировалась! ))

Хочу на стороне клиента попытаться менять исходники. Нечто вроде "редактора кода" сделать с возвращением результата на сервер. А для этого нужен полноценный парсер JS с возможностью менять код. Попробовал на Ноде - там есть команда Parser в составе Бабел. На выходе получаю "дерево команд/кода" , по которому могу пробежаться циклом и подменить ветки на свои. После чего могу compille это дерево обратно в код. Но так и не понял как к этим командам добраться в браузере. Хотя они ТОЧНО есть в этих исходниках (проверил). Пробовал добраться к парсеру/компилятору через создание modules, exports - не получилось... может require даст доступ... попробую.

Когда-то в Ноде так массово вырезал все упоминания определенных объектов из исходников при "упаковке" (самописные логеры, console.log). причем вместе с "начинкой" вырезал:

JavaScript
1
console.log('текущее время: ', new Date().getTime()) // =>> на выходе пустая строка

. Теперь хочу для начала попробовать ТОЖЕ сделать в браузере... а потом посмотрим где еще можно использовать...

Пока успешно запустил (в браузере) команду Babel.transform. В нее можно подключить функцию трансформации (плагином) и массово пробежаться по коду подменяя один код другим по моей логике. Далеко не то что я хотел, но уже хоть убедился что оно РАБОТАЕТ и в браузере... (увы это дает пока только "линейную" логику)

@stanislavj · 08.08.2019, 16:34

andyj, https://babeljs.io/en/setup/#installation
читать п.2 первый абзац и п.3 соответственно как использовать в браузере

@andyj · 08.08.2019, 18:18 **[ТС]**

Сообщение от stanislavj

читать п.2 первый абзац и п.3 соответственно как использовать в браузере

Compiling in the browser has a fairly limited use case, so if you are working on a production site you should be precompiling your scripts server-side. See setup build systems for more information.

Увы, похоже там куча ограничений... Но кое-что получилось! Успешно подменил название одной функции, предварительно через Babel.transform получив ast, вручную подменив в ast одно из названий функции(грубым перебором), а потом скомпилировал через Babel.transformFromAst()...

До этого пробовал через "плагины" для трансформа, но там похоже сложные условия тяжело ставить. (например если переменная встречается больше 5 раз, то заменить ее на более короткую)

Еще немного поиграюсь и если не получится, сделаю на сервере через ajax парсер/компилятор - потери скорости на веб-передаче AST/code компенсируются скоростью подзагрузки 1.5-3 мб-байтного js-скрипта babel.js

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .
SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 31.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .

@shvyrevvg 1786 / 1036 / 445 Регистрация: 12.05.2016 Сообщений: 2,550
	07.08.2019, 07:36
	andyj, странная затея, но https://requirejs.org/ 1

@stanislavj 30 / 26 / 3 Регистрация: 01.09.2018 Сообщений: 141
	08.08.2019, 16:34
	andyj, https://babeljs.io/en/setup/#installation читать п.2 первый абзац и п.3 соответственно как использовать в браузере 0

Опции темы