我正在尝试使用progressive enhancement来利用Aurelia的typescript/webpack skeleton功能,但是使用文档中显示的示例我无法使其完全正常工作。我敢肯定是因为该示例正在使用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有关,或者是否还有其他问题。
有人知道这是否可以实现吗?
答案 0 :(得分:0)
在更仔细地阅读了文档并征求了更前端的精明同事的帮助之后,我能够使用manual bootstrapping Aurelia的产品(特别是“使用Webpack进行手动引导”中的“ ”部分。但是文档仍然过时,因为您可以简单地使用aurelia-bootstrapper
软件包,而不再需要aurelia-bootstrapper-webpack
软件包,这总是给我带来构建错误。
首先,您需要更新 webpack.config.js 文件的入口节点中的app
属性,使其指向 main.ts :< / p>
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))
})
现在,您的组件应该得到增强。