如何从头开始设置最小的Aurelia项目
mic*_*nil 61 javascript aurelia
安装Aurelia导航骨架应用程序时,它所使用的所有第三方模块和现成的脚本都是压倒性的.对于那些在理论上对大部分内容有很好描述的人来说,如果我不能一步一步地学习,那就很难学习.出于这个原因,我想自己设置一个最小的Aurelia项目,然后随着我的进展增加复杂性.
主要问题:建立一个简单的Aurelia项目需要哪些步骤？
假设:
- 我已经有一个可以提供文件的节点服务器后端.
- 我想使用ES6/7(Babel).
- 我想使用system.js进行模块加载.
- 没有单元或e2e测试,没有样式,没有文档.
- 尽可能少的节点和jspm模块.
请对每一步做一些解释,并描述必要的Aurelia文件是什么和做什么.
我会非常感谢任何帮助:)
Jer*_*yow 80
安装jspm命令行界面.jspm是客户端依赖项的包管理器.阅读它...它很棒.
npm install jspm -g
为项目创建一个文件夹.
mkdir minimal
cd minimal
初始化jspm客户端软件包管理...接受所有默认值EXCEPT使用Babel转换程序选项(vs 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文件.你需要根据自己的需要对其进行微调.这里的目的是向您展示如何以尽可能少的步骤启动和运行.
- 其他人还记得开发简单吗？ (10认同)
- 我们正在与jspm团队合作,以便将其整理出来 - 刚刚发布了具有重大变化的jspm构建 (2认同)
| 归档时间： |
|
| 查看次数： |
11726 次 |
| 最近记录： |