1

I'm following Get To Know Babel The JavaScript Compiler Tutorial, and this is my polygon.js

class Polygon {  
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }

  getArea() {
    return this.calcArea()
  }

  calcArea() {
    return this.height * this.width;
  }
}

I run

babel polygon.js -o output.js
cat output.js | pbcopy

pasting:

class Polygon {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }

  getArea() {
    return this.calcArea();
  }

  calcArea() {
    return this.height * this.width;
  }
}

I was expecting a transpiling to ES5 but the code remained unchanged.

What's going on?

$ .babel --version
6.2.0 (babel-core 6.2.1)

EDIT: I installed the presets with npm install babel-preset-2015 -g

~/es6:.babel polygon.js -o output.js --presets es2015
Error: Couldn't find preset "es2015" relative to directory "."
    at OptionManager.mergePresets (/usr/local/lib/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/options/option-manager.js:327:17)
    at OptionManager.mergeOptions (/usr/local/lib/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/options/option-manager.js:287:12)
    at OptionManager.init (/usr/local/lib/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/options/option-manager.js:416:10)
    at File.initOptions (/usr/local/lib/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/index.js:190:75)
    at new File (/usr/local/lib/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/index.js:121:22)
    at Pipeline.transform (/usr/local/lib/node_modules/babel-cli/node_modules/babel-core/lib/transformation/pipeline.js:42:16)
    at transform (/usr/local/lib/node_modules/babel-cli/lib/babel/util.js:53:22)
    at Object.compile (/usr/local/lib/node_modules/babel-cli/lib/babel/util.js:62:12)
    at /usr/local/lib/node_modules/babel-cli/lib/babel/file.js:130:23
    at arrayEach (/usr/local/lib/node_modules/babel-cli/node_modules/lodash/index.js:1289:13)

EDIT: -g after the install was the issue. I installed locally and it works.

quantumpotato
  • 9,637
  • 14
  • 70
  • 146

1 Answers1

4

This caught me out too. The new version of Babel requires you to install a preset, probably the ES2015 one, and explicitly specify it in the CLI command.

Depending on where Babel is installed (globally/locally) that's where you need to install the preset:

npm install babel-preset-es2015

Then you can run Babel. This, for example, transforms all the files in one folder to another using the preset.

babel [srcFolder] --out-dir [outFolder] --presets es2015
Andy
  • 61,948
  • 13
  • 68
  • 95