These are chat archives for brunch/brunch

5th
May 2016
Dan McGuire
@dgmcguire
May 05 2016 03:30
I'm in an elixir-lang phoenix framework project which uses brunch as the default build tool and I want to bring virtual-dom in so I've got it in my package.json as a dep and now I'm wondering how to require things in...es6 seems to be the default so should I be import'ing instead of require'ing? Also, how do I know the "path" name or w.e. to require/import it in? It's inside node_modules/ and virtual-dom is basically just a wrapper for a lot of js files that do different things....how can I require those things in?
just got through reading the docs, but I'm apparently not too quick on the uptake of learning some tings
so right now I'm var h = require('virtual-dom/h'); which gives me the error app.js:1Uncaught Error: Cannot find module "virtual-dom/h" from "web/static/js/app"
node_modules/virtual-dom/h.js does exist
Dan McGuire
@dgmcguire
May 05 2016 03:35
  "dependencies": {
    "babel-brunch": "~6.0.0",
    "brunch": "~2.1.3",
    "clean-css-brunch": "~1.8.0",
    "css-brunch": "~1.7.0",
    "javascript-brunch": "~1.8.0",
    "uglify-js-brunch": "~1.7.0",
    "phoenix": "file:deps/phoenix",
    "phoenix_html": "file:deps/phoenix_html",
    "virtual-dom": "~2.1.1"
  }
I've been able to bring jquery in by doing all the same steps, so I'm a bit confused why this isn't bring in virtual-dom
Gosha Arinich
@goshakkk
May 05 2016 05:48
@dgmcguire seems like you are using an old version of Brunch. Can you bump it to 2.7.4? NPM support has been continuously improving since 2.0 release. Should be working then, I've just tested myself with the phoenix starter project
Nathaniel Blackburn
@nblackburn
May 05 2016 11:18
@goshakkk Still getting build errors when updating past 2.6.0
Nathaniel Blackburn
@nblackburn
May 05 2016 11:31
brunch/brunch#1342
Dan McGuire
@dgmcguire
May 05 2016 11:59
@goshakkk that fixed it! Thanks :)
2.7.5 fixed it to be specific (in case that matters to anyone :P )
Gosha Arinich
@goshakkk
May 05 2016 12:35
@nblackburn what do you mean have no permission to install?
Nathaniel Blackburn
@nblackburn
May 05 2016 12:36
the repo doesn’t exist, it’s actually here: https://github.com/hellyeahllc/brunch/tree/abs-reg-fix
Gosha Arinich
@goshakkk
May 05 2016 12:38
right, so what about npm install hellyeahllc/brunch#abs-reg-fix then
Nathaniel Blackburn
@nblackburn
May 05 2016 12:40
already on it, won’t be a second
nope, same again
:cry:
Nathaniel Blackburn
@nblackburn
May 05 2016 12:46
Gosha Arinich
@goshakkk
May 05 2016 12:48
hmmm strange, i can't reproduce it
Nathaniel Blackburn
@nblackburn
May 05 2016 12:48
did you try cloning my skeleton, it should be the same
i will double check now
This message was deleted
hmm, works on that
Gosha Arinich
@goshakkk
May 05 2016 12:52
yes i did, no luck making that error appear
Nathaniel Blackburn
@nblackburn
May 05 2016 12:52
it’s super odd
works without a hitch on 2.6.0 which is the odd part, so something has changed which it really doesn’t like
Nathaniel Blackburn
@nblackburn
May 05 2016 12:57
not sure what to do as i can’t give you the code i have or i would happily do so
Gosha Arinich
@goshakkk
May 05 2016 12:59
can you try removing node_modules and installing again?
Nathaniel Blackburn
@nblackburn
May 05 2016 13:00
sure can
rimraf to the rescue
just waiting for it to build now
05 May 13:02:58 - error: Resolving deps of app/initialize.js failed. Could not load module '../config/anychart' from '/Users/blackburn/Workspace/tracker_dashboard/app'. Make sure the file actually exists.
the file certainly exists
Gosha Arinich
@goshakkk
May 05 2016 13:05
is config in the watched paths?
actually, shouldn't it be ./config?
Nathaniel Blackburn
@nblackburn
May 05 2016 13:06
it’s inside app so i would think so
Gosha Arinich
@goshakkk
May 05 2016 13:06
since both initialize and config are in app
Nathaniel Blackburn
@nblackburn
May 05 2016 13:07
fair point, but why was it working before
…weird
Nathaniel Blackburn
@nblackburn
May 05 2016 13:13
ok so that cleared the errors up but the application isn’t working right now but that's for me to address
thanks for your help @goshakkk
Nathaniel Blackburn
@nblackburn
May 05 2016 13:30
the build issue has gone and has been replaced with something much worse :scream:
index.js:24 Uncaught TypeError: Cannot read property '$vm' of undefined
This message was deleted
Nathaniel Blackburn
@nblackburn
May 05 2016 13:41
@goshakkk So i am guessing part of Vue was not included in this build but i am not getting any errors
@goshakkk Yup, it’s treating some files is if they are vendor so they are not getting included
Nathaniel Blackburn
@nblackburn
May 05 2016 13:57
I can get up to 2.6.6 now before this happens, so it targets 2.7.x versions only
Nathaniel Blackburn
@nblackburn
May 05 2016 14:05
ahh, updated brunch-babel and that fixed it
it started showing deoptimized warnings so updated it and that seems to have done the trick
Michal Valasek
@michalvalasek
May 05 2016 14:45
Hello guys! Is there a way how to make Brunch compile two separate JS files (one for admin UI, second for the public part of the web)
Mauro Oviedo
@moviedo
May 05 2016 14:52
@michalvalasek yes
module.exports = {
  files: {
    javascripts: {
      joinTo: {
        'javascripts/app.js': /^app\//,
        'javascripts/app2.js': /^(?!app\/)/
      }
    },
}
@michalvalasek you need to specify where the 2nd file is using regex
Michal Valasek
@michalvalasek
May 05 2016 15:00
Thanks! Second part of my problem is that I need to manage the dependencies (js libs like jquery) via npm and access them from those two js files. E.g.: I'd like to be able to put 'import "jquery"' in the app.js and then use the lib in the file. Would this be possible? I was trying to achieve that via config.npm.whitelist but I was getting errors such as 'Cannot find module "jquery"'.
Mauro Oviedo
@moviedo
May 05 2016 15:01
@michalvalasek so you want 2 different sets of dependencies for teh app1 vs app2?
Michal Valasek
@michalvalasek
May 05 2016 15:04
@moviedo no, one set of dependencies is OK.
Mauro Oviedo
@moviedo
May 05 2016 15:04
@michalvalasek what version of brunch are u using
v2.7.5 is the latest and most stable
comes builtin with npm support
Michal Valasek
@michalvalasek
May 05 2016 15:05
@moviedo 2.1.3
Mauro Oviedo
@moviedo
May 05 2016 15:05
you should definitely update to get npm support
else use bower
Michal Valasek
@michalvalasek
May 05 2016 15:05
@moviedo oh, thanks a lot for the info, I’m going to try to update it right away
@moviedo i’m fighting with this since morning :)
Mauro Oviedo
@moviedo
May 05 2016 15:07
module.exports = {
  files: {
    javascripts: {
      joinTo: {
        'javascripts/app.js': /^app\//,
        'javascripts/app2.js': /^(?!app\/)/,
        'javascripts/vendor.js':  /regex_here/
      }
    },
}
you use commonjs import syntax var $ = require('jquery');
or use brunch-babel and you can use es2015 import syntax import $ from 'jquery';
@michalvalasek see above
Michal Valasek
@michalvalasek
May 05 2016 15:10
@moviedo yes, I’m using brunch-babel in the project
Michal Valasek
@michalvalasek
May 05 2016 15:24
still getting the node_modules/jquery/dist/jquery.js compiled, but not written. Check your javascripts.joinTo config error during build
Mauro Oviedo
@moviedo
May 05 2016 15:24
post up your config @michalvalasek
@moviedo The main JS files are web/static/js/front.js and web/static/js/admin.js
Mauro Oviedo
@moviedo
May 05 2016 15:26
you need to add a "js/vendor.js" to joinTo
Michal Valasek
@michalvalasek
May 05 2016 15:27
why?
Mauro Oviedo
@moviedo
May 05 2016 15:27
it should point to where your node_modules dir is located
else it never builds it
Michal Valasek
@michalvalasek
May 05 2016 15:27
oh
Mauro Oviedo
@moviedo
May 05 2016 15:27
you don't need file
but u need to add it to "css/front.css": /^(web\/static\/css\/front)|node_modules/,
something like that
but best practice is to have a vendor.js file
Michal Valasek
@michalvalasek
May 05 2016 15:28
the stylesheets are working fine, the problem is with javascripts
Mauro Oviedo
@moviedo
May 05 2016 15:29
so when u run brunch w it won't rebuild all you 3rd party node_module files
those don't change, ur code does
Michal Valasek
@michalvalasek
May 05 2016 15:29
ok, so i should put all 3rd party libs into vendor.js and include them as needed from front.js and admin.js ?
Mauro Oviedo
@moviedo
May 05 2016 15:29
heres one I'm using
module.exports = {
  files: {
    javascripts: {
      joinTo: {
        'javascripts/app.js': /^app\//,
        'javascripts/vendor.js': /^(?!app\/)/
      }
    },
    stylesheets: {
      joinTo: {
        'stylesheets/app.css': /^app/,
        'stylesheets/vendor.css': /^(?!app\/)/
      }
    }
  },

  npm: {
    styles: {
      bootswatch: ['readable/bootstrap.css']
    }
  },

  server: {
    port: 8000,
    hostname: '0.0.0.0',
    stripSlashes: true
  },

  watcher: {
    usePolling: true
  },

  plugins: {
    autoReload: {
      port: 8080
    }
  }
}
@michalvalasek yes
vendor files get loaded by browser, then you import in your code where u need specific library functionality
Michal Valasek
@michalvalasek
May 05 2016 15:32
exactly. I’ll have 3 compiled JS files (front.js, admin.js and vendor.js), load them (either front and vendor or admin and vendor) in the HTML.
in the admin.js and front.js i’ll be importing and using the libs (jquery, …)
cool, gonna try it
just one more thing: this regex - /^(?!app\/)/ matches everything outside the app/ folder?
Mauro Oviedo
@moviedo
May 05 2016 15:34
yeah, for me that's both bower and node_modules
Michal Valasek
@michalvalasek
May 05 2016 15:34
perfect, thanks!
Mauro Oviedo
@moviedo
May 05 2016 15:34
I could also just make it more specific
Michal Valasek
@michalvalasek
May 05 2016 15:34
via whitelist?
Mauro Oviedo
@moviedo
May 05 2016 15:34
/^(node_modules|vendor)/
no, like above
i've not really looked into the whitelist npm property, give me a sec
Michal Valasek
@michalvalasek
May 05 2016 15:35
is the whitelist still a thing?
sure
nope, doesn't look like it
Michal Valasek
@michalvalasek
May 05 2016 16:03
@moviedo it works now! This is how my files.javascripts.joinTo looks now:
    "js/front.js": /^(web\/static\/js\/front)/,
    "js/admin.js": /^(web\/static\/js\/admin)/,
    "js/vendor.js": /^node_modules/
Mauro Oviedo
@moviedo
May 05 2016 16:04
yep that's pretty much all you need
Michal Valasek
@michalvalasek
May 05 2016 16:04
I’m just worrying that it bundles EVERYTHING from node_modules into vendor.js
Mauro Oviedo
@moviedo
May 05 2016 16:04
you should probably add the vendor directory "js/vendor.js": /^(node_modules|vendor)/
it's directory for non packages 3rd party dependencies
no
so it packages only item u stated as dependencies in packages.json
you should split devDependencies and reuglar dependencies
Michal Valasek
@michalvalasek
May 05 2016 16:06
yes, but there are also brunch plugins which I don’t need in the final bundle
ok, that’s looks like a way to go
Mauro Oviedo
@moviedo
May 05 2016 16:06
  "dependencies": {
    "bootswatch": "^3.0.0",
    "vue": "^1.0.0",
    "vue-router": "^0.7.13",
    "vue-strap": "^1.0.7"
  },
  "devDependencies": {
    "auto-reload-brunch": "^2.0.0",
    "babel-brunch": "^6.0.2",
}
Michal Valasek
@michalvalasek
May 05 2016 16:06
cool, thanks!
Mauro Oviedo
@moviedo
May 05 2016 16:06
np
Michal Valasek
@michalvalasek
May 05 2016 16:14
it still bundles all the stuff from node_packages
{
"repository": {},
"dependencies": {
"bootstrap-sass": "^3.3.6",
"jquery": "^2.2.3",
"phoenix": "file:deps/phoenix",
"phoenix_html": "file:deps/phoenix_html"
},
"devDependencies": {
"brunch": "^2.7.5",
"babel-brunch": "^6.0.4",
"clean-css-brunch": "^2.0.0",
"copycat-brunch": "^1.1.0",
"css-brunch": "^2.6.1",
"javascript-brunch": "^2.0.0",
"sass-brunch": "^2.6.2",
"uglify-js-brunch": "^2.0.1"
}
}
    "js/front.js": /^(web\/static\/js\/front)/,
    "js/admin.js": /^(web\/static\/js\/admin)/,
    "js/vendor.js": /^(node_modules|vendor)/
Mauro Oviedo
@moviedo
May 05 2016 16:15
did you check the maps file?
vendor.js.maps
Michal Valasek
@michalvalasek
May 05 2016 16:15
!
Mauro Oviedo
@moviedo
May 05 2016 16:15
says what's in it at the top
Michal Valasek
@michalvalasek
May 05 2016 16:15
"node_modules/bootstrap-sass/assets/javascripts/bootstrap.js","node_modules/jquery/dist/jquery.js","node_modules/phoenix/priv/static/phoenix.js","node_modules/phoenix_html/priv/static/phoenix_html.js"]
wow
didn’t noticed that
so it doesn’t bundle everything, just what i specified in the devDependencies
perfect!
Mauro Oviedo
@moviedo
May 05 2016 16:16
yep
Michal Valasek
@michalvalasek
May 05 2016 16:16
thank you so much! you saved me :)
Mauro Oviedo
@moviedo
May 05 2016 16:16
np
Gosha Arinich
@goshakkk
May 05 2016 18:12
@michalvalasek it only bundles the things your app requires — so that won't be everything inside node_modules/, that would be pretty lame :) brunch looks at your app code to figure out which node packages it requires and adds these (and then looks at what they requires, and so on)
Michal Valasek
@michalvalasek
May 05 2016 18:14
@goshakkk that's awesome :) thanks for the info, I' quite new to Brunch
Colin Bate
@colinbate
May 05 2016 23:34
I've updated the https://github.com/colinbate/ng2-brunch skeleton to Angular 2 RC1. Bear in mind that the are some known issues with the new Angular Router and I'll try to update the skeleton when they are fixed.