How to set up minimal Aurelia project from scratch

前端 未结 6 660
猫巷女王i
猫巷女王i 2021-01-30 01:22

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 wh

相关标签:
6条回答
  • 2021-01-30 02:01

    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

    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.

    0 讨论(0)
  • 2021-01-30 02:04

    The Aurelia documentation has a really nice chapter that 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.

    Also note that there is now a CLI interface to Aurelia that simplifies setting up a project from scratch.

    0 讨论(0)
  • 2021-01-30 02:06

    I'm working with a Java Play project and still want to use the scala conversion of HTML file. Thus, I did the following

    1. Download aurelia-core available via the basic aurelia project, which is linked from the quickstart tutorial
    2. Fetch SystemJS using WebJars: "org.webjars.npm" % "systemjs" % "0.19.38"
    3. Since systemjs-plugin-babel is currently unavailable as webjar, I ran npm install systemjs-plugin-babel and copied the fetched files to the assets directroy

    The HTML code is like this:

    <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.js etc. from the quickstart tutorial

    0 讨论(0)
  • 2021-01-30 02:17

    Check the article https://github.com/aurelia-guides/aurelia-guides.md-articles/blob/master/Building-Skeleton-Navigation-From-Scratch.md written specifically to ease the introduction to Aurelia.

    0 讨论(0)
  • 2021-01-30 02:17

    I would definitely use the aurelia-cli for this.

    Do the following: npm install -g aurelia-cli

    Then to start a new project do: au new project-name

    to run your project do: au run --watch

    I really feel the aurelia-cli "is the future" for aurelia!

    0 讨论(0)
  • 2021-01-30 02:18

    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
    

    Initialize jspm client package management... Accept all the defaults EXCEPT use the Babel transpiler option (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 init created the config.js file):

    System.config({
      defaultJSExtensions: true,
      transpiler: "babel",
      babelOptions: {
        "stage": 0,      <------ add this to turn on the hotness
        "optional": [
          "runtime"
        ]
      },
      ...
    

    Install 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.

    <!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:

    app.js

    export class App {
      message = 'hello world';
    }
    

    app.html

    <template>
      ${message}
    </template>
    

    Install gulp and browser-sync to serve the files:

    npm install gulp
    npm install --save-dev browser-sync
    

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

    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:

    project

    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.

    0 讨论(0)
提交回复
热议问题