CODEWITHSUNDEEP
javascriptgulpecmascript-6babeljsecmascript-5
TheWebs
TheWebs

Reputation: 12933

gulp babel, exports is not defined

Consider the following example code (and maybe I am doing it wrong?)

 var FlareCurrency = {

 };

export {FlareCurrency};

I have the following task:

gulp.task("compile:add-new-currency-minified", function(){
  return gulp.src('src/add-new-currency/**/*.js')
             .pipe(babel())
             .pipe(concat('Flare-AddNewCurrency.js'))
             .pipe(uglify({"preserveComments": "all"}))
             .pipe(gulp.dest('dist/minified/'));
});

When I run this I get the following:

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var FlareCurrency={};exports.FlareCurrency=FlareCurrency;

For the fun of it, I wanted to run it in the console, yes I know it does nothing but I didn't expect to see this:

Uncaught ReferenceError: exports is not defined(…)

The non minified version:

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
var FlareCurrency = {};

exports.FlareCurrency = FlareCurrency;

throws the same error. Ideas?

Upvotes: 46

Views: 56825

Answers (2)

gureenkov56
gureenkov56

Reputation: 172

I fix it just set se6 for settings gulp-typescript package:

import gulp from 'gulp';
import ts from 'gulp-typescript';
import uglify from 'gulp-uglify';
import browserSync from 'browser-sync';



export const scripts = () => {
    return gulp.src(['app/scripts/*', '!app/scripts/modules/'])
    .pipe(ts({
        noImplicitAny: true,
        target: "es6" // <<< THIS
    }))
    .pipe(uglify()) 
    .pipe(gulp.dest('dist/scripts/'))
    .pipe(browserSync.stream())
}

Besides you have to set type="module" for connect your js file in html.

<script type="module" src="scripts/index.js"></script>

Upvotes: 0

Tiago Romero Garcia
Tiago Romero Garcia

Reputation: 1078

That is not actually a babel issue, you are just trying to run CommonJS code (transpiled from ES6 export) in the browser without preparation. CommonJS doesn't run on the browser, you need to use a tool to package it for the browser, such as Webpack or Browserify.

Just by coincidence this week I created a small project on Github that shows a setup of Gulp + ES6 code (using export) + Babel + Webpack: gulp-es6-webpack-example.

In my example you can load JS code on the browser either synchronously (pre-loaded) or asynchronously (lazy-loaded).

Upvotes: 49

Related Questions