将JS配置转为字符串时导入值解析异常的问题求助

尝试将JS配置转换为字符串时，处理导入值遇到问题。当前代码运行后输出带导入引用的字符串，期望直接显示变量的实际值。

现有代码 #

import { TEST } from "./config";

export default function App() {
  let configString = (() => {
    var configOptions = {
      message: TEST.Success
    };
  }).toString();

  configString = configString.slice(
    configString.indexOf("{") + 1,
    configString.lastIndexOf("}")
  );

  return <p>{configString}</p>;
}

当前输出 #

var configOptions = { message: _config.TEST.Success };

期望输出 #

var configOptions = { message: Success };

核心思路是先获取配置对象的实际值，再基于实际值构建目标字符串，而非直接将函数转为字符串（这种方式会保留变量引用而非实际值）。

方法1：利用JSON.stringify转换后调整格式 #

import { TEST } from "./config";

export default function App() {
  const configOptions = {
    message: TEST.Success
  };
  // 先用JSON.stringify获取值的字符串，再拼接成目标格式
  const configString = `var configOptions = ${JSON.stringify(configOptions)};`;

  return <p>{configString}</p>;
}

方法2：手动构建字符串 #

如果需要更自定义的格式，可以直接拼接变量的实际值：

import { TEST } from "./config";

export default function App() {
  const configString = `var configOptions = { message: ${TEST.Success} };`;

  return <p>{configString}</p>;
}

说明 #

原代码中使用Function.toString()的方式，本质是获取函数的源码字符串，而非执行函数后的值，所以会保留TEST.Success的引用路径。上述两种方法都是先拿到TEST.Success的实际值，再构建想要的字符串，就能得到期望的输出。

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