如何处理作为ES6模块导入的JavaScript文件的缓存

Question

旧情况

以前,如果有新版本,我使用以下方法强制浏览器重新加载我的JavaScript文件.

<script src="common.js?version=1337"></script>
<script src="app.js?version=1337"></script>

我的HTML是自动生成的(例如使用PHP),因此很容易实现自动化.

新情况

现在我想使用ES6模块并导入我的公共代码.我的HTML成为:

<script src="app.js?version=1337" type="module"></script>

并app.js包含导入:

import {foo, bar} from './common.js';

问题

现在我的问题是:我如何影响common.js新场景中的缓存？

我不想每次编辑时app.js都手动编辑common.js.如果可能的话,我也不想动态生成/预处理我的任何JavaScript文件.

Answer 1

ES6 模块可以导入输出有效 JS 的 PHP 文件。只要您还设置了正确的标头，就应该没问题。

所以你的index.php文件将包含：

<script src="app.js.php?version=1337" type="module"></script>

你的app.js.php文件将包含：

<?php
  header("Content-Type: application/javascript");
  $version = 1337; // Probably imported form some config file;
?>
import {foo, bar} from './common.js.php?version=<?=$version?>';