Grunt , Babel setup for Es6 with external helper

Question

Hi there I have been forced to come here due to every resource out there on the topic is very poor and incomplete.

Not only on the babel site but every single post out there is not complete and informative enough.

I tried to reach out at the babel forum and no replies.

I am trying to convert my prototype libraries to Es6 and convert to the most leanest possible code. So no bloaty duplicated generated code and if possible no bloaty requirejs and whatever browserify generates.

I have tried to make a project with grunt and babel directly, configure the external-helpers plugin according to the babel documentation.

It fails to include the relevant helper code and fails to include the import module code altogether.

ie a babel config like

{
    options: {
        sourceMap: false,
        presets: ['es2015'],
        "plugins": ["external-helpers"]

    },
    dist: {
        files: {
            'build/<%= package.name %>.js': ['src/<%= package.name %>.js']
        }
    }
}

The main project file has an import like

import Button from './ui/buttons/Button';

The module code looks like this as if the export is placed underneath extra code is generated for that.

export default class ShareButton {}

produces an output like this

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

require('babel-core/external-helpers');

var _Button = require('./ui/buttons/Button');

var _Button2 = babelHelpers.interopRequireDefault(_Button);

No source of the module or the helper object is included.

I searched hard for how to deal with external-helpers and it suggests it has to be imported into a separate file ie something like this to generate only the helper functions needed

babel-external-helpers -l createClass > src/helpers.js

But any resource regards to this fails to go as far as to how to import that into the project.

If I use the transform-runtime plugin, it produces a massive polyfill that cannot be disabled so a bug and not so useful for what I need.

"plugins": [
    ["transform-runtime", { "polyfill": false, "regenerator": false }]
]

If I use browserify / babelify it makes a royal mess and duplicates code still.

A config like

{
    options: {
        "transform": [["babelify", {

            "presets": ["es2015"],

            "plugins": ["external-helpers"],

            sourceMap: false
        }]]
    },
    dist: {
        files: {

            'build/<%= package.name %>.js': ['src/<%= package.name %>.js']

        }
    }
}

Produces code like this still with the external helper missing and duplicated code not relevant to the helper. ie

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

Is within every module in the generated file.

If I export the classes like this at the bottom of every file

export default class {}

Duplicated code is generated like

var _class = function _class() {
    babelHelpers.classCallCheck(this, _class);
};

exports.default = _class;

In terms of filesize that doesn't include bloaty wrapping code like

},{}],2:[function(require,module,exports){

It seems concatting all the prototype classes files together to bundle in one file is the winner still.

So trying to port the library but keep it similar and bundle it together into one file.

Hopefully this is concise enough and there is a simple solution.

FYI browsers do not understand tabs and 4 spaces. I had to edit this post in my editor to get the code blocks working ! It would be nice to have a markup like other places like "```" ?

Let me know thanks.

Answer 1

I'm using rollup with babel now. Rollup produces a clean output as umd mode. Browserify is really bloaty in itself.

There is just a problem with polyfills being converted. I have to concat external ones in like for WeakMap.

I had a problem trying to use the generated Iterator and finding a polyfill for that so I have to code loops a particular way it doesn't generate Iterators.

The polyfill generation in babel is still too bloaty and crazy. It's pretty terrible. So I concat in minified polyfills that are very small and it's used globally.

Answer 2

I was running into something very similar. Was tired of trying to do it the "right way" and ended up just creating https://www.npmjs.com/package/grunt-babel-helpers which simply manipulates the string output.