如何从头开始设置最小的 Aurelia 项目 [英] How to set up minimal Aurelia project from scratch
问题描述
在安装 Aurelia 导航框架应用程序时，它使用的所有 3rd 方模块和现成的脚本远远超出了它的范围.对于我对理论上的大部分内容有一个很好的了解，当我不能一步一步地学习时，很难学习.出于这个原因，我想自己建立一个最小的 Aurelia 项目，然后在进行过程中增加它的复杂性.
When installing the Aurelia navigation skeleton app it is far to overwhelming with all the 3rd party modules and ready-made scripts it uses. For me who have a good picture of what most of it is in theory, have a hard time learning when I can't do it one step at a time. For this reason I would like to set up a minimal Aurelia project by myself and then add complexity to it as I go along.
主要问题:设置一个简单的 Aurelia 项目需要哪些步骤?
Main question: Which steps are necessary to set up a simple Aurelia project?
假设:
- 我已经有一个可以提供文件的 Node 服务器后端.
- 我想使用 ES6/7 (Babel).
- 我想使用 system.js 进行模块加载.
- 没有单元或 e2e 测试、没有样式、没有文档.
- 尽可能少的 node 和 jspm 模块.
还请对每个步骤做一些解释，并描述必要的 Aurelia 文件是什么和做什么.
Please do also explain a little on each step and describe what the necessary Aurelia files is and does.
我将非常感谢您的帮助:)
I would be very thankful for any help :)
推荐答案
安装 jspm 命令行界面.jspm 是客户端依赖项的包管理器.仔细阅读它...很棒.
Install the jspm command line interface. jspm is a package manager for client-side dependencies. Read up on it... it's great.
npm install jspm -g
为项目创建一个文件夹.
Create a folder for the project.
mkdir minimal
cd minimal
初始化jspm客户端包管理...接受所有默认设置，除了使用 Babel transpiler 选项(vs Traceur)
Initialize jspm client package management... Accept all the defaults EXCEPT use the Babel transpiler option (vs Traceur)
jspm init
通过将以下行添加到 config.js 中的 babelOptions(jspm init 创建了 config.js 文件)来启用所有花哨的尖端 babel 优点:
Enable all the fancy cutting edge babel goodness by adding the following line to the babelOptions in your config.js (jspm init created the config.js file):
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
创建一个使用 SystemJS 加载器(jspm 的模块加载器对应部分)来引导 Aurelia 的 index.html.
Create an index.html that uses the SystemJS loader (jspm's module loader counter-part) to 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 引导时，它将寻找默认视图和视图模型...创建它们:
When Aurelia bootstraps it's going to look for a default view and view-model... create them:
app.js
export class App {
message = 'hello world';
}
app.html
<template>
${message}
</template>
安装 gulp 和 browser-sync 来提供文件:
Install gulp and browser-sync to serve the files:
npm install gulp
npm install --save-dev browser-sync
添加一个 gulpfile.js
Add a 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
完成.
以下是您完成后的项目结构:
Here's what your project structure will look like when you're finished:
注意:这只是一个快速而肮脏的设置.它不一定是推荐的文件夹结构，加载器正在使用 babel 来动态转换 js 文件.您需要根据自己的需要对此进行微调.这里的目的是向您展示如何以尽可能少的步骤启动和运行.
Note: this is just a quick and dirty setup. It's not necessarily the recommended folder structure, and the loader is using babel to transpile the js files on the fly. You'll want to fine tune this to your needs. The intent here is to show you how to get up and running in the fewest steps possible.
这篇关于如何从头开始设置最小的 Aurelia 项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
