页面加载时如何向ES6模块传递初始化固定数据？

我正在开发一款应用，其中部分数据为固定数据（页面加载后不会变更），另一部分为动态数据（用户点击按钮时通过AJAX获取）。每次用户点击按钮时，需要将动态数据与固定数据结合后展示。

由于固定数据是较大的数据结构，我不想每次通过AJAX获取以避免不必要的传输耗时，希望用ES6模块开发。示例中用数值6简化固定数据，实际场景中由PHP注入，写法为：const fixedData = '<?php echo 6; ?>';

初始尝试方案 #

index.php #

<script type='module' src='./main.js'>
    const fixedData = 6;
</script>

main.js #

const h2 = document.createElement('h2');

function displayFixedData(fixedData){
    h2.innerText = data;
    document.body.appendChild(h2);
}

displayFixedData(fixedData);

运行后出现错误：Uncaught ReferenceError: fixedData is not defined

请问是否有方法在页面加载时将固定数据传入ES6模块内的函数使用？我曾考虑从script标签导出数据并导入到main.js，但不确定是否可行，是否有其他实现方式？

可行实现方案 #

根据建议，我实现了一个可行方案：

index.php #

<script type="module">
    import { displayFixedData } from './main.js'
    const fixedData = 5;
    displayFixedData(fixedData);
</script>

main.js #

const h2 = document.createElement('h2');

function displayFixedData(fixedData){
    h2.innerText = fixedData;
    document.body.appendChild(h2);
}

export { displayFixedData };

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