【问题标题】：Client side cache busting using the CLI使用 CLI 的客户端缓存清除
【发布时间】：2018-07-15 03:38:33
【问题描述】：

我们使用的是aurelia-cli。任务包括：

build.json
build.ts
process-css.ts
process-markup.ts
process-sass.ts
run.json
run.ts
test.json
test.ts
transpile.ts

如果我们使用 cli 来做一个缓存清除解决方案呢？

我们已经尝试过增加scripts 目录的编号，使其变为scripts1、scripts2、scriptsN。

【问题讨论】：

aurelia.io/hub.html#/doc/article/aurelia/framework/latest/…

标签： aurelia

【解决方案1】：

0.20.0 支持

今天是我的幸运日。 An aurelia-cli release from 8 hours 以前是这样说的：

特点：支持捆绑修订号

演练

首先，安装 0.20.0 并创建一个新应用。

npm install aurelia-cli@">=0.20.0" -g
au new my-app

或者，升级现有应用。

npm install aurelia-cli@">=0.20.0" --save-dev

接下来，打开my-app/aurelia-project/aurelia.json。

将build.options.rev 属性设置为true。

"options": {
   "minify": "stage & prod",
   "sourcemaps": "dev & stage", 
   "rev": true
},

在build.targets 中设置output 和index 属性

"targets": [
    {
      "id": "web",
      "displayName": "Web",
      "output": "scripts",
      "index": "index.html"
    }
 ],

aurelia-cli 将查找index 文件并替换对scripts\vendor-bundle.js 的引用，如下所示：

<script src="scripts\vendor-bundle.js" data-main="aurelia-bootstrapper">
<script src="scripts\vendor-bundle-947c308e28.js" data-main="aurelia-bootstrapper">

最后，构建应用程序。

au build --env prod

您的捆绑包将如下所示：

app-bundle-e0c4d46f7d.js
vendor-bundle-dba9184d78.js

GitHub 上的源代码

cli/lib/build/bundler.js

let defaultBuildOptions = {
  minify: "stage & prod",
  sourcemaps: "dev & stage",
  rev: false
};

cli/lib/build/bundler.js

if (buildOptions.rev) {
  //Generate a unique hash based off of the bundle contents
  this.hash = generateHash(concat.content);
  bundleFileName = generateHashedPath(this.config.name, this.hash);       
}

【讨论】：

您还有一个不需要的额外步骤。您只需将"index" 属性添加到构建目标，而不是平台。很高兴这对你有用！另外，请随意将您自己的答案标记为 the 答案:)
谢谢@Andrew。已更新。
随意将您自己的答案标记为 the 答案，这样其他人就可以看到它已解决:)
对我来说，这个答案失败了，直到我将 build.options.rev 的设置修改为布尔值 true（而不是字符串“true”）。然后事情按预期进行。我正在运行 cli 版本 0.22.0 FWIW。
正如@KevinM 所说，我还必须删除引号并使用文字 true 才能正常工作。否则它就像魅力一样！

【解决方案2】：

我的 Aurelia 应用程序托管在 ASP.Net Core MVC 页面中，并且我使用 ASP.Net Core asp-append-version 标签助手确保浏览器正确加载更新的 JS 包取得了巨大成功。

这个属性可以添加到脚本标签中，ASP.Net 会根据脚本文件的内容自动附加一个版本号。哈希是在应用程序启动时生成的，因此必须重新启动应用程序才能让 ASP.Net 检测到任何新更改。

让它与 Aurelia 一起工作的诀窍在于还将 app-bundle.js 文件添加为托管页面上的脚本标记：

<body aurelia-app="main-public" class="public"> <script src="scripts/vendor-bundle.js" data-main="aurelia-bootstrapper" asp-append-version="true"></script> <script src="scripts/app-bundle.js" asp-append-version="true"></script> </body>

输出看起来像这样：

<body aurelia-app="main-public" class="public"> <script src="scripts/vendor-bundle.js?v=97hNIHUQnLL3Q44m2FWNV-3NIpgqvgIDIx5sUXUcySQ" data-main="aurelia-bootstrapper"></script> <script src="scripts/app-bundle.js?v=htYOQIr-GHrpZIDiT2b32LxxPZs10cfUU4YNt9iKLro"></script> </body>

免责声明：关于 app-bundle.js 的加载行为，我没有检查 vendor-bundle.js 源代码，所以我不知道这个解决方案有多强大。我没有遇到这种方法的任何问题，并且它在我的场景中运行良好；但是，在应用于生产代码之前，请谨慎使用并充分测试。

【讨论】：

我正在考虑做类似的事情。通常你只需要包含目标包（默认是供应商包），它看起来好像生成了一个脚本标记（可能是由requireJS？）并插入到应用程序包的头部。你看到同样的东西吗？
刚刚试过这个。看起来如果你做你正在做的事情，requireJS 不必加载脚本本身，因此不会将脚本插入 HEAD！不错！
没错。但是，如果您手动添加脚本标签，它会使用该标签，并且不会尝试两次加载脚本。
是的。似乎您可能不需要免责声明。 :-)
也许不是。我只是不知道它是如何工作的底层机制，所以我担心的是有一个潜在的竞争条件可能会在某个时候弹出并最终从 require JS 加载，即使标签已经在页面上。