0

I'm trying to get gulp-babel working as the only other way I've been able to do it is with webpack at the moment. It's all great that you can do your single layer script but the minute you start doing imports it doesn't include the script. For example I'll do import $ from 'jQuery'; and all it provides in my rendered js is:

var _jQuery = require('jQuery');
var _jQuery2 = _interopRequireDefault(_jQuery);

Where as I'm expecting the jQuery code to compile into the top of the file. It's precisely this reason why I'm moving over to webpack which is an even bigger ball ache for most anything else that gulp handles easily! Dev's think it's not but just like with pregnancy & birth it's easily forgotten, the pain and heartache leading to the wonderous outcome.

Does anybody have any advice on this.

thank you in advance :-)

Pocketninja
  • 395
  • 1
  • 12
  • I'm confused, are you using Webpack, or gulp-babel? – loganfsmyth Mar 10 '18 at 18:48
  • Gulp-babel I put them the wrong way around out of frustration. – Pocketninja Mar 10 '18 at 18:57
  • let me correct the title – Pocketninja Mar 10 '18 at 19:05
  • 1
    You need to use a `preset` defined in a `.babelrc` file like `{ "presets": ["env"] }` to compile to ES5. As of now, your Babel transforms ES6 `import` to CommonJS. – connexo Mar 10 '18 at 19:11
  • okay so I have this file already with `{ "presets": ["es2015"] }` is there anything else that should go in there? – Pocketninja Mar 10 '18 at 19:12
  • 3
    Babel **is not a bundler**, you need to add a bundler to your build environment (webpack, brunch, rollup, browserify). – connexo Mar 10 '18 at 19:16
  • 1
    https://github.com/babel/babelify along with https://github.com/ngryman/gulp-bro – connexo Mar 10 '18 at 19:18
  • @connexo There we go, done, thank you for the additonal info. it now compiles beautifully you beautiful person. If that stuff can be added to the gulp-babel document then everybody is a winner. – Pocketninja Mar 10 '18 at 20:13
  • 1
    @Pocketninja I don't understand. Browserify does pretty much the same thing that Webpack does, and neither of these use gulp-babel at all. Why would that be included in the gulp-babel docs? – loganfsmyth Mar 10 '18 at 20:16
  • Are you having a laugh...? You've been more a barrier than a help, mate, you're all about questions and not solutions. I needed to get webpack style stuff done and I wanted it all to be using gulp tasks. I wanted to use gulp-babel and so now I have the solution provided by @connexo that you probably could have provided to me. I'm really sorry to say all of this but it's has just been the case and maybe we're all learning right now. Peace out. – Pocketninja Mar 10 '18 at 20:23
  • 1
    You asked how to do it with `gulp-babel` specifically, so the answer was "you can't", you didn't ask how to do it with Gulp in general. You can use Webpack from Gulp too, but you said you didn't want Webpack, so your question was just super confusing. I'm sorry I frustrated you, I was just looking for clarity. I asked because if you didn't want Webpack, I'd have assumed that you also didn't want Browserify, since they do the same thing. – loganfsmyth Mar 10 '18 at 20:29
  • Yeah that is fine, thank you, I was thinking you would know the answer anyway. I've never had to use browserify so for me I just wasn't sure what was going on. One of the things I do when answering any questions that I'm not so sure of is to ask a question but also to cover all bases by assuming the direction it's going in and providing an working example :-) If it requires effort then I'm learning, if it's easy then it's quick to show. – Pocketninja Mar 10 '18 at 20:38
  • 1
    @loganfsmyth and I'm sorry too :-P – Pocketninja Mar 10 '18 at 20:55

0 Answers0