使用 aurelia-cli 手动引导 aurelia 应用程序答案

【问题标题】：Manual bootstrapping of aurelia app with aurelia-cli使用 aurelia-cli 手动引导 aurelia 应用程序
【发布时间】：2017-07-09 11:43:46
【问题描述】：

我想将我的 Aurelia 应用程序嵌入到我的 Spring Boot 应用程序的资源文件夹中并手动引导/增强页面。 Aurelia 捆绑包是使用 aurelia-cli 生成的。在文档中http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/app-configuration-and-startup/4 是 JSPM 和 webpack 骨架的示例。如何使用 aurelia-cli 实现手动引导/渐进增强？

我的 main.js 应该是什么样子？我应该在哪里包含我的 app-bundle.js 和 vendor-bundle.js？

编辑： 我通过包含以下内容实现了一个工作示例：

<div aurelia-app="main">
 <script data-main="aurelia-bootstrapper" src="path-to-resources/vendor-bundle.js" type="text/javascript"></script>
 <script src="path-to-resources/app-bundle.js" type="text/javascript"></script>
</div>

但是是否可以在 <head> 中包含脚本并在 DOMContentLoaded 事件中增强 <div aurelia-app="main"> ？

【问题讨论】：

您实际上应该将您的第 3 方应用添加到 aurelia.json 文件中。最好将它放在所有aurelia-* 依赖项下方的dependencies 部分，但如果您有困难，它也可以放在prepend 部分。
@LStarky 感谢您的回复。我试着让自己更清楚。我有一个 index.html 页面，上面有非 aurelia 内容，这个页面的一个标签应该是我的 aurelia-app。我想手动引导这个应用程序。我如何做到这一点？

标签： bootstrapping aurelia

【解决方案1】：

我像这样手动引导了一个 aurelia-cli 应用程序。在这里，我通过第一个脚本标签使用 polyfill 服务。此脚本运行并下载浏览器缺少的 polyfill。之后它调用一个回调函数。此回调函数添加 aurelia vendor-bundle 脚本。

<body aurelia-app="main" class="sharry not-selectable no-tap-highlight-color">
<div class="app-loding-container">
    <img src="/img/logo/sharry_tv_b.png" alt="sharry logo">
</div>
<script src="https://polyfill.io/v2/polyfill.min.js?features=HTMLPictureElement,Intl&callback=polyfillsAreLoaded" defer async></script>
<script>
    function polyfillsAreLoaded() {
        var aureliaScript = document.createElement('script');
        aureliaScript.setAttribute('src', '/scripts/vendor-bundle.js');
        aureliaScript.setAttribute('data-main', 'aurelia-bootstrapper');
        document.body.appendChild(aureliaScript);
    }
</script>

【讨论】：