javascript - tutorial - Cómo configurar un proyecto mínimo de Aurelia desde cero

react

Question

Al instalar la aplicación de esqueleto de navegación Aurelia, es muy abrumador con todos los módulos de terceros y las secuencias de comandos listas para usar que utiliza. Para mí, que tengo una buena idea de lo que es en teoría, me cuesta aprender cuando no puedo hacerlo paso a paso. Por esta razón, me gustaría configurar un proyecto mínimo de Aurelia por mí mismo y luego agregarle complejidad a medida que avance.

Pregunta principal: ¿Qué pasos son necesarios para configurar un proyecto simple de Aurelia?

Suposiciones

• Ya tengo un servidor de servidor Node que puede servir archivos.
• Quiero usar ES6 / 7 (Babel).
• Quiero usar system.js para cargar el módulo.
• Sin pruebas unitarias o e2e, sin estilos, sin documentos.
• Tan pocos módulos de nodo y jspm como sea posible.

También explique un poco sobre cada paso y describa cuáles son y qué hacen los archivos necesarios de Aurelia.

Estaría muy agradecido por cualquier ayuda :)

Answer 1

Consulte el artículo https://github.com/aurelia-guides/aurelia-guides.md-articles/blob/master/Building-Skeleton-Navigation-From-Scratch.md escrito específicamente para facilitar la introducción a Aurelia.

Answer 2

Creé un repositorio (actualizado hasta abril de 2017) que incluye los elementos básicos absolutos necesarios para ejecutar Aurelia en https://github.com/nathanchase/super-minimal-aurelia

Es una implementación de Aurelia basada en ES6 (en lugar de TypeScript), incorpora división de código por rutas (usando la última sintaxis en el enrutador de Aurelia para designar la creación de fragmentos de acuerdo con los archivos de una ruta), y funciona en todos los navegadores de hoja perenne E Internet Explorer 11, 10 y 9 gracias a algunos rellenos de polietileno necesarios.

Answer 3

Definitivamente usaría el aurelia-cli para esto.

Haga lo siguiente: npm install -g aurelia-cli

Luego, para comenzar un nuevo proyecto, haga: au new project-name

para ejecutar su proyecto hacer: au run --watch

¡Realmente siento que aurelia-cli "es el futuro" para aurelia!

Answer 4

Estoy trabajando con un proyecto Java Play y todavía quiero usar la conversión de escala del archivo HTML. Por lo tanto, hice lo siguiente

1. Descargue aurelia-core disponible a través del proyecto básico de aurelia , que está vinculado desde el tutorial de inicio rápido
2. SystemJS utilizando WebJars: "org.webjars.npm" % "systemjs" % "0.19.38"
3. Dado que systemjs-plugin-babel no está disponible actualmente como webjar , ejecuté npm install systemjs-plugin-babel y copié los archivos recuperados en la dirección de assets

El código HTML es así:

<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>

Utilice main.js etc. del tutorial de inicio rápido

Answer 5

Instale la interfaz de línea de comando jspm. jspm es un administrador de paquetes para dependencias del lado del cliente. Sigue leyendo ... es genial.

npm install jspm -g

Crea una carpeta para el proyecto.

mkdir minimal
cd minimal

Inicialice la gestión de paquetes del cliente jspm ... Acepte todos los valores predeterminados, EXCEPTO use la opción del transpilador Babel (vs Traceur)

jspm init

Habilite todas las bondades de vanguardia de babel agregando la siguiente línea a babelOptions en su config.js ( jspm init creó el archivo config.js):

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

Instalar Aurelia

jspm install aurelia-framework
jspm install aurelia-bootstrapper

Cree un index.html que use el cargador SystemJS (contraparte del cargador del módulo jspm) para arrancar 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>

Cuando Aurelia arranque, buscará una vista predeterminada y un modelo de vista ... créelos:

app.js

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

app.html

<template>
  ${message}
</template>

Instale gulp y browser-sync para servir los archivos:

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

Agregar un archivo 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);
});

Inicie el servidor web.

gulp serve

Navega a la aplicación:

http://localhost:9000

Hecho.

Así es como se verá la estructura de su proyecto cuando haya terminado:

Nota: esta es solo una configuración rápida y sucia. No es necesariamente la estructura de carpetas recomendada, y el cargador está usando babel para transpilar los archivos js sobre la marcha. Querrá ajustar esto a sus necesidades. La intención aquí es mostrarle cómo ponerse en marcha en la menor cantidad de pasos posible.

Answer 6

La documentación de Aurelia tiene un chapter realmente agradable que explica lo que hace cada parte de una aplicación simple, paso a paso. Probablemente sea un buen comienzo que no lo abrume con dependencias como Bootstrap y similares.

También tenga en cuenta que ahora hay una interfaz CLI para Aurelia que simplifica la configuración de un proyecto desde cero.