0

I use Gulp as task manager and Babel for convert my ES6 program to a version that is understandable for browsers, not for Node!

const gulp = require('gulp');
const babel = require('gulp-babel');

gulp.task('default', () =>
    gulp.src('src/app.js')
        .pipe(babel({
            presets: ['es2015']
        }))
        .pipe(gulp.dest('dist'))
);

and in src/app.js I have:

import { square, diag } from 'lib';
//Some code here....

But, when I run the gulp, it make a file in dist but it converts import which is in app.js file to require keyword that is not understandable for browsers... I thought bable will merge imported files in src/app.js to one file in dist

How can I convert my library code to be supported by browsers using Babel?

theLisash
  • 11
  • 4

2 Answers2

3

Babel's job is to transpile. Combining and minifying scripts is a separate task.

You need to add Browserify, Webpack, RequireJS, or similar, and then tell Babel that's what you're using so it emits code to use those. Some further information on the setup page.

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • Thanks, May I ask, what is babel then? I thought it is converting my ES6 to browser supportable version! – theLisash Sep 18 '16 at 06:31
  • 1
    @theLisash: Babel's job is to transpile the language. The job of these other tools is to provide a module system. Some of them also provide support for combining scripts based on the module dependencies. It's about using specific tools for specific jobs. – T.J. Crowder Sep 18 '16 at 06:32
  • @theLisash You are lucky T.J Crowder answered your first question :) Babel is a essentially an ECMAScript 6 to ECMAScript 5 compiler – Mohammad Kermani Sep 18 '16 at 06:39
1

Basicly Babeljs converts your ES6 to ES5, Imagine you have an ES6 code:

const secret = ({ msg = 'es 6 hey!'} = {}) => () => msg;

The above code is in ES6, and Babeljs will help you to convert it to ES5:

'use strict';

var secret = function secret() {
  var _ref = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];

  var _ref$msg = _ref.msg;
  var msg = _ref$msg === undefined ? 'es 6 hey!' : _ref$msg;
  return function () {
    return msg;
  };
};

And require is not a [current] JavaScript standard, you need a 3rd-party library that also have a function named require, libraries like requirejs, browserify, etc.

Even, if you have an ES6 program that includes any export or import keywords when you are working with Babili (online ES6 to ES5 converter) that will notify you that those converted keywords are not supported by browsers:

require is not supported in the browser, you need a commonjs environment such as node.js/io.js, browserify/webpack etc

Online demo

Mohammad Kermani
  • 5,188
  • 7
  • 37
  • 61