orberkov orberkov - 3 months ago 12
Javascript Question

Duplicated declarations in compiled out-file using Babel

I am trying to compile two ES6 files into a single ES5 output file using Babel. The resulting file seems to contain DUPLICATED declarations like:

var _createClass = function () { ... }


and

Object.defineProperty(exports, '__esModule', {value: true});


Here are the files:

File1 (./ec6/ec6Class.js)

export class MyClass {
constructor(dep1, dep2) {

}

foo() {
console.log('foo')
}
}


File 2 (./ec6/ec6Class2.js)

import MyClass from './ec6Class';

export class MyClass2 extends MyClass {
constructor(dep1, dep2) {
super(dep1, dep2)
}

bar() {
console.log('bar')
}
}


My Babel CLI command is:

babel src/client/ec6 --out-file script-compiled.js


How do I compile the two file to a single file with single declarations of the Babel infrastructure? Having duplicated declarations is not the desired behaviour.

Answer

I think the problem is that you are telling Babel to compile all files it finds in src/client/ec6, while what you want is a single point of entry (in fact, you already have that). Babel will compile ec6Class.js once because it's a file in that directory, and then a second time because it's imported in ec6Class2.js.

Try with

babel src/client/ec6/ec6Class2.js --out-file script-compiled.js

EDIT
Sorry I answered too fast. In fact, Babel is meant to simply transpile a javascript file from a cutting edge version of ES to a more compatible one. What you need is to combine it with Webpack, a tool that "packs" your multiple javascript files into one (it can minify them as well).

You can use Webpack from the command line and tell it to use Babel to transpile your files first. For a good getting started guide you can read Webpack — The Confusing Parts on Medium.