React项目无index.html文件时如何引入并运行指定脚本

• 若使用Create React App创建项目，index.html默认存放于public目录下，无需在业务代码中处理，直接修改该文件的body标签内容插入所需脚本即可，这是最稳定的实现方式。
• 若使用Vite创建项目，index.html默认存放在项目根目录，直接修改该文件即可。

如果确实是无显式index.html的自定义构建项目，可按以下两种方案实现：

方案1：修改HTML生成插件配置 #

如果你的项目用了html-webpack-plugin这类自动生成HTML的构建插件，直接修改插件配置注入脚本即可，示例配置如下：

// webpack.config.js 插件配置片段
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  // 其他构建配置省略
  plugins: [
    new HtmlWebpackPlugin({
      templateContent: `
        <!DOCTYPE html>
        <html lang="en">
          <head>
            <meta charset="UTF-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1" />
            <title>React example</title>
            <style>
              html,body,#root {
                height: 100%;
                width: 100%;
              }
            </style>
          </head>
          <body>
            <div id="root">Loading React example&hellip;</div>
            <!-- 插入所需脚本 -->
            <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
            <script src="systemjs.config.js"></script>
            <script>
              System.import('./index.jsx').catch(err => console.error(err));
            </script>
          </body>
        </html>
      `
    })
  ]
}

方案2：运行时动态注入脚本 #

如果需要在React代码运行时注入，不要使用document.write，改用原生DOM API创建script标签插入body即可，在入口index.js中添加以下代码：

// index.js 入口顶部添加
const injectScript = (src, inlineCode) => {
  const script = document.createElement('script');
  src && (script.src = src);
  inlineCode && (script.textContent = inlineCode);
  document.body.appendChild(script);
}

// 注入外部脚本
injectScript('https://unpkg.com/systemjs@0.19.39/dist/system.src.js');
injectScript('systemjs.config.js');

// 等资源加载完成后执行内联脚本
window.addEventListener('load', () => {
  injectScript(null, `
    System.import('./index.jsx').catch(err => console.error(err));
  `);
});

注意：运行时注入需要注意脚本加载顺序，依赖前置脚本的代码需等前置脚本加载完成后再执行，可避免语法、语义报错。

内容的提问来源于stack exchange，提问作者Karina Shulan