如何在 html 页面中加载生产 create-react-app 脚本？答案

【问题标题】：How to load a production create-react-app script inside an html page?如何在 html 页面中加载生产 create-react-app 脚本？
【发布时间】：2019-12-12 08:31:44
【问题描述】：

我创建了一个 create-react-app 简单应用程序（作为一个库），并希望将其作为外部脚本加载到 HTML 页面中。

我用命令npx create-react-app my-lib创建了一个create-react-app
将my-lib/src/index.js 更改为：

在my-lib 目录中，我运行yarn build。这会生成以下生产文件：

创建了一个外部 HTML 文件来加载 my-lib 的生产版本。

我收到以下错误：

【问题讨论】：

我看到有两个块。 main 和 2.js。那么AssetsManager 类被打包在哪个块中呢？
@PrakashSharma AssetsManager 类在 src/App.js 文件中定义。而src/App.js文件位于main.[hash].chunk.js，如您所见here。
虽然，我们通过运行 - 通常 - npm run build 创建的可部署的构建版本并不适用于这种用例：const a = new AssetsManager()，你想通过什么来实现这样做？！
@SultanH。这不是真的。 uglify 不会更改属性名称。
@SultanH。我想开发一个可以通过回调函数调用的模式（这里是 my-lib）。我想把这个回调函数传递给另一个应用程序，但是我不想在npm包格式中使用。

标签： javascript reactjs create-react-app

【解决方案1】：

生产版本创建了 2 个 JS 文件，即 chunk.js 和 main.js，所以我们需要在 index.html 文件中导入这两个文件

在变量中加载反应组件并分配给窗口

在 index.html 中调用了相同的窗口变量

请试试这个方法

【讨论】：

@Punnet Bhandari，上面第五行的脚本是什么？ !function (1)...
@PabloDarde 这是我创建生产版本时在 index.html 中出现的，请参阅 pastebin.com/9ZVr0YEM
谢谢@Puneet Bhandari，这种方法对我有用。
@PabloDarde Great

【解决方案2】：

create-react-app 构建正在创建两个块。 main.js 和 2.js。 2.js 块包含供应商相关文件，main.js 包含您的应用程序代码。要运行应用程序，您需要在 2.js 文件中导入 html 文件中的两个捆绑包，并在 main.js 之前导入，因为运行您的应用程序代码需要供应商文件。

create-react-app 在构建后还会创建一个index.html 文件，其中包含正确的所有导入。因此，我建议仅使用该 index.html 文件并仅对该文件进行必要的更改。

【讨论】：

我以正确的顺序添加了这两个 js 文件，但我没有任何改变。
我建议使用由create-react-app 创建的index.html 文件并仅在该文件中进行必要的更改。