如何从头开始设置最小的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转换。 因此,我做了以下
- 通过从快速入门教程链接的基本aurelia项目下载
aurelia-core
- 使用WebJars获取SystemJS :
"org.webjars.npm" % "systemjs" % "0.19.38"
- 由于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
等