Aurelia Typescript / Webpack Skeleton + Прогрессивное улучшение - PullRequest
Новая
       6

Aurelia Typescript / Webpack Skeleton + Прогрессивное улучшение

0 голосов
/ 29 августа 2018

Я пытаюсь использовать функцию прогрессивного улучшения Aurelia, используя typcript / webpack скелет , но я не могу заставить его работать вообще, используя пример, показанный в документы. Я уверен, что это потому, что в этом примере используется JSPM / SystemJS, но я не могу найти где-нибудь пример Webpack. Вот что у меня сейчас:

. / SRC / HELLO-world.ts 

export class HelloWorld {}

. / SRC / привет-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 до загрузки окна, или к другой проблеме.

Кто-нибудь знает, достижимо ли это?

1 Ответ

0 голосов
/ 29 августа 2018

После более внимательного прочтения документов и привлечения помощи более опытного коллеги я смог заставить это работать, используя ручную загрузку Aurelia предлагает ( специально "Руководство" Начальная загрузка с Webpack "в этой ссылке ). Однако документы все еще устарели, так как вы можете просто использовать пакет aurelia-bootstrapper и больше не нуждаться в пакете aurelia-bootstrapper-webpack, который все равно давал мне ошибки сборки.

Сначала вам нужно обновить свойство app в узле ввода файла webpack.config.js , указав 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))
})

Теперь ваш компонент должен быть улучшен.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...