broccolijs / broccoli-sample-app Goto Github PK
View Code? Open in Web Editor NEWSample Ember app for Broccoli
License: MIT License
Sample Ember app for Broccoli
License: MIT License
First off -thank you for all the time / effort you've put into such a great build tool. I'm playing with it for the first time today and found that I'd like to start a little simpler than this example shows (I'll be making my example public in the near future to help others like myself who don't yet use modules of any kind with ember).
I have a fairly small Brocfile but in the line below you simple "append" legacy files like jquery/handlebars. How can I do this w/out using the ES6 module you have?
var applicationJs = compileES6(appAndDependencies, {
loaderFile: 'loader.js',
ignoredModules: [
'resolver'
],
inputFiles: [
'appkit/**/*.js'
],
legacyFilesToAppend: [
'jquery.js',
'handlebars.js',
'ember.js',
'ember-data.js',
'ember-resolver.js'
],
wrapInEval: env !== 'production',
outputFile: '/assets/app.js'
})
Cloned down app and after running install steps come across error
OSX 10.9 Mavericks
╰─$ node -v
v0.10.28
─$ broccoli -V 1 ↵
0.10.0
Callstack
Build error
appkit/bower_components/jquery/build/release-notes.js
Line 1: Unexpected token ILLEGAL
Error: Line 1: Unexpected token ILLEGAL
at throwError (/Users/stanzheng/code/null/broccoli-sample-app/node_modules/broccoli-es6-concatenator/node_modules/es6-module-transpiler/dist/es6-module-transpiler.js:2584:21)
at scanPunctuator (/Users/stanzheng/code/null/broccoli-sample-app/node_modules/broccoli-es6-concatenator/node_modules/es6-module-transpiler/dist/es6-module-transpiler.js:1354:9)
at advance (/Users/stanzheng/code/null/broccoli-sample-app/node_modules/broccoli-es6-concatenator/node_modules/es6-module-transpiler/dist/es6-module-transpiler.js:2002:16)
at peek (/Users/stanzheng/code/null/broccoli-sample-app/node_modules/broccoli-es6-concatenator/node_modules/es6-module-transpiler/dist/es6-module-transpiler.js:2028:21)
at parseProgram (/Users/stanzheng/code/null/broccoli-sample-app/node_modules/broccoli-es6-concatenator/node_modules/es6-module-transpiler/dist/es6-module-transpiler.js:5176:9)
at /Users/stanzheng/code/null/broccoli-sample-app/node_modules/broccoli-es6-concatenator/node_modules/es6-module-transpiler/dist/es6-module-transpiler.js:5661:38
at parse (/Users/stanzheng/code/null/broccoli-sample-app/node_modules/broccoli-es6-concatenator/node_modules/es6-module-transpiler/dist/es6-module-transpiler.js:6038:23)
at [object Object].$Parser.parse (/Users/stanzheng/code/null/broccoli-sample-app/node_modules/broccoli-es6-concatenator/node_modules/es6-module-transpiler/dist/es6-module-transpiler.js:6810:17)
at new $Parser.constructor (/Users/stanzheng/code/null/broccoli-sample-app/node_modules/broccoli-es6-concatenator/node_modules/es6-module-transpiler/dist/es6-module-transpiler.js:6803:12)
at [object Object].$Compiler.parse (/Users/stanzheng/code/null/broccoli-sample-app/node_modules/broccoli-es6-concatenator/node_modules/es6-module-transpiler/dist/es6-module-transpiler.js:6588:20)
at new $Compiler.constructor (/Users/stanzheng/code/null/broccoli-sample-app/node_modules/broccoli-es6-concatenator/node_modules/es6-module-transpiler/dist/es6-module-transpiler.js:6585:12)
at addModule (/Users/stanzheng/code/null/broccoli-sample-app/node_modules/broccoli-es6-concatenator/index.js:87:26)
at /Users/stanzheng/code/null/broccoli-sample-app/node_modules/broccoli-es6-concatenator/index.js:59:7
at $$$internal$$tryCatch (/Users/stanzheng/code/null/broccoli-sample-app/node_modules/broccoli/node_modules/rsvp/dist/rsvp.js:470:16)
at $$$internal$$invokeCallback (/Users/stanzheng/code/null/broccoli-sample-app/node_modules/broccoli/node_modules/rsvp/dist/rsvp.js:482:17)
at $$$internal$$publish (/Users/stanzheng/code/null/broccoli-sample-app/node_modules/broccoli/node_modules/rsvp/dist/rsvp.js:453:11)
at $$rsvp$asap$$flush (/Users/stanzheng/code/null/broccoli-sample-app/node_modules/broccoli/node_modules/rsvp/dist/rsvp.js:1531:9)
at process._tickCallback (node.js:419:13)
at Function.Module.runMain (module.js:499:11)
at startup (node.js:119:16)
at node.js:906:3
With broccoli-cli installed, cloning the broccoli-sample-app repo and running broccoli serve
after npm install
and bower install
throws errors and will not serve the app:
In appkit/bower_components/jquery/build/release-notes.js:
Line 1: Unexpected token ILLEGAL
Error: Line 1: Unexpected token ILLEGAL
at throwError (broccoli-sample-app/node_modules/broccoli-es6-concatenator/node_modules/es6-module-transpiler/dist/es6-module-transpiler.js:2584:21)
at scanPunctuator (broccoli-sample-app/node_modules/broccoli-es6-concatenator/node_modules/es6-module-transpiler/dist/es6-module-transpiler.js:1354:9)
at advance (broccoli-sample-app/node_modules/broccoli-es6-concatenator/node_modules/es6-module-transpiler/dist/es6-module-transpiler.js:2002:16)
at peek (broccoli-sample-app/node_modules/broccoli-es6-concatenator/node_modules/es6-module-transpiler/dist/es6-module-transpiler.js:2028:21)
at parseProgram (broccoli-sample-app/node_modules/broccoli-es6-concatenator/node_modules/es6-module-transpiler/dist/es6-module-transpiler.js:5176:9)
at broccoli-sample-app/node_modules/broccoli-es6-concatenator/node_modules/es6-module-transpiler/dist/es6-module-transpiler.js:5661:38
at parse (broccoli-sample-app/node_modules/broccoli-es6-concatenator/node_modules/es6-module-transpiler/dist/es6-module-transpiler.js:6038:23)
at $Parser.parse (broccoli-sample-app/node_modules/broccoli-es6-concatenator/node_modules/es6-module-transpiler/dist/es6-module-transpiler.js:6810:17)
at new $Parser.constructor (broccoli-sample-app/node_modules/broccoli-es6-concatenator/node_modules/es6-module-transpiler/dist/es6-module-transpiler.js:6803:12)
at $Compiler.parse (broccoli-sample-app/node_modules/broccoli-es6-concatenator/node_modules/es6-module-transpiler/dist/es6-module-transpiler.js:6588:20)
at new $Compiler.constructor (broccoli-sample-app/node_modules/broccoli-es6-concatenator/node_modules/es6-module-transpiler/dist/es6-module-transpiler.js:6585:12)
at addModule (broccoli-sample-app/node_modules/broccoli-es6-concatenator/index.js:80:24)
at ES6Concatenator.transform (broccoli-sample-app/node_modules/broccoli-es6-concatenator/index.js:53:5)
at broccoli-sample-app/node_modules/broccoli-es6-concatenator/node_modules/broccoli-transform/index.js:13:19
at invokeCallback (broccoli-sample-app/node_modules/broccoli/node_modules/rsvp/dist/commonjs/rsvp/promise.js:228:21)
at publish (broccoli-sample-app/node_modules/broccoli/node_modules/rsvp/dist/commonjs/rsvp/promise.js:176:9)
at publishFulfillment (broccoli-sample-app/node_modules/broccoli/node_modules/rsvp/dist/commonjs/rsvp/promise.js:312:5)
at flush (broccoli-sample-app/node_modules/broccoli/node_modules/rsvp/dist/commonjs/rsvp/asap.js:41:9)
at process._tickDomainCallback (node.js:459:13)
It seems to be trying to include those files in addition to the built version of jQuery when doing es6 concatenation/compilation; deleting those folders lets the app build and run as expected.
What is the idiomatic way with Broccoli to exclude these files? Am I missing something else about configuration?
I'm running Node 0.10.26 and Bower 1.2.8 on OS X.
Serving on http://0.0.0.0:4200
After I have a successful build I see the above. Yet when I view that url I get this in the browser
{"statusCode":403,"error":"Forbidden"}
How should my web app (not rails based) access the items returned from the Brocfile?
**here is the basic brocfile I"m using
module.exports = function (broccoli) {
var filterTemplates = require('broccoli-template')
var concat = require('broccoli-concat')
function preprocess (tree) {
tree = filterTemplates(tree, {
extensions: ['hbs', 'handlebars'],
compileFunction: 'Ember.Handlebars.compile'
})
return tree
}
var sourceTree = broccoli.makeTree('js');
var appTemplates = preprocess(sourceTree, {
inputFiles: [
'templates/*.handlebars'
],
outputFile: '/js/dist/tmpls.min.js'
});
var appJs = concat(sourceTree, {
inputFiles: [
'vendor/jquery/jquery.js',
'vendor/handlebars/handlebars.min.js',
'vendor/ember/ember.js',
'app.js',
'other.js'
],
outputFile: '/js/dist/deps.min.js'
});
return [appJs, appTemplates];
}
*_test
and *_spec
are very strong conventions for naming unit tests. How about renaming the routes?
Broccoli is great BTW.
I am unable to trigger the uglify step in this project, but it works in my pared down sample app prior to adding the ES6 transpiler.
I have tried it with serve
:
$ BROCCOLI_ENV=production && broccoli serve
And with build
:
$ BROCCOLI_ENV=production && broccoli build output-dir
In both cases (with this sample app) I get a 1.8MB sized app.js file that is unminified.
I've also tried removing the production check altogether; same result.
My guess was it is an issue with the ES6 module concatenator step prior, since you perform uglify on the broccoli tree and not on the output (/assets/app.js).
In my example without ES6, compression works as I read directly from the tree instead of /assets folder.
Just wondering how I go about running the tests included in the sample app?
Thanks!
Call me stupid, but how to I run the tests in this? I'm quite new to Ember and all.
As someone who is new to Broccoli and wanting to learn it, I appreciate the existence of this sample app. However, the fact that there is no documentation whatsoever (besides how to get it running), I'm not getting as much value out of it as I'd hoped.
Since the Brocfile.js
is the main file of interest here, would it be possible to have some comments in it to explain what exactly is going on, explain the thinking behind it, and elucidate the concepts? I think this would massively increase the value of this project as a learning tool for newcomers.
Thank you!
Please include instructions on how to run the tests.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.