如何在模块间共享动态常量？

Question

我正试图正确地模块化我的代码，并保持代码的自制力，并与webpack一起构建所有的代码。我想要解决的问题是如何在模块之间获得一个常量共享(也就是说，如果直接放在HTML中，就会出现在全局范围内)。

具体来说，我有一个日志模块，如下所示：

'use strict';

import { v4 } from "uuid";

const ssid = v4();

function sendToLog(metric) {
    metric.ssid = ssid;
    // send to the api
}

// Send userAgent immediately
sendToLog({ ua: window.navigator.userAgent });

如果我将其转到html文件中并将其放入html文件中，那么我稍后将包括一个WebVitals模块。

<script defer src="./dist/webvitals.js"></script>

import {getLCP} from 'web-vitals';

getLCP(sendToLog);

那么ssid在所有对sendToLog的调用中都是相同的。但是，我想做的不是内联日志模块，而是让WebVitals模块(和其他模块)导入它：

logger.js

'use strict';

import { v4 } from "uuid";

const ssid = v4();

export default function sendToLog(metric) {
    metric.ssid = ssid; 
}

和webvitals.js

import {getLCP} from 'web-vitals';
import sendToLog from './logger';

getLCP(sendToLog);

我如何构造它，使ssid在导入logger.js的每个模块上保持不变

Answer 1

如何构造它，以便ssid在导入logger.js的每个模块上保持不变？

你已经说过了。一个模块只被计算一次，不管它多久被导入一次。顶层const ssid本质上是一个静态变量，只有一个sendToLog函数，在导入记录器的所有模块之间共享。