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

在安装Aurelia导航框架应用程序时,要使用所有第三方模块和现成的脚本,这已经不堪重负了。 对于我理论上大部分情况的人来说,如果我不能一次一个脚印地学习,那么就很难学习。 出于这个原因,我想自己创build一个最小的Aurelia项目,然后随着我的进展增加复杂性。

主要问题:build立一个简单的Aurelia项目需要哪些步骤?

假设:

  • 我已经有一个可以提供文件的节点服务器后端。
  • 我想用ES6 / 7(Babel)。
  • 我想使用system.js来加载模块。
  • 没有单位或e2etesting,没有风格,没有文档。
  • 尽可能less的节点和jspm模块。

请在每一步中做一点解释,并说明必要的Aurelia文件是什么和做什么的。

我会很感激任何帮助:)

安装jspm命令行界面。 jspm是客户端依赖项的包pipe理器。 阅读它…这是伟大的。

npm install jspm -g 

为该项目创build一个文件夹。

 mkdir minimal cd minimal 

初始化jspm客户端软件包pipe理…接受所有的默认值除了使用Babel transpiler选项(vs Traceur)

 jspm init 

通过在你的config.js( jspm init创build的config.js文件)中添加下面一行到babelOptions来启用所有的花俏尖端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 

创build一个使用SystemJS加载器(jspm的模块加载器对应部分)的index.html来引导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引导它将寻找一个默认的视图和视图模型…创build它们:

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); }); 

启动networking服务器。

 gulp serve 

浏览到应用程序:

 http://localhost:9000 

完成。

完成后,您的项目结构将如下所示:

项目

注意:这只是一个快速和肮脏的设置。 这不一定是推荐的文件夹结构,加载器使用babel来即时传输js文件。 你会想微调这个到你的需求。 这里的目的是告诉你如何以尽可能less的步骤起床和跑步。

Aurelia文档有一个非常好的章节 ,可以解释简单应用程序的每个部分的function。 这可能是一个好的开始,不要用像Bootstrap和类似的依赖来压倒你。

另外请注意,现在有一个Aurelia的CLI界面 ,可以简化从头开始设置项目。

我肯定会用这个aurelia-cli。

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

然后启动一个新的项目: au new project-name

运行你的项目: au run --watch

我真的觉得aurelia-cli“是aurelia的未来”!

我创build了一个回购协议(截至2017年4月),其中包括在https://github.com/nathanchase/super-minimal-aurelia上运行Aurelia所必需的绝对准确的项目;

这是一个基于ES6的Aurelia实现(而不是Typescript),它结合了路由代码分割(使用Aurelia路由器中的最新语法来根据path下的文件指定块创build),它可以在所有常青的浏览器和Internet Explorer 11,10和9感谢一些必要的包括polyfills。

我正在使用一个Java Play项目,仍然想要使用HTML文件的Scala转换。 因此,我做了以下

  1. 通过从快速入门教程链接的基本aurelia项目下载aurelia-core
  2. 使用WebJars获取SystemJS : "org.webjars.npm" % "systemjs" % "0.19.38"
  3. 由于systemjs-plugin-babel当前不能用作webjar ,所以我运行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