如何将ReactJS应用程序（文件）编译成一个index.html文件？

Question

我正在利用Microsoft sharepoint静态网站中的ReactJS（JSX）。该网站无法编译JSX代码。结果，我需要将我的reactjs代码/程序包/应用程序转换成一个简单的文件，其中应包含所有代码和相关性作为CDN：index.html

我已按照以下步骤实现ReactJS（基于this Youtube video）

1. Download NodeJS

2. 安装create-react-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 Installation Instructions

   2.1）在shell中运行以下命令

   npm install --save-dev babel-core

   2.3）我不确定将以下javascript命令放在哪里

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

3. Followed Babel Alternative Installation Instructions

   3.1在shell中运行以下命令

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

   3.2在具有此内容的项目屋顶中创建了一个名为babel.config.js的配置文件

   const预设= [   [     “ @ babel / env”，     {       目标：{         边缘：“ 17”，         Firefox：“ 60”，         chrome：“ 67”，         Safari：“ 11.1”，       }，       useBuiltIns：“用法”，     }，   ]， ];

   module.exports = {预设};

3.3但是，以下命令不起作用

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

错误：

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

Answer 1

您正在使用create-react-app，yarn build不是您想要实现的目标？

Answer 2

您可以通过不使用命令行工具创建项目来实现。 尝试通过脚本标记包含来自CDN的react文件

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

您可能需要更改一些内容才能实现此目的。