Aurelia Typescript/Webpack Skeleton + Progressive Enhancement答案

【问题标题】：Aurelia Typescript/Webpack Skeleton + Progressive EnhancementAurelia Typescript/Webpack Skeleton + Progressive Enhancement
【发布时间】：2023-03-02 22:19:02
【问题描述】：

我正在尝试使用 typescript/webpack skeleton 来利用 Aurelia 的 progressive enhancement 功能，但使用文档中显示的示例我根本无法让它工作。我确定这是因为该示例使用的是 JSPM/SystemJS，但我似乎无法在任何地方找到 Webpack 示例。这是我目前拥有的：

./src/hello-world.ts

export class HelloWorld {}

./src/hello-world.html

<template>
    <h1>Hello World</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique, voluptatem. Amet expedita doloribus itaque explicabo
        ex ducimus temporibus quisquam asperiores eveniet beatae, magni eum fuga reprehenderit obcaecati quasi ipsam minima?</p>
</template>

./src/main.ts

import '../static/styles.css';
import 'font-awesome/css/font-awesome.css';
import 'bootstrap/dist/css/bootstrap.css';
import { Aurelia } from 'aurelia-framework';
import { PLATFORM } from 'aurelia-pal';
import * as Bluebird from 'bluebird';

Bluebird.config({ warnings: { wForgottenReturn: false } });

export async function configure(aurelia: Aurelia) {
  aurelia.use
    .defaultBindingLanguage()
    .defaultResources()
    .developmentLogging()
    .globalResources(PLATFORM.moduleName('hello-world'));

  await aurelia.start().then(() => aurelia.enhance())
}

./index.ejs

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title><%- htmlWebpackPlugin.options.metadata.title %></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <base href="<%- htmlWebpackPlugin.options.metadata.baseUrl %>">
    <!-- imported CSS are concatenated and added automatically -->
  </head>
  <body>
    <hello-world></hello-world>

    <% if (htmlWebpackPlugin.options.metadata.server) { %>
    <!-- Webpack Dev Server reload -->
    <script src="/webpack-dev-server.js"></script>
    <% } %>
  </body>
</html>

当我运行npm start 来测试应用程序时，我得到的只是一个空白页面，其中<hello-world></hello-world> 组件位于主体顶部，但为空且未填充模板html。但是，Webpack 正在输出正确的 js 文件，所以我不确定这是否与 js 在窗口加载之前尝试运行有关，或者是否还有其他问题。

有人知道这是否可以实现吗？

【问题讨论】：

标签： webpack aurelia

【解决方案1】：

在更仔细地阅读了文档并获得了一位更精通前端的同事的帮助后，我能够使用 manual bootstrapping Aurelia 提供的服务（特别是“使用 Webpack 手动引导”部分在那个链接中）。然而，文档仍然过时，因为您可以简单地使用 aurelia-bootstrapper 包而不再需要 aurelia-bootstrapper-webpack 包，这无论如何都会给我构建错误。

首先，您需要更新 webpack.config.js 文件的入口节点中的 app 属性以指向 main.ts：

entry: {
    app: ['./src/main'],
    // other properties omitted...
  }

然后使用手动引导代码更新 main.ts：

import '../static/styles.css';
import 'font-awesome/css/font-awesome.css';
import 'bootstrap/dist/css/bootstrap.css';
import { Aurelia } from 'aurelia-framework';
import { PLATFORM } from 'aurelia-pal';
import * as Bluebird from 'bluebird';

Bluebird.config({ warnings: { wForgottenReturn: false } });

bootstrap(async (aurelia: Aurelia) => {
  aurelia.use
    .defaultBindingLanguage()
    .defaultResources()
    .developmentLogging()
    .globalResources(PLATFORM.moduleName('hello-world'));

  await aurelia.start()
    .then(() => aurelia.enhance())
    .catch(err => console.log(err))
})

现在您的组件应该得到增强。

【讨论】：