Как настроить минимальный проект Aurelia с нуля

При установке приложения скелета навигации Aurelia он намного превосходит все сторонние модули и готовые сценарии, которые он использует. Для меня, у кого есть хорошая картина того, что большинство из них теоретически, трудно учиться, когда я не могу сделать это шаг за шагом. По этой причине я хотел бы создать минимальный проект Aurelia, а затем добавить к нему сложность, поскольку я иду.

Главный вопрос: Какие шаги необходимы для создания простого проекта Aurelia?

Предположения:

  • У меня уже есть серверный сервер Node, который может обслуживать файлы.
  • Я хочу использовать ES6/7 (Babel).
  • Я хочу использовать system.js для загрузки модуля.
  • Нет тестов на единицу или e2e, без стилей, без документов.
  • Как можно меньше модулей Node и jspm.

Прошу пояснить немного на каждом шаге и описать, что такое файлы Aurelia и что делать.

Я был бы очень благодарен за любую помощь:)

ОТВЕТЫ

Ответ 1

Установите интерфейс командной строки jspm. jspm - это менеджер пакетов для зависимостей на стороне клиента. Прочитайте это... это здорово.

npm install jspm -g

Создайте папку для проекта.

mkdir minimal
cd minimal

Инициализировать управление клиентским пакетом jspm... Примите все значения по умолчанию EXCEPT используйте опцию Babel transpiler (vs Traceur)

jspm init

Включите всю причудливую красоту барельефа, добавив следующую строку к babelOptions в config.js(jspm init создал файл config.js):

System.config({
  defaultJSExtensions: true,
  transpiler: "babel",
  babelOptions: {
    "stage": 0,      <------ add this to turn on the hotness
    "optional": [
      "runtime"
    ]
  },
  ...

Установить Aurelia

jspm install aurelia-framework
jspm install aurelia-bootstrapper

Создайте index.html, который использует загрузчик SystemJS (компонентный компонент загрузчика jspm) для загрузки Aurelia.

<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
  </head>
  <body aurelia-app>
    <h1>Loading...</h1>

    <script src="jspm_packages/system.js"></script>
    <script src="config.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>
</html>

Когда Aurelia загрузится, он будет искать представление по умолчанию и модель представления... создать их:

app.js

export class App {
  message = 'hello world';
}

app.html

<template>
  ${message}
</template>

Установите gulp и браузер-синхронизацию для обслуживания файлов:

npm install gulp
npm install --save-dev browser-sync

Добавьте gulpfile.js

var gulp = require('gulp');
var browserSync = require('browser-sync');

// this task utilizes the browsersync plugin
// to create a dev server instance
// at http://localhost:9000
gulp.task('serve', function(done) {
  browserSync({
    open: false,
    port: 9000,
    server: {
      baseDir: ['.'],
      middleware: function (req, res, next) {
        res.setHeader('Access-Control-Allow-Origin', '*');
        next();
      }
    }
  }, done);
});

Запустите веб-сервер.

gulp serve

Перейдите в приложение:

http://localhost:9000

Готово.

Здесь будет выглядеть ваша структура проекта, когда вы закончите:

project

Примечание: это просто быстрая и грязная настройка. Это не обязательно рекомендуемая структура папок, и загрузчик использует babel для пересылки js файлов на лету. Вы хотите точно настроить это на свои нужды. Цель здесь состоит в том, чтобы показать вам, как встать и работать в наименьших возможных шагах.

Ответ 3

Документация Aurelia имеет действительно приятную главу, которая объясняет, что делает каждая часть простого приложения, шаг за шагом. Вероятно, это хорошее начало, которое не подавляет вас такими зависимостями, как Bootstrap и т.д.

Также обратите внимание, что теперь есть

Ответ 4

Я бы определенно использовал aurelia-cli для этого.

Сделайте следующее: npm install -g aurelia-cli

Затем для запуска нового проекта выполните: au new project-name

для запуска вашего проекта: au run --watch

Я действительно чувствую, что aurelia-cli - это будущее для aurelia!

Ответ 5

Я создал репо (обновление по состоянию на апрель 2017 года), которое включает в себя абсолютные баребоны необходимых элементов для запуска Aurelia на https://github.com/nathanchase/super-minimal-aurelia

Это реализация Aurelia на основе ES6 (а не Typescript), она включает разделение кода по маршрутам (используя последний синтаксис в маршрутизаторе Aurelia для обозначения создания блоков в соответствии с файлами под маршрутом), и он работает во всех вечнозеленых браузерах и в Internet Explorer 11, 10 и 9 благодаря нескольким необходимым включенным полиполкам.

Ответ 6

Я работаю с проектом Java Play и все еще хочу использовать преобразование HTML scala. Таким образом, я сделал следующее

Код HTML выглядит следующим образом:

<div aurelia-app="/assets/aurelia/main">
  ...loading data...
</div>
<script src="@routes.Assets.versioned("lib/systemjs/dist/system.js")" type="text/javascript"></script>
<script src="@routes.Assets.versioned("javascripts/aurelia-core.min.js")" type="text/javascript"></script>
<script>
  System.config({
    map: {
      'plugin-babel': '@routes.Assets.versioned("javascripts/systemjs-plugin-babel/plugin-babel.js")',
      'systemjs-babel-build': '@routes.Assets.versioned("javascripts/systemjs-plugin-babel/systemjs-babel-browser.js")'
    },
    transpiler: 'plugin-babel',
    packages: {
      '/assets/aurelia': {
        defaultExtension: 'js'
      }
    }
  });
  System.import('aurelia-bootstrapper');
</script>

Используйте main.js и т.д. из учебник быстрого запуска