Как я могу скомпилировать приложение (файлы) ReactJS в один файл index.html?

Question

Я нахожусь в процессе использования ReactJS (JSX) на статическом веб-сайте Microsoft Sharepoint.Этот сайт не может скомпилировать код JSX.В результате мне нужно преобразовать код реагирования / пакет / приложение в один простой файл, который должен содержать весь код и зависимости в виде CDN: index.html

Я выполнил следующие шаги по реализации ReactJS(на основе этого видео на Youtube )

1. Загрузить NodeJS

2. Установить пакет create-Reaction-app:

   sudo npm i -g create-react-app

3. Создать приложение React

   create-react-app react-app

После заполнения моей заявки, мой файл /структура каталогов выглядит следующим образом:

Как мне скомпилировать все это приложение в один простой скомпилированный файл index.html, который я могу использовать влюбой браузер без node.js?

Я пробовал следующее:

1. Я скопировал и вставил свой код index.js в онлайн Babel , но этот инструмент не создает нужный мне файл index.html

2. Выполнено Инструкция по установке Babel

   2.1) Выполнить следующую команду в оболочке

   npm install --save-dev babel-core

   2.3) Я не уверен, куда поместить следующую команду javascript

   `require("babel-core").transform("code", options);`
   

3. Соблюдаются альтернативные инструкции по установке Babel

   3.1 Выполните следующие команды в оболочке

   npm install --save-dev @ babel / core @babel / cli @ babel / preset-env npm install --save @ babel / polyfill

   3.2 Создан файл конфигурации с именем babel.config.js в крыше проекта с этим содержимым

   const presets= [["@ babel / env", {target: {edge: "17", firefox: "60", chrome: "67", safari: "11.1",}, useBuiltIns: "using",},],];

   module.exports = {presets};

3.3 Однако следующая командане работает

./node_modules/.bin/babel src --out-dir lib

Ошибка:

-bash: ./node_modules/.bin/babel: No such file or directory

Answer 1

Этого можно добиться, не создавая проект из инструментов командной строки.Попробуйте включить файлы реакции из cdn с помощью тега сценария

https://reactjs.org/docs/add-react-to-a-website.html#step-2-add-the-script-tags

. Для достижения этой цели может потребоваться изменить несколько параметров.

Answer 2

Вы используете приложение create-реакции-приложение, а yarn build - это не то, чего вы хотите достичь?