Closed nchanged closed 7 years ago
So this plugin will pretty much just require the loader and aurleia-boostrap so we dont haveto do this:
import 'fuse-box-aurelia-loader'
import 'aurelia-bootstrapper';
Info for later, looks like this is all...
+ aurelia-bootstrapper
+ aurelia-framework
+ aurelia-pal
+ aurelia-metadata
+ aurelia-loader-default
+ aurelia-polyfills
+ aurelia-fetch-client
+ aurelia-pal-browser
+ aurelia-animator-css
+ aurelia-logging-console
+ aurelia-templating-binding
+ aurelia-templating-resources
+ aurelia-event-aggregator
+ aurelia-history-browser
+ aurelia-templating-router`
So how would fuse-box-aurelia-loader
look like in the end? CommonJs? If yes, we need to add import every single dependency in the index.
Or it's faster if we publish a fusebox bundle
Im all for making simple plugin to autoload loader and bootstrapper. & making the loader to fusebox package 👍 Its not like any other bundler is going to need it :-)
@vegarringdal believe it or not WebPack swallows a minified fusebox bundle =) and works with it.
@arjendeblok
Played around making a plugin to autoload loader and boostrapper
here is the code, need to put it somewhere for now for later never made plugin, so this can get A LOT better
const AureliaPluginClass = class {
constructor(options) {
if(options.addDep){
this.dependencies = [
'fuse-box-aurelia-loader',
'aurelia-bootstrapper',
'aurelia-framework',
'aurelia-pal',
'aurelia-metadata',
'aurelia-loader-default',
'aurelia-polyfills',
'aurelia-fetch-client',
'aurelia-pal-browser',
'aurelia-animator-css',
'aurelia-logging-console',
'aurelia-templating-binding',
'aurelia-templating-resources',
'aurelia-event-aggregator',
'aurelia-history-browser',
'aurelia-templating-router'
]
}
}
init(context){
//todo, but needs to be here
}
bundleStart(context){
//todo
}
bundleEnd(context) {
context.source.addContent(`
FuseBox.import('fuse-box-aurelia-loader');
FuseBox.import('aurelia-bootstrapper');
console.log("fuse-box-aurelia-loader & aurelia-bootstrapper loaded")
`);
}
}
const AureliaPlugin = (options) => {
return new AureliaPluginClass(options);
}
const fuseBox = FuseBox.init({
homeDir: "src",
outFile: "bundle.js",
sourceMap: {
bundleReference: "bundle.js.map",
outFile: "bundle.js.map",
},
plugins: [
fsbx.CSSPlugin(),
fsbx.HTMLPlugin({
useDefault: true
}),
fsbx.TypeScriptHelpers(),
fsbx.SourceMapPlainJsPlugin(),
AureliaPlugin({addDep:false})
]
});
It would be cool to automatically inject all dependencies tho..
yes, but I have no clue how to do that :-)
Any hints ?
Can I add pure ts code it it will be transpiled too ?
Because we could mabe inject the entire fuse-box-aurelia-package
even though it might be simple for people to come with bugfixes if this was a seperate source
If we are going to add/inject all dependencies then should have it as a option {addDep:true}
figured it out, updated code comment above, looks like its working
Will this allow me to just have fuse.bundle("vendor").instructions('~ main.ts') in my code and it would work with aurelia? Any plans on officially adding the AureliaPlugin to fuse-box?
@stevensheehy we need to yes, gotta talk to @vegarringdal
Dont see the need for official plugin, since most would want to control the bundles, but for getting bootstrap and loader ready someone could add this
var aureliaFuseboxBootstrapPlugin =function() {
var loader = function(){}
loader.prototype.init = function(context) {}
loader.prototype.bundleEnd = function(context) {
context.source.addContent(`FuseBox.import("fuse-box-aurelia-loader")`);
context.source.addContent(`FuseBox.import("aurelia-bootstrapper")`);
}
return new loader();
}
closing this, I would not like a plugin that injected everything, new fusebox is good at making vendor bundles etc, so this should be up to user, so closing this
We need a plugin that:
1) Injects aurelia loader into the bundle 2) Injects dependencies