Allow multiple bundles to be defined easily

Aaike commented 9 years ago

This is a suggestion to be able to define multiple bundles easily and have the cli create multiple bundles based on that definition:

"bundles" {
   "aurelia": {
        "aurelia-animator-css": "github:aurelia/animator-css@0.1.0",
        "aurelia-bootstrapper": "github:aurelia/bootstrapper@0.11.0",
        "aurelia-dependency-injection": "github:aurelia/dependency-injection@0.6.0",
        "aurelia-framework": "github:aurelia/framework@0.10.0",
        "aurelia-http-client": "github:aurelia/http-client@0.7.0",
        "aurelia-router": "github:aurelia/router@0.7.0"
    },
    "vendor": {
        "bootstrap": "github:twbs/bootstrap@3.3.4",
        "prism": "github:PrismJS/prism@master",
        "showdown": "github:showdownjs/showdown@0.4.0"
    },
    "app" : {
        "src" : "src/*",
        "value-converters" : "lib/value-converters/*",
        "widgets" : "lib/widgets/*"
    }
}

This definition could be saved in the package.json or in the Aureliafile.js for example.

That would generate 3 bundles when using aurelia-cli bundle , without the need for any extra parameters. One bundle containing all Aurelia components , one containing all vendor code, and one containing the code for the actual application.

This is just a thought, but i do think the need for users to define multiple bundles will get bigger as their applications get bigger.

Defining separate bundles can also allow the aurelia code and vendor code to be used as a bundled file during development because it is unlikely that the user will change any code in those bundles. only the application code can be left unbundled during development.

for production having separate bundles also means that the loading can be optimized as some bundles can be loaded after the initial start of the app.

plwalters commented 9 years ago

@ahmedshuhel I think we can support this using the interface defined in the -h command. We can use the arithmetic to add and remove from the bundle. Thoughts?

ahmedshuhel commented 9 years ago

It is supported this way now:

  aurelia.bundle({
    js: [{
      moduleExpression: 'aurelia-skeleton-navigation/* + other/a + yetanother/b',
      fileName: 'nav-app-build.js',
      options: {
        inject: true
      }
    }, {
      moduleExpression: 'aurelia-bootstrapper',
      fileName: 'aurelia-framework-build.js',
      options: {
        inject: true
      }
    }],
    template: {
      pattern: 'dist/*.html',
      outfile: 'bundle.html'
    }
  });

We can make it better though. How about:

aurelia.bundle({
  js: {
    app: {
      modules: [
        'aurelia-skeleton-navigation/*',
        'other/a',
        'other/b'
      ],
      options: {
        inject: true,
        // other jspm specific options
      }
    },
    aurelia: {
      modules: [
        'aurelia-bootstrapper',
        'aurelia-router',
        'aurelia-http-client'
      ],
      options: {
        inject: false
      }
    },
    vendor: {
      modules: [
        'github:twbs/bootstrap@3.3.4',
        'prism',
        'showdown'
      ],
      options: {
        inject: false
      }
    }
  },
  template: {
    app: {
      pattern: 'dist/*.html',
      inject : true,
    },
    thid_party: {
      pattern: 'thirdparty/*.html'
    }
  }
});

keys of every bundle definition will be the outfile name.

cc @EisenbergEffect

ahmedshuhel commented 9 years ago

This is already in the master branch.

aurelia / cli

Allow multiple bundles to be defined easily #20