javascript 如何从头开始设置最小的 Aurelia 项目
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32080221/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set up minimal Aurelia project from scratch
提问by micnil
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 导航框架应用程序时，它使用的所有 3rd 方模块和现成的脚本都让人不知所措。对于我对理论上的大部分内容有一个很好的了解，当我不能一步一步地学习时，很难学习。出于这个原因，我想自己建立一个最小的 Aurelia 项目，然后在进行过程中增加它的复杂性。
Main question: Which steps are necessary to set up a simple Aurelia project?
主要问题：设置一个简单的 Aurelia 项目需要哪些步骤？
Assumptions:
假设：
- I already have a Node server backend that can serve files.
- I want to use ES6/7 (Babel).
- I want to use system.js for module loading.
- No unit or e2e tests, no styles, no docs.
- As few node and jspm modules as possible.
- 我已经有一个可以提供文件的 Node 服务器后端。
- 我想使用 ES6/7 (Babel)。
- 我想使用 system.js 进行模块加载。
- 没有单元或 e2e 测试，没有样式，没有文档。
- 尽可能少的 node 和 jspm 模块。
Please do also explain a little on each step and describe what the necessary Aurelia files is and does.
请对每一步做一些解释，并描述必要的 Aurelia 文件是什么和做什么。
I would be very thankful for any help :)
我将非常感谢您的任何帮助:)
回答by Jeremy Danyow
Install the jspm command line interface. jspm is a package manager for client-side dependencies. Read up on it... it's great.
安装 jspm 命令行界面。jspm 是客户端依赖项的包管理器。阅读它......它很棒。
npm install jspm -g
Create a folder for the project.
为项目创建一个文件夹。
mkdir minimal
cd minimal
Initialize jspm client package management... Accept all the defaults EXCEPT use the Babel transpiler option (vs Traceur)
初始化 jspm 客户端包管理...接受所有默认值，除了使用 Babel 转译器选项（vs Traceur）
jspm init
Enable all the fancy cutting edge babel goodness by adding the following line to the babelOptions in your config.js (jspm initcreated the config.js file):
通过将以下行添加到 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"
]
},
...
Install Aurelia
安装 Aurelia
jspm install aurelia-framework
jspm install aurelia-bootstrapper
Create an index.html that uses the SystemJS loader (jspm's module loader counter-part) to bootstrap Aurelia.
创建一个使用 SystemJS 加载器（jspm 的模块加载器对应部分）来引导 Aurelia 的 index.html。
<!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>
When Aurelia bootstraps it's going to look for a default view and view-model... create them:
当 Aurelia 引导时，它将寻找默认视图和视图模型……创建它们：
app.js
应用程序.js
export class App {
message = 'hello world';
}
app.html
应用程序.html
<template>
${message}
</template>
Install gulp and browser-sync to serve the files:
安装 gulp 和 browser-sync 来提供文件：
npm install gulp
npm install --save-dev browser-sync
Add a gulpfile.js
添加一个 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);
});
Start the webserver.
启动网络服务器。
gulp serve
Browse to the app:
浏览到应用程序：
http://localhost:9000
Done.
完毕。
Here's what your project structure will look like when you're finished:
完成后，您的项目结构如下所示：
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.
注意：这只是一个快速而肮脏的设置。它不一定是推荐的文件夹结构，加载器正在使用 babel 来动态转换 js 文件。您需要根据自己的需要对此进行微调。这里的目的是向您展示如何以尽可能少的步骤启动和运行。
回答by nikivancic
Check the article https://github.com/aurelia-guides/aurelia-guides.md-articles/blob/master/Building-Skeleton-Navigation-From-Scratch.mdwritten specifically to ease the introduction to Aurelia.
检查文章https://github.com/aurelia-guides/aurelia-guides.md-articles/blob/master/Building-Skeleton-Navigation-From-Scratch.md专门为简化对 Aurelia 的介绍而编写。
回答by martin
The Aurelia documentation has a really nice chapterthat explains what each part of a simple application does, one step at a time. It is probably a good start that do not overwhelm you with dependencies like Bootstrap and similar.
Aurelia 文档有一个非常好的章节，它解释了一个简单应用程序的每个部分的作用，一次一个步骤。这可能是一个良好的开端，不会让您因 Bootstrap 和类似的依赖项而不知所措。
Also note that there is now a CLI interfaceto Aurelia that simplifies setting up a project from scratch.
另请注意，现在有一个Aurelia的CLI 接口，可简化从头开始设置项目的过程。
回答by Nathan Chase
I created a repo (up to date as of April 2017) that includes the absolute barebones necessary items to run Aurelia at https://github.com/nathanchase/super-minimal-aurelia
我在https://github.com/nathanchase/super-minimal-aurelia创建了一个 repo（截至 2017 年 4 月），其中包括运行 Aurelia 所需的绝对准系统
It's an ES6-based Aurelia implementation (rather than Typescript), it incorporates code-splitting by routes (using the latest syntax in Aurelia's router to designate chunk creation according to files under a route), and it works in all evergreen browsers AND Internet Explorer 11, 10, and 9 thanks to a few necessary included polyfills.
它是一个基于 ES6 的 Aurelia 实现（而不是 Typescript），它结合了路由代码拆分（使用 Aurelia 路由器中的最新语法根据路由下的文件指定块创建），并且它适用于所有常绿浏览器和 Internet Explorer 11、10 和 9 多亏了一些必要的包含 polyfill。
回答by Johan O
I would definitely use the aurelia-cli for this.
我肯定会为此使用 aurelia-cli。
Do the following:
npm install -g aurelia-cli
请执行下列操作：
npm install -g aurelia-cli
Then to start a new project do:
au new project-name
然后开始一个新项目：
au new project-name
to run your project do:
au run --watch
要运行您的项目，请执行以下操作：
au run --watch
I really feel the aurelia-cli "is the future" for aurelia!
我真的觉得 aurelia-cli 对 aurelia 来说“是未来”！
回答by koppor
I'm working with a Java Play project and still want to use the scala conversion of HTML file. Thus, I did the following
我正在处理一个 Java Play 项目，但仍然想使用 HTML 文件的 scala 转换。因此，我做了以下
- Download
aurelia-coreavailable via the basic aurelia project, which is linked from the quickstart tutorial - Fetch SystemJSusing WebJars:
"org.webjars.npm" % "systemjs" % "0.19.38" - Since systemjs-plugin-babel is currently unavailable as webjar, I ran
npm install systemjs-plugin-babeland copied the fetched files to theassetsdirectroy
aurelia-core可通过基本 aurelia 项目下载，该项目链接自快速入门教程- 取SystemJS使用WebJars：
"org.webjars.npm" % "systemjs" % "0.19.38" - 由于systemjs-插件-巴贝尔目前为webjar不可用的，我跑
npm install systemjs-plugin-babel和复制获取文件到assetsdirectroy
The HTML code is like this:
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>
Use main.jsetc. from the quickstart tutorial
使用main.js从等快速入门教程
