title: "require is not defined"
body: <p>I am currently trying to write my first JS module, and simply have the following</p>
  
  <p><strong>dist/script.js</strong></p>
  
  <pre><code>// Import classes
  import { ScrollTrigger } from './lib/scroll-trigger.js';
  </code></pre>
  
  <p><strong>dist/lib/scroll-trigger.js</strong></p>
  
  <pre><code>export class ScrollTrigger {
    constructor() {
      console.log("working");
    }
  
    /**
     * Run the logic
     */
    init() {
  
    }
  }
  </code></pre>
  
  <p><strong>gulpfile.js</strong></p>
  
  <pre><code>var gulp = require('gulp');
  var sass = require('gulp-sass');
  var livereload = require('gulp-livereload');
  var minify = require('gulp-minify');
  var babel = require("gulp-babel");
  
  // Process and minify SCSS to CSS
  gulp.task('styles', function() {
      gulp.src('sass/**/*.scss')
          .pipe(sass().on('error', sass.logError))
          .pipe(gulp.dest('dist'))
  });
  
  // Compress scripts
  gulp.task('compress', function() {
    gulp.src('scripts/**/*.js')
    .pipe(babel())
    .pipe(minify({
      ext:{
        src:'-debug.js',
        min:'.js'
      },
      exclude: ['tasks'],
      ignoreFiles: ['.combo.js', '-min.js']
    }))
    .pipe(gulp.dest('dist'))
  });
  
  //Watch task
  gulp.task('default',function() {
      livereload.listen();
      gulp.watch('sass/**/*.scss',['styles']);
      gulp.watch('scripts/**/*.js',['compress']);
  });
  </code></pre>
  
  <p>However when running, I receive "import not defined", and when running through the BabelJS gulp task I have setup, I receive "require is not defined".</p>
  
  <p>I feel I'm missing something completely obvious here, but am at a loss!</p>