基于节点变量的 React 导入答案

【问题标题】：React import based on node variable基于节点变量的 React 导入
【发布时间】：2018-03-23 03:37:37
【问题描述】：

我正在尝试解决这个问题，但还没有发现任何有用的东西。

想法是在某些组件或文件中我需要根据节点变量导入特定文件。

将运行的一些示例脚本包括： USER=test yarn run build //or USER=test yarn run serve

现在取决于USER 变量，我需要像这样进行导入 import `~/users/${process.env.USER}/config.json`;

这显然不起作用，我对如何使它起作用感到困惑。当然有一种方法可以将导入基于节点变量，然后基于此从不同的文件夹和文件导入。任何帮助或链接将不胜感激！

【问题讨论】：

你不能像普通的 js 文件或 npm 模块那样导入 json 文件。改用 fs
@Artur 是对的！在继续工作之前，您需要阅读一些内容。stackoverflow.com/questions/30340005/…
要明确，它不仅仅是 json 文件。我将导入样式表、图像甚至打字稿文件。将结帐 fs
嗯，这仍然令人困惑。我想我可以设置别名，但想法是在我需要更改导入的反应应用程序中。有条件的可以吗？
hmm 条件不起作用，因为导入显然不能在其中使用

标签： node.js reactjs bundling-and-minification

【解决方案1】：

因此，需要基于节点变量的解决方法是使用 FuseBox Sparky task runner 和文件 Api 在 App.tsx 文件夹中编辑/替换并包含适当的样式表。

在构建或开发服务器关闭后，仍然需要编写一个任务来撤消编辑。

暂时将问题留待解决，希望能提供更简洁的解决方案，否则我将发布更多信息并在完成此任务后关闭它:)

编辑（更多信息）

因此创造了两个闪亮的工作

inject-css 使用 Sparkys 文件 api 将 //css 替换为相关的导入语句
完成后将 import 语句替换为 //css 的 remove-css 任务。

所以第一个如下：

Sparky.task('inject-css', async (context: SparkyContext) =>
{
    await Sparky
        .src('./src/~/App.tsx')
        .file('*',  (file: SparkyFile) =>
        {
            file.read();
            file.setContent(
                `${file.contents}`.replace(
                    '//css',
                    `import '~/user${context.user}/styles/site.scss';`
                )
            );
            file.save();
        })
        .exec();
});

第二个作业是相同的，但替换参数几乎颠倒了，它在进程退出时被调用。这部分仍然存在一些问题，但想法是一旦通过调用process.exit() 或 ctrl+c（在 Mac 上）关闭进程，然后我们删除 css 导入语句。

// ctrl + c event
process.on('SIGINT', () => {
    Sparky.exec('remove-css');
});

// process.exit called
process.on('exit', () => {
    Sparky.exec('remove-css');
});

// uncaught exception
process.on('uncaughtException', () => {
    Sparky.exec('remove-css');
});

当我弄清楚为什么我的构建与 remove-css 任务有问题时会更新。

【讨论】：