在安装 Aurelia 导航框架应用程序时，它使用的所有 3rd 方模块和现成的脚本都难以应付。对于我在理论上对大部分内容有很好的了解，当我一次无法做到时，很难学习。出于这个原因，我想自己建立一个最小的 Aurelia 项目，然后在我进行的过程中增加它的复杂性。
主要问题：建立一个简单的 Aurelia 项目需要哪些步骤？
假设：
请对每个步骤进行一些解释，并描述必要的 Aurelia 文件是什么以及做什么。
我会非常感谢任何帮助:)
【问题讨论】：
标签： javascript aurelia
安装 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 的模块加载器对应部分）来引导 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 和 browser-sync 以提供文件：
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 文件。您需要根据自己的需要对其进行微调。这里的目的是向您展示如何以尽可能少的步骤启动和运行。
【讨论】：
【讨论】：
我创建了一个存储库（截至 2017 年 4 月最新），其中包含在 https://github.com/nathanchase/super-minimal-aurelia 运行 Aurelia 所需的绝对准系统项目
这是一个基于 ES6 的 Aurelia 实现（而不是 Typescript），它包含 通过路由进行代码拆分（使用 Aurelia 路由器中的最新语法来根据路由下的文件指定块创建），并且由于一些必要的包含的 polyfill，它适用于所有常青浏览器和 Internet Explorer 11、10 和 9。
【讨论】：
Aurelia 文档有一个非常好的chapter，它解释了一个简单应用程序的每个部分的作用，一次一个步骤。这可能是一个好的开始，不会让您被 Bootstrap 和类似的依赖项压倒。
另请注意，现在 Aurelia 有一个 CLI interface，可以简化从头开始设置项目的过程。
【讨论】：
我肯定会为此使用 aurelia-cli。
执行以下操作：
npm install -g aurelia-cli
然后开始一个新项目：
au new project-name
要运行您的项目，请执行以下操作：
au run --watch
我真的觉得 aurelia-cli “是 aurelia 的未来”！
【讨论】：
我正在处理一个 Java Play 项目，但仍想使用 HTML 文件的 scala 转换。因此，我做了以下
aurelia-core，该链接从the quickstart tutorial 链接
"org.webjars.npm" % "systemjs" % "0.19.38"
npm install systemjs-plugin-babel 并将获取的文件复制到 assets 目录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
【讨论】：