aurelia / bundler Goto Github PK

A library for bundling JavaScript, HTML and CSS for use with SystemJS.

License: MIT License

TypeScript 99.86% HTML 0.14%

bundler's Introduction

Aurelia 2

This is the Aurelia 2 monorepo, containing core and plugin packages, examples, benchmarks, and documentation for the upcoming major version of everybody's favorite modern JavaScript framework, Aurelia.

Introduction

Aurelia is a modern, front-end JavaScript framework for building browser, mobile, and desktop applications. It focuses on aligning closely with web platform specifications, using convention over configuration, and having minimal framework intrusion. Basically, we want you to just write your code without the framework getting in your way. 😉

Aurelia applications are built by composing a series of simple components. By convention, components are made up of a vanilla JavaScript or Typescript class, with a corresponding HTML template.

//app.js
export class App {
  welcome = "Welcome to Aurelia";

  quests = [
    "To seek the holy grail",
    "To take the ring to Mordor",
    "To rescue princess Leia"
  ];
}

<!-- app.html -->
<form>
  <label>
    <span>What is your name?</span>
    <input value.bind="name & debounce:500">
  </label>

  <label>
    <span>What is your quest?</span>
    <select value.bind="quest">
      <option></option>
      <option repeat.for="q of quests">${q}</option>
    </select>
  </label>
</form>

<p if.bind="name">${welcome}, ${name}!</p>
<p if.bind="quest">Now set forth ${quest.toLowerCase()}!</p>

This example shows you some of the powerful features of the aurelia binding syntax. To learn further, please see our documentation.

Feeling excited? Check out how to use makes to get started in the next section.

Note: Please keep in mind that Aurelia 2 is still in beta. A number of features and use cases around the public API are still untested and there will be a few more breaking changes.

Getting Started

First, ensure that you have Node.js v8.9.0 or above installed on your system. Next, using npx, a tool distributed as part of Node.js, we'll create a new Aurelia 2 app. At a command prompt, run the following command:

npx makes aurelia

This will cause npx to download the makes scaffolding tool, along with the aurelia generator, which it will use to guide you through the setup process. Once complete, you'll have a new Aurelia 2 project ready to run. For more information on Aurelia's use of makes, see here. If you aren't interested in taking our preferred approach to generating a project, you can also see the examples folder in this repo for pure JIT setups (no conventions) with various loaders and bundlers.

Documentation

You can read the documentation on Aurelia 2 here. Our new docs are currently a work-in-progress, so the most complete documentation is available in our getting started section. If you've never used Aurelia before, you'll want to begin with our Quick Start Guide.

Contributing

If you are interested in contributing to Aurelia, please see our contributor documentation for more information. You'll learn how to build the code and run tests, how best to engage in our social channels, how to submit PRs, and even how to contribute to our documentation. We welcome you and thank you in advance for joining with us in this endeavor.

Staying Up-to-Date

To keep up to date on Aurelia, please visit and subscribe to the official blog and our email list. We also invite you to follow us on twitter. If you have questions, have a look around our Discourse forum. For chat on Aurelia 2, join our new Aurelia 2 community on Discord. If you'd like to join the growing list of Aurelia sponsors, please back us on Open Collective.

License

Aurelia is MIT licensed. You can find out more and read the license document here.

bundler's People

Stargazers

Watchers

bundler's Issues

Excludes option

Is there any way to exclude files or folders to be bundled?

Bundling issues with latest jspm versions?

Are there issues with bundling and the latest versions of jspm?

After updating to jspm 0.16.6 (or the current 0.16.8) the time to bundle is less than half but I get the following error message twice: builder.buildTree is deprecated. Using builder.bundle instead, which takes both a tree object or expression string., and when running the application font-awesome doen't seem to get loaded (it's just squares instead of icons).

After reverting to 0.16.2 I don't get any deprecation warnings and the app works.

With the old version that works, the first lines in my aurelia bundle in config.js looks like this:

      "npm:[email protected]",
      "github:systemjs/[email protected]",
      "github:systemjs/[email protected]/css",

With the newer versions it looks like this:

      "npm:[email protected]",
      "npm:[email protected]/css/font-awesome.css!github:systemjs/[email protected]"

(actually plugin-css is up to 0.1.17, but it doesn't make any difference either way)

Do I need to change anything or has there been a breaking change in jspm which isn't yet reflected in aurelia-bundler?

I'm using VS2015/TypeScript and IIS Express, so I have a slightly different setup than the skeleton, but I'm trying to stay close to the skeleton bundling and as I saíd it still works in older jspm versions.

For reference I paste my build.js file below if that may be of interest:

var gulp = require("gulp");
var bundler = require("aurelia-bundler");

var config = {
    force: true,
    packagePath: ".",
    bundles: {
        "app/app-build": {
            includes: [
              "views/**/*",
              "*views/**/*.html!text"
            ],
            excludes: [
              "npm:core-js",
              "github:aurelia/framework",
              "github:aurelia/event-aggregator",
              "aurelia-fetch-client",
              "fetch",
              "github:aurelia/logging",
              "github:aurelia/dependency-injection",
              "aurelia-router",
              "github:aurelia/i18n"
            ],
            options: {
                inject: true,
                minify: true
            }
        },
        "app/aurelia": {
            includes: [
              "aurelia-bootstrapper",
              "aurelia-fetch-client",
              "fetch",
              "aurelia-router",
              "github:aurelia/loader-default",
              "github:aurelia/templating-binding",
              "github:aurelia/templating-resources",
              "github:aurelia/templating-router",
              "github:aurelia/route-recognizer",
              "github:aurelia/history",
              "github:aurelia/history-browser",
              "github:aurelia/i18n",
              "github:aurelia/logging-console",
              "github:oribella/aurelia-sortable",
              "github:oribella/default-gestures",
              "github:oribella/doubletap",
              "github:oribella/[email protected]",
              "github:oribella/longtap-swipe",
              "github:oribella/pinch",
              "github:oribella/rotate",
              "github:oribella/swipe",
              "github:oribella/tap",
              "npm:font-awesome"
            ],
            options: {
                inject: true,
                minify: true
            }
        }
    }
};

gulp.task("bundle", function () {
    return bundler.bundle(config);
});

gulp.task("unbundle", function () {
    return bundler.unbundle(config);
});

Error when output directory is missing

When the output directory does not exist I get the following error Error: ENOENT: no such file or directory, open 'd:\dev\repo\some_project\some_module\dist\bundles\vendors\aurelia.js'. I have to check if the folders exist, and create them if necessary, before bundling.

Shared dependency de-duplication

Is there a way to prevent library duplication across bundled files? For example, If I'm using TweenMax in more than one bundle the entire GSAP library gets compiled into each bundle. Would be amazing if there were functionality that would allow shared dependent libraries to be broken off into a commons.js bundle.

I realize this would be possible if I explicitly declared exactly what and what is compiled into each bundle but this defeats the whole lovely automagic dependency tree traversal.

Thank you!

Support in-memory transformations

It'd be great if the bundler could support in-memory operations so the consumer can control the file read/writes, minification, etc. That would make it easier to integrate well with stream-based tools like gulp.

Upgrading to November Aurelia release broke bundling

I have the following bundling config:

var config = {
        force: true,
        packagePath: "",
        bundles: {
            "dist/app-build": {
                "includes": [
                  "main",
                  "**/*.html!text",
                  "**/*.css!text",
                  "**/*",
                  "polymer/mutationobservers",
                  "aurelia-bootstrapper",
                  "aurelia-framework",
                  "aurelia-templating-binding",
                  "aurelia-templating-resources",
                  "aurelia-templating-router",
                  "aurelia-loader-default",
                  "aurelia-history-browser",
                  "aurelia-logging-console",
                  "aurelia-validation/resources/en-US"
                ],
                "options": {
                    "inject": true,
                    "minify": true,
                    "sourceMaps": true
                }
            }
        }
    };

and a package.json of:

{
  "jspm": {
    "dependencies": {
      "aurelia-bootstrapper": "github:aurelia/bootstrapper@^0.19.0",
      "aurelia-event-aggregator": "github:aurelia/event-aggregator@^0.10.0",
      "aurelia-fetch-client": "github:aurelia/fetch-client@^0.4.0",
      "aurelia-framework": "github:aurelia/framework@^0.18.0",
      "aurelia-history-browser": "github:aurelia/history-browser@^0.10.0",
      "aurelia-http-client": "github:aurelia/http-client@^0.13.0",
      "aurelia-loader-default": "github:aurelia/loader-default@^0.12.0",
      "aurelia-logging": "github:aurelia/logging@^0.9.0",
      "aurelia-logging-console": "github:aurelia/logging-console@^0.9.0",
      "aurelia-router": "github:aurelia/router@^0.14.0",
      "aurelia-task-queue": "github:aurelia/task-queue@^0.9.0",
      "aurelia-templating-binding": "github:aurelia/templating-binding@^0.17.0",
      "aurelia-templating-resources": "github:aurelia/templating-resources@^0.17.0",
      "aurelia-templating-router": "github:aurelia/templating-router@^0.18.0",
      "aurelia-validation": "github:aurelia/validation@^0.4.1",
      "bootstrap": "github:twbs/bootstrap@^3.3.5",
      "css": "github:systemjs/plugin-css@^0.1.19",
      "dragula": "npm:dragula@^3.5.3",
      "fetch": "github:github/fetch@^0.10.1",
      "font-awesome": "npm:font-awesome@^4.4.0",
      "highcharts": "npm:highcharts-release@^4.1.9",
      "jquery": "github:components/jquery@^2.1.4",
      "lodash": "npm:lodash@^3.10.1",
      "lolliclock": "github:philiphendry/lolliclock@^0.1.0",
      "moment": "npm:moment@^2.10.6",
      "philiphendry/lolliclock": "github:philiphendry/lolliclock@^0.1.0",
      "polymer/mutationobservers": "github:polymer/mutationobservers@^0.4.2",
      "sanitize-html": "npm:sanitize-html@^1.11.1",
      "sweetalert": "github:t4t5/sweetalert@^1.1.3",
      "text": "github:systemjs/plugin-text@^0.0.3",
      "toastr": "github:codeseven/toastr@^2.1.2"
    },
    "devDependencies": {
      "babel": "npm:babel-core@^5.8.24",
      "babel-runtime": "npm:babel-runtime@^5.8.24",
      "clean-css": "npm:clean-css@^3.4.6",
      "core-js": "npm:[email protected]"
    },
    "overrides": {
      "npm:[email protected]": {
        "main": "highcharts"
      }
    }
  },
  "devDependencies": {
    "aurelia-bundler": "^0.1.8",
    "aurelia-tools": "^0.1.14",
    "del": "^2.0.2",
    "gulp": "^3.9.0",
    "gulp-babel": "^5.3.0",
    "gulp-changed": "^1.3.0",
    "gulp-notify": "^2.2.0",
    "gulp-plumber": "^1.0.1",
    "gulp-sourcemaps": "^1.6.0",
    "jspm": "^0.16.14",
    "object.assign": "^4.0.3",
    "require-dir": "^0.3.0",
    "run-sequence": "^1.1.4",
    "vinyl-paths": "^2.0.0"
  },
  "dependencies": {},
}

but now when I run my bundling it fails with the following error:

> gulp bundle
[08:36:49] Using gulpfile \gulpfile.js
[08:36:49] Starting 'bundle'...
[08:36:53] 'bundle' errored after 3.94 s
[08:36:53] TypeError: Cannot read property 'forEach' of undefined
    at Trace.getLoadDependencies (\node_modules\systemjs-builder\lib\trace.js:681:12)
    at traverseTree (\node_modules\systemjs-builder\lib\arithmetic.js:229:5)
    at \node_modules\systemjs-builder\lib\arithmetic.js:231:9
    at Array.forEach (native)
    at traverseTree (\node_modules\systemjs-builder\lib\arithmetic.js:229:34)
    at \node_modules\systemjs-builder\lib\compile.js:131:5
    at Array.forEach (native)
    at getTreeModulesReversePreOrder (\node_modules\systemjs-builder\lib\compile.js:130:14)
    at compileTree (\node_modules\systemjs-builder\lib\compile.js:171:17)
    at \node_modules\systemjs-builder\lib\builder.js:484:12
    at lib$rsvp$$internal$$tryCatch (\node_modules\rsvp\dist\rsvp.js:493:16)
    at lib$rsvp$$internal$$invokeCallback (\node_modules\rsvp\dist\rsvp.js:505:17)
    at lib$rsvp$$internal$$publish (\node_modules\rsvp\dist\rsvp.js:476:11)
    at lib$rsvp$asap$$flush (\node_modules\rsvp\dist\rsvp.js:1198:9)
    at doNTCallback0 (node.js:417:9)
    at process._tickCallback (node.js:346:13)

I thought that my jspm was out-of-date but that appears to be in order. Other than that I'm a little clueless where to take this. I've raised it here rather than against SystemJS since I'm running through aurelia-bundler which was working before upgrading other aurelia components.

Stable ordering for bundle

I've noticed that with no relevant changes, files are rearranged in config.js.

For better or for worse, I'm pushing bundles through git at the moment and it shows up as needless diffs. At any rate, it would be nice to see "real diffs" as opposed to random file reshuffles.

Thoughts?

App bundle including Aurelia modules

So the latest blog post demonstrates how to create two bundles, one for the app and one for Aurelia, along the lines of this:

var config = {  
  ...
  bundles: {
    "dist/app-build": {
      includes: [
        '*',
        ...
      ],
      ...
    },
    "dist/aurelia": {
      includes: [
        'aurelia-bootstrapper',
        'aurelia-fetch-client',
        ...
      ],
      ...
    }
  }
};

What I'm running into is that when the app is bundled, the bundler tries to walk the Aurelia modules and fails with the following error:

Error on fetch for aurelia-framework at file:///Volumes/Data/Temp/aurelia-bundle-error/app/aurelia-framework.js
    Error: ENOENT, open '/Volumes/Data/Temp/aurelia-bundle-error/app/aurelia-framework.js'
    at Error (native)

Where the app.js looks like this:

var framework = require('aurelia-framework');
...

I found I could limit the scope of the app bundle by using the module syntax as described here:

var config = {  
  ...
  bundles: {
    "dist/app-build": {
      includes: [
        '[*]',
        ...
      ],
      ...
    },
    ...
};

Anyways, I'm wondering if I'm doing something wrong, something has changed or if the blog post is not right. I pushed a repo that demonstrates this here.

Thx for all the help BTW. Aurelia rocks!

Can't get bundler to look at correct location for jspm_packages

I am trying to bundle a very basic sample app. Here is screenshot of the folder/file structure with relevant files highlighted for reference:

Here is the relevant part of my gulpfile.js:

var bundleConfig = {
    force: true,
    baseUrl: './wwwroot',
    configPath: './wwwroot/config.js',
    bundles: {
        "with/with-app": {
            includes: [
              '*',
              '*.html!text',
              '*.css!text'
            ],
            options: {
                inject: true,
                minify: true
            }
        },
        "aurelia": {
            includes: [
                "aurelia-framework",
                "aurelia-bootstrapper",
                "aurelia-fetch-client",
                "aurelia-router",
                "aurelia-animator-css",
                "aurelia-templating-binding",
                "aurelia-templating-resources",
                "aurelia-templating-router",
                "aurelia-loader-default",
                "aurelia-history-browser",
                "aurelia-logging-console",
                "bootstrap",
                "bootstrap/css/bootstrap.css!text"
            ],
            options: {
                inject: true,
                minify: true,
                rev: true
            }
        }
    }
};

gulp.task('bundle', function () {
    return bundler.bundle(bundleConfig);
});

When I run gulp bundle I get the following error:

[09:33:23] Error on fetch for npm:[email protected] at file:///C:/Users/Chris Knight/Source/Repos/WhyIsThisHard/With.App/jspm_packages/npm/[email protected]
        Error: ENOENT, open 'C:\Users\ChrisKnight\Source\Repos\WhyIsThisHard\With.App\jspm_packages\npm\[email protected]'
    at Error (native)

As you can see from the error message, it is looking for the jspm_packages folder at the ....\With.App path rather than at the ....\With.App\wwwroot path. I tried changing various settings but am having difficulty figuring this out.

Any ideas on next steps? Am I doing something wrong? Thanks for any help you can provide.

Documentation/instructions

This is the huge issue with entire Aurelia ecosystem unfortunately, but would it make sense to provide at least minimal documentation/guide in README.md about how to use bundler, what commands are available, etc. Otherwise, one needs to google for instructions somewhere else, without knowing if the info is still related to recent version of the lib. Or browse the source code. In either way it doesn't make it easy to work with framework.

TypeError: needs a 'context' argument when using version 0.2.1

Hi,

I just upgraded to version 0.2.1 and I keep getting the error TypeError: needs a 'context' argument unless I change the function readConfig in the file config-serializer.js as follow:

var ctx = vm.createContext(sandbox);
vm.runInContext(cfgCode, ctx); // I changed the second parameter from sandbox to ctx
return sandbox.System.cfg;

A better way to bundle all the required libraries?

It is somewhat involving and annoying to me that we have to specify the library packages so specifically for bundling.

I think it would be great if bundler could read the config.json for library dependencies, and automatically include all the libs (incl .html and .css (related ticket #17)).

When creating a bundle and then using gulp watch your dist folder is cleaned out

So I've spent the past 3 hours trying to figure out why I couldn't get gulp bundle to work properly.

After struggling with just executing the task, I finally got gulp bundle to run. And then I would try to see if it worked, I would get a 404 on aurelia.js.

The solution was hosting in IIS, and not using gulp watch to host my aurelia app. Then after I did gulp bundle, I could see my site without gulp watch.

I'm not sure what the solution would be here, but it was super frusterating at very least some better documentation around bundling would be awesome.

thanks!

Missing text.js

Bundle fails with following messages:

[23:40:44] Using gulpfile ~/Documents/Projects/frank.ventures.aurelia/gulpfile.js
[23:40:44] Starting 'bundle'...
[23:40:44] 'bundle' errored after 430 ms
[23:40:44] Error: ENOENT: no such file or directory, open '/home/user/folder/dist/text.js'
    at Error (native)
    Error loading file:///home/user/folder/dist/text.js

I have almost standard navigation app withour bootstrap so I commented out line 'bootstrap/css/bootstrap.css!text' in bundle.js file.

Ivan

Aurelia plugin bundle configuration.

Can Aurelia plugins expose their bundle configuration via package.json like jspm dependencies.

cc @EisenbergEffect

Bundler not working with latest release

I'm having some really strange issues with the bundler. Here's my task:

var gulp = require('gulp');  
var bundler = require('aurelia-bundler');

var config = {  
  force: true,
  packagePath: '.',
  bundles: {
    "dist/app-bundle": {
      includes: [
        '*',
        '*.html!text',
        '*.css!text',
        'aurelia-bootstrapper',
        'aurelia-http-client',
        'aurelia-router',
        'aurelia-templating-binding',
        'aurelia-templating-resources',
        'aurelia-templating-router',
        'aurelia-loader-default',
        'aurelia-history-browser',
        'webcomponents-html-imports'
      ],
      options: {
        inject: true,
        minify: true
      }
    }
  }
};

gulp.task('aurelia-bundle', function() {  
 return bundler.bundle(config);
});

gulp.task('aurelia-unbundle', function() {  
 return bundler.unbundle(config);
});

When I run this, I get this error:

Error: EISDIR, read
    at Error (native)
        Error loading file:///C:/Proj/jspm_packages/github/systemjs/[email protected]

I have already run jspm install text and the module was installed correctly.

I went to my config.js file and added /text.js to the end of the path for "text", just to see what would happen. Now I'm getting this error:

Error on fetch for aurelia-cli at file:///C:/Proj/aurelia-cli 
Error: ENOENT, open 'C:\Proj\aurelia-cli' at Error (native)

There appear to be two issues:

It's trying to load the [email protected] directory as a file, rather than loading the [email protected] file.
It's attempting to use aurelia-cli for something in the bundle process, but it shouldn't since the cli is deprecated

As it is, I am unable to build using the new aurelia-bundler.

Run `unbundle` before bundling.

It is almost always a good practice to run unbundle before bundling. The existing bundle injection and depCache should be cleared from config.js.

bundler uses different formatting for compared to `jspm install`

Problem

bundler formats config.js differently compared to jspm install or update - git history is screwed. #54

Differences:

JSPM doesn't quote top-level keys in config.
Result after jspm update

System.config({
  defaultJSExtensions: true,
  transpiler: "babel",
  babelOptions: {
    "optional": [
      "es7.decorators",
      "es7.classProperties"
    ]
  },

vs
result after gulp bundle

System.config({
  "defaultJSExtensions": true,
  "transpiler": "babel",
  "babelOptions": {
    "optional": [
      "es7.decorators",
      "es7.classProperties"
    ]
  },

Suggestion

It would be nice if this format could be configured, so that git history would remain readable (without too much effort)

Detect dependencies automatically.

As some of Aurelia Loader dynamically loads some of the libraries. It is hard/not possible for the module loader to detect the dependencies by static analysis of source.

Can we make this a little better?

Idea:

Bundler can maintain a Dictionary<regexp, dependency>
We can write some reasonably good regexps.
Before bundling view/module, we can search/analyze and find all the hidden deps and fed them to systemjs-builder

cc @EisenbergEffect

Bundled HTML Templates not being used in Compose binding

I've noticed that when I use an compose binding such as this:

The HTML is being requested from the server as opposed to being pulled from the bundle. I've confirmed that the view is included in config.js as part of the bundle ("blog/views/detail.html!github:systemjs/[email protected]")

Bundle failure when no options passed

If I remove the options a la:

var gulp = require('gulp');
var bundler = require('aurelia-bundler');

gulp.task('bundle', function() {
    return bundler.bundle({
        force: true,
        packagePath: '.',
        bundles: {
            "dist/app": {
                includes: [
                    '*'
                ],
                // options: {
                //     inject: true,
                //     minify: true
                // }
            }
        }
    });
});

Bundle fails as follows:

TypeError: Cannot set property 'force' of undefined
    at _bundle (/Volumes/Data/Temp/aurelia-bundle-error/node_modules/aurelia-bundler/dist/index.js:73:13)
    at /Volumes/Data/Temp/aurelia-bundle-error/node_modules/aurelia-bundler/dist/index.js:56:18
    at Array.forEach (native)
    at Object.bundle (/Volumes/Data/Temp/aurelia-bundle-error/node_modules/aurelia-bundler/dist/index.js:49:25)
    at Gulp.<anonymous> (/Volumes/Data/Temp/aurelia-bundle-error/gulpfile.js:5:20)
    at module.exports (/Volumes/Data/Temp/aurelia-bundle-error/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:34:7)
    at Gulp.Orchestrator._runTask (/Volumes/Data/Temp/aurelia-bundle-error/node_modules/gulp/node_modules/orchestrator/index.js:273:3)
    at Gulp.Orchestrator._runStep (/Volumes/Data/Temp/aurelia-bundle-error/node_modules/gulp/node_modules/orchestrator/index.js:214:10)
    at Gulp.Orchestrator.start (/Volumes/Data/Temp/aurelia-bundle-error/node_modules/gulp/node_modules/orchestrator/index.js:134:8)
    at /usr/local/share/npm/lib/node_modules/gulp/bin/gulp.js:129:20
    at process._tickCallback (node.js:355:11)
    at Function.Module.runMain (module.js:503:11)
    at startup (node.js:129:16)
    at node.js:814:3

Is the config object required or is this a bug?

Bundling oddities

Hello,

I've been trying to get bundling to work for the past day or two, and found some oddities.

First off

It looks like you need to build before running bundle. I've made a PR that takes care of this.

Secondly

The current bundle task has two bundles defined. I've found the bundler to be clever enough to pull together most bundles for me. This causes the bundler to create two bundled files, with duplicate modules amongst them, resulting in an unneeded large file. I've found having a single bundle to be significantly smaller than two of them (combined in size). Perhaps we should mention this somewhere?

Third...ly?

It looks like the bundler doesn't work well with all deps. I've had to define a lot of things manually in order to get it to work and bundle everything I need. To illustrate this, here's my current list of includes for my app-bundle:

[
  'login.js',
  'login.html!text',
  'app.js',
  'app.html!text',
  '*/**/*.js',
  '*.js',
  '*.html',
  '*/**/*.html!text',
  'npm:[email protected]/css/font-awesome.min.css!text',
  '*/**/*.css!text',
  'aurelia-bootstrapper',
  'aurelia-fetch-client',
  'aurelia-router',
  'github:aurelia/templating-binding',
  'github:aurelia/i18n',
  'github:paulvanbladel/[email protected]',
  'github:paulvanbladel/[email protected]/authFilter',
  'github:aurelia/templating-resources',
  'github:aurelia/templating-router',
  'github:aurelia/loader-default',
  'github:aurelia/history-browser'
]

Fourth..ly... I don't know.

It looks like there's something weird going on with dependencies defined for my bundle that are not from aurelia. I've found this issue that might have something to do with it. Example, I have to specify 'github:paulvanbladel/[email protected]' as a dependency because otherwise the bundler starts complaining. Sidenote on this one, I had to specify 'github:paulvanbladel/[email protected]/authFilter' manually because it didn't seem to pull that in automatically with 'github:paulvanbladel/[email protected]'.

Finally, I've tried using this module: https://www.npmjs.com/package/qs. The bundler goes mental when I try to use it though. It says:

[13:21:42] Error: Unexpected token name «i», expected punc «;» (line: 22, col: 13, pos: 693)

This line, is a let definition. I'm not sure what goes wrong here.

Add file versioning ability

from: aurelia/cli#113

Wanted to make sure we didn't lose this request in the tools switch.

CSS imports not working properly

Hi,

I'm trying to bundle my app into a single bundle, including all html, css and js files. So far, I've managed to build the bundle with this configuration:

{
  "bundles": {
    "dist/aurelia": {
      "includes": [
        "aurelia-framework",
        "aurelia-bootstrapper",
        "aurelia-http-client",
        "aurelia-router",
        "aurelia-i18n",
        "aurelia-animator-css",
        "aurelia-templating-binding",
        "aurelia-templating-resources",
        "aurelia-templating-router",
        "aurelia-loader-default",
        "aurelia-history-browser",
        "aurelia-logging-console",
        "bootstrap",
        "moment",
        "text",
        "css",
        "*/**/*",
        "*/**/*.html!text",
        "*/**/*.css!text",
        "bootstrap/css/bootstrap.min.css!text",
        "font-awesome/css/font-awesome.min.css!text"
      ],
      "options": {
        "inject": true,
        "minify": true
      }
    }
  }
}

In my main.ts file, I have the imports for the bootstrap and font-awesome css:

import 'bootstrap/css/bootstrap.min.css!';
import 'font-awesome/css/font-awesome.min.css!';

but when running my app, those css are loaded from the jspm_packages instead from the bundle... I'm quite lost here since I would like to have a single bundle to decrease as much as possible the number of files downloaded from the server.

I don't know what I'm missing... any clue?

thanks!!

Package names that start the same confuse the bundler

The bundler config.js is below. The error is Error: Version conflict found in module names specified in configuration for 'aurelia-history'. Try including a specific version or resolve the conflict manually with jspm.

Looking under the hood, in getFullModuleName, it's just checking to see if two packages start with the same name. ~~I think it should check to see if the package name exists after removing the version number.~~ It's just checking to see if a package exists without the repo prefix? Ex: aurelia-history should match github:aurelia-history?

{
 "force": true,
 "packagePath": ".",
 "bundles": {
  "src/app.bundle": {
   "includes": [
    "*",
    "*.html!text",
    "*.css!text"
   ],
   "options": {
    "inject": true,
    "minify": true
   }
  },
  "src/vendor.bundle": {
   "includes": [
    "fetch",
    "text"
   ],
   "options": {
    "inject": true,
    "minify": true
   }
  },
  "src/aurelia.bundle": {
   "includes": [
    "aurelia-animator-css",
    "aurelia-binding",
    "aurelia-bootstrapper",
    "aurelia-dependency-injection",
    "aurelia-event-aggregator",
    "aurelia-fetch-client",
    "aurelia-framework",
    "aurelia-history",
    "aurelia-history-browser",
    "aurelia-loader",
    "aurelia-loader-default",
    "aurelia-logging",
    "aurelia-metadata",
    "aurelia-path",
    "aurelia-route-recognizer",
    "aurelia-router",
    "aurelia-task-queue",
    "aurelia-templating",
    "aurelia-templating-binding",
    "aurelia-templating-resources",
    "aurelia-templating-router",
    "github:aurelia/logging-console"
   ],
   "options": {
    "inject": true,
    "minify": true
   }
  }
 }
}

Minifying Views does not work

View-Templates are not minified during bundling, even though minify is set to true.

Regression in 0.1.8

Working bundle in 0.1.7, starting with 0.1.8 causes the error:

throw new Error('Version conflict found in module names specified in configuration for '' + moduleName + ''. Try including a specific version or resolve the conflict manually with jspm');

Reason is config.js has 2 entries in its map:

"jquery-form": "npm:[email protected]",

and

"npm:[email protected]": {
"jquery": "npm:[email protected]",
"process": "github:jspm/[email protected]"
},

Debugging shows the new regular expressions are causing the two to appear the same starting in 0.1.8.

moduleName jquery-form
plainPackageName jquery-form

m jquery-form
strippedName jquery-form
plainPackageName jquery-form

m npm:[email protected]
strippedName jquery-form
plainPackageName jquery-form

bundler fails to resolve imports using src/

I have an app which uses a pretty standard nested directory structure, using paths like src/app.js, src/pages/user/list.js, src/pages/user/detail.js, etc. There is utility code directly in src.

I initially tried to import the utility code directly. For example src/pages/user/list.js used import {MyAPI} from 'api'; to load the API wrapper from src/api.js. This fails when you use karma: since karma uses itself as the root this will end up trying to load /base/api.js instead of /base/src/api.js.

After a tip from @sujesharukil I modified my code to use import {MyAPI} from 'src/api';. This fixed indeed all problems with karma. But that change broke the bundler. The bundler now tries to load dist/src/api.js, which does not exist: the correct path is dist/api.js.

While I am not quite happy with having to use src/* in my imports (a way to create an alias there would be a nice improvement), that does feel technically solid. My gut feeling is that the bundler is at fault here, so I'm submitting this ticket here.

Errors executing my project after bundle

I have a custom bundle.js file. You can see in that plunk: http://plnkr.co/edit/1HbxsRMjpW9FcF1UtaSQ?p=preview

I execute gulp bundle and the process ends correctly. Then I get a deploy folder. When I load index.html I get errors:

Error: Access to restricted URI denied Error loading file:///.../jspm_packages/npm/[email protected]/resources/en-US.js

the same for aurelia-dialog and font-awesome.

My bundle file, is different to the skeleton-navigator, but I think that is correct and don't undestand why I get that errors.

Unable to use the Bundle command in a very simple demo app

I can't make the bundle command to work
here's the stack

C:\Users\miguel.bernard\Documents\Visual Studio 2015\Projects\WebApplication6\WebApplication6>aurelia bundle
info: Creating bundle ...
C:\Users\miguel.bernard\Documents\Visual Studio 2015\Projects\WebApplication6\WebApplication6\node_modules\aurelia-cli\dist\lib\bundler\js-bundler.js:73
var moduleExpression = modules.map(function (m) {
                            ^
TypeError: Cannot read property 'map' of undefined
    at bundleJS (C:\Users\miguel.bernard\Documents\Visual Studio 2015\Projects\WebApplication6\WebApplication6\node_modules\aurelia-cli\dist\lib\bundler\js-bundler.js:73:33)
    at C:\Users\miguel.bernard\Documents\Visual Studio 2015\Projects\WebApplication6\WebApplication6\node_modules\aurelia-cli\dist\lib\bundler\index.js:29:29
    at Array.forEach (native)
    at bundle (C:\Users\miguel.bernard\Documents\Visual Studio 2015\Projects\WebApplication6\WebApplication6\node_modules\aurelia-cli\dist\lib\bundler\index.js:21:26)
    at BundleCommand.action (C:\Users\miguel.bernard\Documents\Visual Studio 2015\Projects\WebApplication6\WebApplication6\node_modules\aurelia-cli\dist\commands\bundle\index.js:45:35)
    at Command.listener (C:\Users\miguel.bernard\Documents\Visual Studio 2015\Projects\WebApplication6\WebApplication6\node_modules\aurelia-cli\node_modules\commander\index.js:301:8)
    at Command.emit (events.js:110:17)
    at Command.parseArgs (C:\Users\miguel.bernard\Documents\Visual Studio 2015\Projects\WebApplication6\WebApplication6\node_modules\aurelia-cli\node_modules\commander\index.js:610:12)
    at Command.parse (C:\Users\miguel.bernard\Documents\Visual Studio 2015\Projects\WebApplication6\WebApplication6\node_modules\aurelia-cli\node_modules\commander\index.js:458:21)
    at Aurelia.run (C:\Users\miguel.bernard\Documents\Visual Studio 2015\Projects\WebApplication6\WebApplication6\node_modules\aurelia-cli\dist\index.js:122:30)
    at C:\Users\miguel.bernard\AppData\Roaming\npm\node_modules\aurelia-cli\bin\aurelia.js:77:13
    at process._tickCallback (node.js:355:11)
    at Function.Module.runMain (module.js:503:11)
    at startup (node.js:129:16)
    at node.js:814:3

and here's my aureliaFile

var aurelia = require("aurelia-cli");

aurelia.command("bundle", {
    js: {
        "appbundle": {
            module: [
                "aurelia-bootstrapper",
                "aurelia-framework"
            ],
            options: {
                inject:true
            }
        }
    }
})

How Can I bundle all my plugin css files ?

Hi, I want to remove all my css links from index.html in my app developed by aurelia framework. I created a vendor.js file using bundler, but how can I make it to use in my app. Or else tell me any other solution to make all my css links come with a bundles solution.

Template bundling injected link doesn't respect baseURL

aurelia/cli#157

minifying bundles with html seems to not being working

Hi,

Sometimes, when trying to create a bundle with *.html!text with the minify option set to true casues some errors on views. In some cases, several views cannot be loaded or in other cases views are not correct, in example, I've seen some views not showing texts in buttons.

How do we include .html and .css files from aurelia packages?

Like aurelia-dialog, or aurelia-bs-modal etc?

Bundling dist folder only

Hi,

I'd like to create 2 bundles, one containing the app named app-bundle and the other one containing aurelia plugins and other libraries.
I've created a bundle configuration as follows:
var config

var config ={
     force: true,
     packagePath: '.',
    bundles:[
      "dist/app-bundle":{
         includes: [
         "*/**/*",
        "*/**/*.html!text",
        ],
      options:{
        inject: true,
        minify: false
      }
     },
    "dist/aurelia-bundle":{
       includes: [
       "jquery",
       "aurelia-framework",
      "aurelia-http-client",
       "aurelia-route-recognizer",
        'aurelia-task-queue',
        'aurelia-bootstrapper',
        'aurelia-http-client',
        'aurelia-router',
       blah, blah, blah,
       ],
      options: {
        inject: true,
        minify: true
      }
      }
]
}

I'd expect app-bundle containing only modules within the dist folder. However it seems it's bundling everything. I can see in the config.js file that app-bundle contains jquery, aurelia plugins and all the third party libs

Error: Module aurelia-framework not declared as a dependency

aurelia-application-configuration.ts.zip
I have a working application. I have attempted to bundle the application using two bundles. I can see the two bundles being loaded
localhost.zip

but I then receive

I checked the bundled files and all seems well so I am not clear what I am missing.
I attach various files
Archive.zip

bundles.zip

Gulp task finishes before bundle files are written

As far as I can see, the gulp bundle task finishes and returns a few seconds before the bundle files are written and config.js updated.

gulp.task('bundle', function() {  
  return bundle(config);
});

gulpfile d:\WebstormProjects\aurelia-starter-kit\Gulpfile.js run-bundler
[00:10:00] Using gulpfile d:\WebstormProjects\aurelia-starter-kit\Gulpfile.js
[00:10:00] Starting 'run-bundler'...
[00:10:00] Finished 'run-bundler' after 529 ms

Process finished with exit code 0

Takes maybe 3 or 4 seconds for the files to appear after the task exits. That makes things a bit tricky if you want to combine this with gulp tasks to copy the bundle to another location.

Error: Configuration has already been loaded. Call setPackagePath before using other APIs.

package.json:

    "aurelia-bundler": "^0.1.9",
    "jspm": "^0.16.14",
    "systemjs": "^0.19.5",
    "systemjs-builder": "^0.13.5",

bundle config:

var aureliaLibs = [
    'aurelia-animator-css',
    'aurelia-binding',
    'aurelia-bootstrapper',
    'aurelia-dependency-injection',
    'aurelia-framework',
    'aurelia-fetch-client',
    'aurelia-router',
    'aurelia-event-aggregator',
    'aurelia-history-browser',
    'aurelia-loader-default',
    'aurelia-loader',
    'aurelia-metadata',
    'aurelia-route-recognizer',
    'aurelia-templating-binding',
    'aurelia-templating-resources',
    'aurelia-templating-router',
    'aurelia-templating',
    'aurelia-logging',
    'aurelia-task-queue',
    'aurelia-history',
    'aurelia-path',
    'aurelia-pal',
    'aurelia-pal-browser'
];

var bundleOpts = {
    inject: true,
    minify: false
};

module.exports = {
    packagePath: 'build/',
    force: true,
    bundles: {
        "app/framework-bundle": {
            includes: aureliaLibs,
            options: bundleOpts
        }
    }
};

Configuration serialization does not work

I'm having a hard time making bundle tasks from https://github.com/aurelia/skeleton-navigation work on my system, so I decided to upgrade to aurelia-bundler 0.2.1.
After that, when running "gulp bundle" or "gulp unbundle" I got this error:

TypeError: needs a 'context' argument.
    at readConfig ([…]\node_modules\aurelia-bundler\dist\config-serializer.js:25:6)

This seems to come from bundler/lib/config-serializer.js:16.
When replacing "sandbox" with "ctx", the code works again. (Still not bundling anything for me, but this at least fixes the unbundle task)

Text bundling no longer working with latest systemjs-builder

I just updated my npm packages and text bundling is now broken. I get this error:

Error on fetch for dist/dist/app.html!github:systemjs/[email protected] at file:///Volumes/Data/Temp/aurelia-bundle-error/dist/dist/dist/app.html!file:///Volumes/Data/Temp/aurelia-bundle-error/jspm_packages/github/systemjs/[email protected]
    Error: ENOENT, open '/Volumes/Data/Temp/aurelia-bundle-error/dist/dist/dist/app.html'
    at Error (native)

Notice how the path repeats the dist folder 3 times. It should be /Volumes/Data/Temp/aurelia-bundle-error/dist/app.html. I pushed a bare bones repo that repros the issue here:

https://github.com/mikeobrien/aurelia-bundle-error

I've traced it to here so far but gave up for the night. It seems like that path normalization method is broken or the paths being passed to it are not right. Here is a sample of the input/output of that function for the html file:

Input: *.html!text
Output: file:///.../dist/*.html!file:///.../jspm_packages/
    github/systemjs/[email protected]

Input: *.html
Output: file:///.../dist/*.html.js

Input: dist/app.html!github:systemjs/[email protected]
Output: file:///.../dist/dist/app.html!file:///.../src/InternalWeb/
    jspm_packages/github/systemjs/[email protected]

Input: dist/app.html
Output: file:///.../dist/dist/app.html.js

Input: dist/dist/app.html!github:systemjs/[email protected]
Output: file:///.../dist/dist/dist/app.html!file:///.../jspm_packages/
    github/systemjs/[email protected]

Input: dist/dist/app.html
Output: file:///../dist/dist/dist/app.html.js

Bundler core-js library not being bundled

Manage to get my loading down from 500 odd files to 130, which is great!

Still the bulk of the 100 which are remaining appear to be coming from core-js modules which have been mapped but resolve internally.

Example: jspm_packages/npm/[email protected]/library/modules/$.global.js

I can see /Modules is scanned but Library/modules is not?

I guess I could manually map these folders?

Problem trying to bundle, can't find jquery.js after putting "jquery" in bundle.js

I've tried to bundle this project with the latest bundler: https://github.com/redpelicans/aurelia-material

I have it running with the current aurelia dist, but have problems when I get this message:

~/WebstormProjects/(project)$ gulp bundle
[11:25:28] Using gulpfile ~/WebstormProjects/(project)/gulpfile.js
[11:25:28] Starting 'bundle'...
[11:25:29] 'bundle' errored after 501 ms
[11:25:29] Error on fetch for jquery at file:///home/(user)/WebstormProjects/(project)/dist/jquery.js
    Error: ENOENT, open '/home/(user)/WebstormProjects/(project)/dist/jquery.js'

builder.buildTree is deprecated. Using builder.bundle instead, which takes both a tree object or expression string.

I have included "jquery" in my bundle.js - which is the alias in the config.js for it. I used the current bundle.js from the aurelia skeleton project.

Here is my config.js:

System.config({
  defaultJSExtensions: true,
  transpiler: "babel",
  babelOptions: {
    "optional": [
      "runtime"
    ]
  },
  paths: {
    "*": "dist/*",
    "github:*": "jspm_packages/github/*",
    "npm:*": "jspm_packages/npm/*"
  },

  map: {
    "DarienFord/aurelia-material": "github:DarienFord/aurelia-material@master",
    "aurelia-animator-css": "github:aurelia/[email protected]",
    "aurelia-binding": "github:aurelia/[email protected]",
    "aurelia-bootstrapper": "github:aurelia/[email protected]",
    "aurelia-dependency-injection": "github:aurelia/[email protected]",
    "aurelia-event-aggregator": "github:aurelia/[email protected]",
    "aurelia-fetch-client": "github:aurelia/[email protected]",
    "aurelia-framework": "github:aurelia/[email protected]",
    "aurelia-history": "github:aurelia/[email protected]",
    "aurelia-history-browser": "github:aurelia/[email protected]",
    "aurelia-loader": "github:aurelia/[email protected]",
    "aurelia-loader-default": "github:aurelia/[email protected]",
    "aurelia-logging": "github:aurelia/[email protected]",
    "aurelia-metadata": "github:aurelia/[email protected]",
    "aurelia-pal": "github:aurelia/[email protected]",
    "aurelia-pal-browser": "github:aurelia/[email protected]",
    "aurelia-path": "github:aurelia/[email protected]",
    "aurelia-route-recognizer": "github:aurelia/[email protected]",
    "aurelia-router": "github:aurelia/[email protected]",
    "aurelia-task-queue": "github:aurelia/[email protected]",
    "aurelia-templating": "github:aurelia/[email protected]",
    "aurelia-templating-binding": "github:aurelia/[email protected]",
    "aurelia-templating-resources": "github:aurelia/[email protected]",
    "aurelia-templating-router": "github:aurelia/[email protected]",
    "babel": "npm:[email protected]",
    "babel-runtime": "npm:[email protected]",
    "bootstrap": "github:twbs/[email protected]",
    "core-js": "npm:[email protected]",
    "fetch": "github:github/[email protected]",
    "font-awesome": "npm:[email protected]",
    "google/material-design-lite": "github:google/[email protected]",
    "text": "github:systemjs/[email protected]",
    "github:DarienFord/aurelia-material@master": {
      "google/material-design-lite": "github:google/[email protected]",
      "jquery": "github:components/[email protected]",
      "lodash": "npm:[email protected]"
    },
    "github:aurelia/[email protected]": {
      "aurelia-metadata": "github:aurelia/[email protected]",
      "aurelia-pal": "github:aurelia/[email protected]",
      "aurelia-templating": "github:aurelia/[email protected]"
    },
    "github:aurelia/[email protected]": {
      "aurelia-metadata": "github:aurelia/[email protected]",
      "aurelia-pal": "github:aurelia/[email protected]",
      "aurelia-task-queue": "github:aurelia/[email protected]",
      "core-js": "npm:[email protected]"
    },
    "github:aurelia/[email protected]": {
      "aurelia-event-aggregator": "github:aurelia/[email protected]",
      "aurelia-framework": "github:aurelia/[email protected]",
      "aurelia-history": "github:aurelia/[email protected]",
      "aurelia-history-browser": "github:aurelia/[email protected]",
      "aurelia-loader-default": "github:aurelia/[email protected]",
      "aurelia-logging-console": "github:aurelia/[email protected]",
      "aurelia-pal": "github:aurelia/[email protected]",
      "aurelia-pal-browser": "github:aurelia/[email protected]",
      "aurelia-router": "github:aurelia/[email protected]",
      "aurelia-templating": "github:aurelia/[email protected]",
      "aurelia-templating-binding": "github:aurelia/[email protected]",
      "aurelia-templating-resources": "github:aurelia/[email protected]",
      "aurelia-templating-router": "github:aurelia/[email protected]",
      "core-js": "npm:[email protected]"
    },
    "github:aurelia/[email protected]": {
      "aurelia-logging": "github:aurelia/[email protected]",
      "aurelia-metadata": "github:aurelia/[email protected]",
      "aurelia-pal": "github:aurelia/[email protected]",
      "core-js": "npm:[email protected]"
    },
    "github:aurelia/[email protected]": {
      "aurelia-logging": "github:aurelia/[email protected]"
    },
    "github:aurelia/[email protected]": {
      "core-js": "npm:[email protected]"
    },
    "github:aurelia/[email protected]": {
      "aurelia-binding": "github:aurelia/[email protected]",
      "aurelia-dependency-injection": "github:aurelia/[email protected]",
      "aurelia-loader": "github:aurelia/[email protected]",
      "aurelia-logging": "github:aurelia/[email protected]",
      "aurelia-metadata": "github:aurelia/[email protected]",
      "aurelia-pal": "github:aurelia/[email protected]",
      "aurelia-path": "github:aurelia/[email protected]",
      "aurelia-task-queue": "github:aurelia/[email protected]",
      "aurelia-templating": "github:aurelia/[email protected]",
      "core-js": "npm:[email protected]"
    },
    "github:aurelia/[email protected]": {
      "aurelia-history": "github:aurelia/[email protected]",
      "aurelia-pal": "github:aurelia/[email protected]",
      "core-js": "npm:[email protected]"
    },
    "github:aurelia/[email protected]": {
      "aurelia-loader": "github:aurelia/[email protected]",
      "aurelia-metadata": "github:aurelia/[email protected]",
      "aurelia-pal": "github:aurelia/[email protected]"
    },
    "github:aurelia/[email protected]": {
      "aurelia-metadata": "github:aurelia/[email protected]",
      "aurelia-path": "github:aurelia/[email protected]"
    },
    "github:aurelia/[email protected]": {
      "aurelia-logging": "github:aurelia/[email protected]",
      "aurelia-pal": "github:aurelia/[email protected]"
    },
    "github:aurelia/[email protected]": {
      "aurelia-pal": "github:aurelia/[email protected]",
      "core-js": "npm:[email protected]"
    },
    "github:aurelia/[email protected]": {
      "aurelia-pal": "github:aurelia/[email protected]"
    },
    "github:aurelia/[email protected]": {
      "aurelia-path": "github:aurelia/[email protected]",
      "core-js": "npm:[email protected]"
    },
    "github:aurelia/[email protected]": {
      "aurelia-dependency-injection": "github:aurelia/[email protected]",
      "aurelia-event-aggregator": "github:aurelia/[email protected]",
      "aurelia-history": "github:aurelia/[email protected]",
      "aurelia-logging": "github:aurelia/[email protected]",
      "aurelia-pal": "github:aurelia/[email protected]",
      "aurelia-path": "github:aurelia/[email protected]",
      "aurelia-route-recognizer": "github:aurelia/[email protected]",
      "core-js": "npm:[email protected]"
    },
    "github:aurelia/[email protected]": {
      "aurelia-pal": "github:aurelia/[email protected]"
    },
    "github:aurelia/[email protected]": {
      "aurelia-binding": "github:aurelia/[email protected]",
      "aurelia-logging": "github:aurelia/[email protected]",
      "aurelia-templating": "github:aurelia/[email protected]"
    },
    "github:aurelia/[email protected]": {
      "aurelia-binding": "github:aurelia/[email protected]",
      "aurelia-dependency-injection": "github:aurelia/[email protected]",
      "aurelia-loader": "github:aurelia/[email protected]",
      "aurelia-logging": "github:aurelia/[email protected]",
      "aurelia-pal": "github:aurelia/[email protected]",
      "aurelia-path": "github:aurelia/[email protected]",
      "aurelia-task-queue": "github:aurelia/[email protected]",
      "aurelia-templating": "github:aurelia/[email protected]",
      "core-js": "npm:[email protected]"
    },
    "github:aurelia/[email protected]": {
      "aurelia-dependency-injection": "github:aurelia/[email protected]",
      "aurelia-metadata": "github:aurelia/[email protected]",
      "aurelia-pal": "github:aurelia/[email protected]",
      "aurelia-path": "github:aurelia/[email protected]",
      "aurelia-router": "github:aurelia/[email protected]",
      "aurelia-templating": "github:aurelia/[email protected]"
    },
    "github:aurelia/[email protected]": {
      "aurelia-binding": "github:aurelia/[email protected]",
      "aurelia-dependency-injection": "github:aurelia/[email protected]",
      "aurelia-loader": "github:aurelia/[email protected]",
      "aurelia-logging": "github:aurelia/[email protected]",
      "aurelia-metadata": "github:aurelia/[email protected]",
      "aurelia-pal": "github:aurelia/[email protected]",
      "aurelia-path": "github:aurelia/[email protected]",
      "aurelia-task-queue": "github:aurelia/[email protected]",
      "core-js": "npm:[email protected]"
    },
    "github:jspm/[email protected]": {
      "assert": "npm:[email protected]"
    },
    "github:jspm/[email protected]": {
      "process": "npm:[email protected]"
    },
    "github:jspm/[email protected]": {
      "util": "npm:[email protected]"
    },
    "github:twbs/[email protected]": {
      "jquery": "github:components/[email protected]"
    },
    "npm:[email protected]": {
      "util": "npm:[email protected]"
    },
    "npm:[email protected]": {
      "process": "github:jspm/[email protected]"
    },
    "npm:[email protected]": {
      "fs": "github:jspm/[email protected]",
      "process": "github:jspm/[email protected]",
      "systemjs-json": "github:systemjs/[email protected]"
    },
    "npm:[email protected]": {
      "fs": "github:jspm/[email protected]",
      "process": "github:jspm/[email protected]",
      "systemjs-json": "github:systemjs/[email protected]"
    },
    "npm:[email protected]": {
      "css": "github:systemjs/[email protected]"
    },
    "npm:[email protected]": {
      "util": "github:jspm/[email protected]"
    },
    "npm:[email protected]": {
      "process": "github:jspm/[email protected]"
    },
    "npm:[email protected]": {
      "assert": "github:jspm/[email protected]"
    },
    "npm:[email protected]": {
      "inherits": "npm:[email protected]",
      "process": "github:jspm/[email protected]"
    }
  }
});

Unable to find destination index.html

aurelia/cli#163

self executing bundles

is it possible / planned to create self executing bundles with the bundler (i.e. a bundle which can be included in a html file on it's own)? JSPM bundling already supports this, but I can't find a way to do this with aurelia's bundler.

Thanks!

Not generating correct file paths breaks bundling

I have an issue after upgrading to the newest version (which drove me nuts comparing my project to the skeleton because one was working and the other wasn't, and I didn't notice the version upgrade ;) ).

I get this error while bundling:

Andrews-Work-iMac:Central astoker$ gulp bundle
[09:44:37] Using gulpfile ~/Etrieve/Workflow/Branches/Development/Prototypes/Central/gulpfile.js
[09:44:37] Starting 'bundle'...
[09:44:40] 'bundle' errored after 2.77 s
[09:44:40] Error: ENOENT: no such file or directory, open '/Users/astoker/Etrieve/Workflow/Branches/Development/Prototypes/Central/ot/dist/app-build.js'
    at Error (native)
    at Object.fs.openSync (fs.js:549:18)
    at Object.fs.writeFileSync (fs.js:1161:15)
    at writeOutput (/Users/astoker/Etrieve/Workflow/Branches/Development/Prototypes/Central/node_modules/aurelia-bundler/dist/bundler.js:88:19)
    at /Users/astoker/Etrieve/Workflow/Branches/Development/Prototypes/Central/node_modules/aurelia-bundler/dist/bundler.js:68:5
    at lib$rsvp$$internal$$tryCatch (/Users/astoker/Etrieve/Workflow/Branches/Development/Prototypes/Central/node_modules/rsvp/dist/rsvp.js:493:16)
    at lib$rsvp$$internal$$invokeCallback (/Users/astoker/Etrieve/Workflow/Branches/Development/Prototypes/Central/node_modules/rsvp/dist/rsvp.js:505:17)
    at lib$rsvp$$internal$$publish (/Users/astoker/Etrieve/Workflow/Branches/Development/Prototypes/Central/node_modules/rsvp/dist/rsvp.js:476:11)
    at lib$rsvp$asap$$flush (/Users/astoker/Etrieve/Workflow/Branches/Development/Prototypes/Central/node_modules/rsvp/dist/rsvp.js:1198:9)
    at doNTCallback0 (node.js:407:9)
    at process._tickCallback (node.js:336:13)

There is no ot folder in the Central folder location, however there is a wwwroot folder which contains the dist folder. It almost looks like it's trying to get to the wwwroot folder, but only taking the last 2 characters for the folder path.

After finally seeing the version changes while comparing to the skeleton project, I downgraded back to 0.1.9 and everything works fine.

My bundle config is:

var gulp = require('gulp');
var bundler = require('aurelia-bundler');

var config = {
  force: true,
  //packagePath: '.',
  baseURL: './wwwroot',
  configPath: './wwwroot/config.js',
  bundles: {
    "dist/app-build": {
      "includes": [
        "[*]",
        "*.html!text",
        "*.css!text"
      ],
      "options": {
        "inject": true,
        "minify": true
      }
    },
    "dist/aurelia": {
      "includes": [
        "aurelia-framework",
        "aurelia-bootstrapper",
        "aurelia-fetch-client",
        "aurelia-router",
        "aurelia-animator-css",
        "aurelia-templating-binding",
        "aurelia-templating-resources",
        "aurelia-templating-router",
        "aurelia-loader-default",
        "aurelia-history-browser",
        "aurelia-logging-console",
      ],
      "options": {
        "inject": true,
        "minify": true
      }
    }
  }
};

gulp.task('bundle', function() {
  console.log(config);
  var t = bundler.bundle(config);

  // console.log(t);
  // console.log(t.catch(function(e){console.log(e)}));
  return t;
});

gulp.task('unbundle', function() {
 return bundler.unbundle(config);
});

After digging into the code, it appears that in systemjs-builder inside lib/utils.js on line 29 fromFileURL(url), we return a substring where the first 7 characters are split off. It seems to do this so that it strips off the file:// at the beginning of paths. However, when our config is read and baseURL is passed to this function via ln 79 in aurelia-bundler/dist/bundler.js, it strips the first 7 characters off of ./wwwroot, resulting in the path ot, which is where things are breaking.

Bundling loads from system.js and not from app-bundle.js

If I do a hard refresh of the page, the files are loaded from System.js and not from app-bundle.js. Subsequent calls will correctly load the files from the app-bundle.

Further, the bundler duplicates a lot of files. In the bundle.js below I commented out the aurelia-bundle and I get the behaviour as described above

var gulp = require("gulp");
var bundler = require("aurelia-bundler");


var config = {
    force: true,
    packagePath: ".",
    bundles: {
        "dist/app-bundle": {
            includes: [
                '*',
                'admin/*',
                'clients/*',
                'contracts/*',
                'cropCollection/*',
                'dialogs/*',
                'dictionaries/*',
                'dryingUnits/*',
                'home/*',
                'printableForms/*',
                'production/*',
                'rawmaterial/*',
                'resources/*',
                'specifications/*',
                'stocks/*',
                'theFarm/*',
                'user-admin/*',
                '**/*.html!text',
                //'**/*.css!text',

                '../css/*.css!text'

               // 'bootstrap/css/bootstrap.css!text'
            ],
            options: {
                inject: true,
                minify: true
            }
        }

        //"dist/aurelia-bundle": {
        //    includes: [
        //        "aurelia-animator-css",
        //        "aurelia-bootstrapper",
        //        "aurelia-computed",
        //        "aurelia-dialog",
        //        "aurelia-http-client",
        //        "aurelia-router",
        //        "aurelia-validation",
        //
        //        "github:aurelia/templating-binding",
        //        "github:aurelia/templating-resources",
        //        "github:aurelia/templating-router",
        //        "github:aurelia/loader-default",
        //        "github:aurelia/history-browser",
        //        "github:aurelia/logging-console",
        //
        //        "aurelia-dialog/**/*.html!text"
        //    ],
        //    options: {
        //        inject: true,
        //        minify: true
        //    }
        //}
    }
};

gulp.task("bundle", function (callback) {
    return bundler.bundle(config);
});

gulp.task('unbundle', function () {
    return bundler.unbundle(config);
});

My config.js is

System.config({
  baseURL: "/",
  defaultJSExtensions: true,
  transpiler: "babel",
  babelOptions: {
    "optional": [
      "runtime",
      "es7.decorators",
      "es7.classProperties"
    ]
  },
  paths: {
    "*": "dist/*",
    "github:*": "jspm_packages/github/*",
    "npm:*": "jspm_packages/npm/*"
  },

My directory structure is:

<img width="751" alt="sshot-2" src="https://cloud.githubusercontent.com/assets/2135027/11049415/d1976056-871c-11e5-8613-82256b359b39.png">

Clearly I've completely misunderstood something about how the bundler should be working.

What's happened to source maps in v0.1.9?

I've noticed that my source maps weren't being generated for the bundle after upgrading to Aurelia Beta 1. I had sourceMaps: true in my bundle config as shown below but after checking the bundler source I can see it's been removed in v0.1.9. Is this coming back? Is there functionality in the systemjs builder that will offer this support? I also noticed that the gulp task still generates embedded source maps in the transpiled output but that's stripped out during bundling.

            "options": {
                "inject": true,
                "minify": true,
                "sourceMaps": true
            }

Tricks for upgrading from 1.7 to 2.1?

I just tried to upgrade the bundler from 1.7 to 2.1. Everything seemed to go fine npm wise.

However, after bundling, system.js and config.js loaded as normal, but app-build.js was never requested. The application never loads.

I made this change independently and was able to "fix it" by forcing the version back to 1.7.

Fwiw, 1.9 failed in the same way.

bundling takes a long time

Sometimes "gulp bundle" takes just a few minutes to complete, but most of the time it took 45 minutes. I am not sure what it's doing under the hood. Especially, the "gulp export" is the killer:

Doing "gulp export" takes 45 minutes
Doing "gulp export" after "gulp bundle" makes the app failed to load: it keeps spinning at the loading page.

The bundler doesn't seem to bundle external aurelia plugins

We created a super simple aurelia plugin and stored it in a github repo... literally all it does is print "Hello World". It works fine in the unbundled app.

However, as soon as we bundle the app, it ignores the "app bundle" and "vendor bundle"---requests made to files inside their respective bundles don't go to the bundle; instead, the files are loaded individually, ignoring the bundling.

The bundler config is below:

bundles: {
      "dist/app.bundle": {
        "includes": [
          "index.html!text",
          "dist/*.html!text",
          "dist/*",
          "*.css!text"
        ],
        "options": {
          "inject": true,
          "minify": true
        }
      },
      "dist/vendor.bundle": {
        "includes": [
          "chanderdhall/test-aurelia-custom-element", //<-- the plugin
          "fetch",
          "text"
        ],
        "options": {
          "inject": true,
          "minify": true
        }
      },
      "dist/aurelia.bundle": {
        "includes": [
           //all the aurelia modules
        ],
        "options": {
          "inject": true,
          "minify": true
        }
      }
    }