如何从头开始设置最小的 Aurelia 项目

Question

安装 Aurelia 导航骨架应用程序时，它使用的所有第 3 方模块和现成的脚本都让人不知所措。对于在理论上对大部分内容都有很好了解的我来说，当我不能一步一步地做时，很难学习。出于这个原因，我想自己建立一个最小的 Aurelia 项目，然后在我进行的过程中增加它的复杂性。

主要问题：设置一个简单的 Aurelia 项目需要哪些步骤？

假设：

我已经有一个可以提供文件服务的节点服务器后端。
我想使用 ES6/7 (Babel)。
我想使用system.js进行模块加载。
没有单元或端到端测试，没有样式，没有文档。
节点和 jspm 模块越少越好。

也请对每个步骤做一点解释，并描述必要的 Aurelia 文件是什么以及做什么。

如果有任何帮助，我将不胜感激:)

Answer 1

安装jspm命令行界面。 jspm 是客户端依赖项的包管理器。仔细阅读...它很棒。

npm install jspm -g

为项目创建一个文件夹。

mkdir minimal
cd minimal

初始化jspm客户端包管理... 接受所有默认设置，除了使用 Babel 转译器选项（与 Traceur 相比）

jspm init

通过将以下行添加到 config.js 中的 babelOptions（jspm init 创建了 config.js 文件）来启用所有先进的 babel 优点：

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 的模块加载器对应部分）到 bootstrap 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 bootstraps 它将寻找默认视图和视图模型...创建它们：

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

完成。

完成后您的项目结构如下所示：

注意：这只是一个快速而肮脏的设置。它不一定是推荐的文件夹结构，加载程序正在使用 babel 动态转换 js 文件。您需要根据自己的需要对此进行微调。此处的目的是向您展示如何以尽可能少的步数起床和运行。

Answer 2

查看专门为简化 Aurelia 介绍而写的文章https://github.com/aurelia-guides/aurelia-guides.md-articles/blob/master/Building-Skeleton-Navigation-From-Scratch.md。

Answer 3

我正在处理 Java Play 项目，但仍想使用 HTML 文件的 Scala 转换。因此，我做了以下

可通过 the basic aurelia project, which is linked from the quickstart tutorial

aurelia-core

使用 WebJars 获取 SystemJS："org.webjars.npm" % "systemjs" % "0.19.38"
Since systemjs-plugin-babel is currently unavailable as webjar，我运行 npm install systemjs-plugin-babel 并将提取的文件复制到 assets directroy

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 等 the quickstart tutorial

Answer 4

Aurelia 文档有一个非常好的 chapter 解释了一个简单应用程序的每个部分的作用，一次一个步骤。这可能是一个好的开始，不会让你被 Bootstrap 和类似的依赖项压垮。

另请注意，Aurelia 现在有一个 CLI interface 可以简化从头开始设置项目的过程。

Answer 5

我肯定会为此使用 aurelia-cli。

执行以下操作： npm install -g aurelia-cli

然后开始一个新项目： au new project-name

到运行你的项目做： au run --watch

我真的觉得 aurelia-cli "is the future" 适合 aurelia！

Answer 6

我创建了一个回购协议（截至 2017 年 4 月最新），其中包括运行 Aurelia 在 https://github.com/nathanchase/super-minimal-aurelia

的绝对准系统必需品

这是一个基于 ES6 的 Aurelia 实现（而不是 Typescript），它包含通过路由进行代码拆分（使用 Aurelia 路由器中的最新语法根据路由下的文件指定块创建），并且由于包含一些必要的 polyfill，它适用于所有常绿浏览器和 Internet Explorer 11、10 和 9。

如何从头开始设置最小的 Aurelia 项目

How to set up minimal Aurelia project from scratch

javascript

aurelia