如何在Gatsby SSR中导入模块并转为内联脚本字符串？

问题背景 #

我在Gatsby的SSR文件中编写了以下代码，用于在页面头部插入优先执行的inline脚本：

const HeadComponents = [
  <script
    key={SESSION_SCRIPT_KEY}
    dangerouslySetInnerHTML={{
      __html: `(${sessionInit})()`,
    }}
  />,
];

export const onRenderBody = ({ setHeadComponents }, pluginOptions) => {
  setHeadComponents(HeadComponents);
};

export const onPreRenderHTML = ({
  getHeadComponents,
  replaceHeadComponents,
}) => {
  const headComponents = getHeadComponents();

  // 将session相关脚本移到头部最前
  const orderedComponents = headComponents.sort(item =>
    item.key === SESSION_SCRIPT_KEY ? -1 : 1,
  );

  replaceHeadComponents(orderedComponents);
};

需求是：导入外部模块（如import X from 'utils'），将其转为webpack处理后的字符串，嵌入首页头部的inline <script>标签，确保这段代码在Gatsby框架加载前优先运行。目前本地定义的sessionInit可直接转为字符串，但导入外部模块时，使用raw-loader或asset modules得到的是类似宏的无效内容，需要可行的解决办法。

可行解决方案 #

方案一：raw-loader 处理纯JS模块（无依赖场景） #

适用于没有外部依赖的工具模块，直接导出模块的编译后代码字符串。

1. 安装依赖：

npm install raw-loader --save-dev

2. 在gatsby-node.js中配置webpack规则，指定目标模块用raw-loader解析：

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    module: {
      rules: [
        {
          test: /utils\.js$/, // 匹配你的外部模块文件路径
          use: 'raw-loader',
        },
      ],
    },
  });
};

3. 在SSR文件中导入模块的字符串形式并嵌入脚本：

import sessionInitCode from './utils'; // 此时导入的是webpack编译后的代码字符串

const HeadComponents = [
  <script
    key={SESSION_SCRIPT_KEY}
    dangerouslySetInnerHTML={{ __html: sessionInitCode }}
  />,
];

// 保留原有的onRenderBody和onPreRenderHTML代码

方案二：独立打包脚本并读取内容（带依赖场景） #

如果外部模块有其他依赖，需要将整个依赖树打包成独立脚本，再读取内容嵌入inline标签。

1. 创建独立入口文件src/session-init.js，引入目标模块并执行：

import { initSession } from './utils';
initSession();

2. 在gatsby-node.js中添加打包逻辑，读取打包后的脚本内容并插入头部：

const fs = require('fs');
const path = require('path');
const { execSync } = require('child_process');

exports.onPreBootstrap = () => {
  // 用webpack-cli打包独立脚本到public目录
  execSync(
    'npx webpack --mode production --entry ./src/session-init.js --output-filename session-init.bundle.js --output-path ./public',
    { stdio: 'inherit' }
  );
};

exports.onRenderBody = ({ setHeadComponents }) => {
  // 读取打包后的脚本内容
  const scriptContent = fs.readFileSync(
    path.join(__dirname, 'public/session-init.bundle.js'),
    'utf8'
  );

  const HeadComponents = [
    <script
      key="session-init-script"
      dangerouslySetInnerHTML={{ __html: scriptContent }}
    />,
  ];

  setHeadComponents(HeadComponents);
};

// 保留原有的onPreRenderHTML排序逻辑

3. 在.gitignore中添加public/session-init.bundle.js，避免提交临时打包文件。

方案三：Babel插件简化处理（推荐） #

使用专门的Babel插件自动处理inline脚本的模块导入与编译。

1. 安装插件：

npm install babel-plugin-transform-react-jsx-inline-script --save-dev

2. 在项目根目录的babel.config.js中配置插件：

module.exports = {
  plugins: ['transform-react-jsx-inline-script'],
};

3. 在SSR文件中直接导入模块并使用inline属性：

import { initSession } from './utils';

const HeadComponents = [
  <script inline>{initSession.toString()}</script>,
];

// 保留原有的onRenderBody和onPreRenderHTML代码

该插件会自动将函数转换为webpack编译后的可执行代码，同时处理模块依赖。

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