如何添加 javascript header 到 node js 构建 index.html

Question

所以我正在尝试将一个有效的 React 应用程序制作成一个 Twitch 扩展（我不需要任何 twitch 集成）。

让它与 Twitch 的 iframe 一起工作的唯一方法是在 html 文件中添加一个标签

<script src="https://extension-files.twitch.tv/helper/v1/twitch-ext.min.js"></script>

启动时调用 javascript 代码，使用 twitch-ext.min.js 文件中的内容

window.Twitch.ext.onAuthorized(function(auth) {
  console.log('The JWT that will be passed to the EBS is', auth.token);
  console.log('The channel ID is', auth.channelId);
});

我目前正在做的是运行 npm build 然后手动编辑生成的 index.html 和 main.xxxxx.js 将这些代码行包含在优化的缩小文件中。这显然看起来有点低效，我觉得必须有一种方法告诉节点在构建期间它应该包括这些行。那么我问的是可能的吗？

Answer 1

所以我从了解 Node.js 的人那里得到了答案。您所做的是编辑您的 React 应用程序应具有的 index.html 和 index.js 文件。

npm 运行 build 实际上使用这 2 个文件来生成缩小的构建文件，所以我只是添加了

<script src="https://extension-files.twitch.tv/helper/v1/twitch-ext.min.js"></script>

到index.html一个还有我的

window.Twitch.ext.onAuthorized()

调用 index.js 文件，一切正常。

如果您使用 npx create-react-app，您可以在您的 React 项目的 public 文件夹中找到 index.html。 index.js 在 src 文件夹中。

如何添加 javascript header 到 node js 构建 index.html

How to add javascript header to node js built index.html

javascript

build

node.js

npm

twitch