ES6 JavaScript in Babel 8 (Babel and Webpack)

sage
1

I’m trying to include Babel and Webpack in my build process so that I can use ES6 JavaScript.

With help from this thread below I seem to have my script passing through Babel - at least there are no errors when running gulp scripts.

However the very next problem was that my import statement, which I was hoping would import the app’s main class, simply was converted into a require, which the browser won’t swallow. For reasons I don’t understand the actual error I’m getting is:

Uncaught ReferenceError: require is not defined at popper.js:28
This goes away when I remove the import line, so that should be the source of the error. I can also see in the minified file that import indeed has been transpiled to require.

This then lead me to think I also needed to run my scripts through a separate plugin that resolves dependencies and I went for Webpack. But so far I haven’t had any luck integrating that in my build.

I’m currently getting this error (full path removed):
Error in plugin ‘gulp-webpack’
Message: Path doesn’t exist ‘…/76ece425ab20a1463715.js’

Two questions:

  1. Am I understanding the problem right - that I need to perform both these steps?
  2. If so, how I can get Webpack to pass its result on to Babel?

Thanks so much for any help!

Here’s what I currently have in my Gulp file:

var jsTasks = function(filename) {

  var f = filter(project.js, {restore: true});

  return lazypipe()
    .pipe(function() {
      return gulpif(enabled.maps, sourcemaps.init());
    })
        
    .pipe(function() {
      return f;
    })    
    
    // Webpack   
    .pipe(function() {
      return webpack();
    })
    
    .pipe(function() {
      return babel({
        "presets": [
          ["env", {
            "targets": {
              "browsers": ["last 2 versions", "safari >= 7"]
            }
          }]
        ]
      });
    })
    
    .pipe(function() {
      return f.restore;
    })

   .pipe(concat, filename)

   ...