New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature: Interpret Magic Comments for preset-env to add polyfills #9072

Open
axten opened this Issue Nov 23, 2018 · 3 comments

Comments

Projects
None yet
3 participants
@axten

axten commented Nov 23, 2018

Feature Request

Is your feature request related to a problem? Please describe.
It would be great if babel/preset-env could interpret magic comments in files in order to add builtIn polyfills.

Describe the solution you'd like
An example: Assume I have a config like this

presets: [
    ['@babel/preset-env', {
        modules: false,
        useBuiltIns: 'usage',
        targets: {
            "chrome": "58",
            "ie": "11"
        },
    }],
],

and a library like Choices.js. It is shipped as ES5 node module but it uses some modern features like Array.find (see complete list here). Normally, node_modules are excluded from babel so preset-env has no chance to detect these used features and include the polyfills. So now my idea comes in....

Wouldn't it be nice to have something like that to make it work:

/* babel-used-buildins array.find, Object.assign */
import Choices from 'choices.js';


...
const input = new Choices(element, options);
...

Describe alternatives you've considered
Sure, it may exist a way to achieve this with config values but for me, thats a kind of polluting the config.

Teachability, Documentation, Adoption, Migration Strategy
later :)

@babel-bot

This comment has been minimized.

Collaborator

babel-bot commented Nov 23, 2018

Hey @axten! We really appreciate you taking the time to report an issue. The collaborators
on this project attempt to help as many people as possible, but we're a limited number of volunteers,
so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack
community that typically always has someone willing to help. You can sign-up here
for an invite.

@nicolo-ribaudo

This comment has been minimized.

Member

nicolo-ribaudo commented Nov 24, 2018

Note that I think that you could already do something like this:

useBuiltIns: [].find, Object.assign;
import Choices from 'choices.js';

...
const input = new Choices(element, options);
...

EDIT: It works 🙂

import "core-js/modules/es6.object.assign";
import "core-js/modules/es6.array.find";

useBuiltIns: [].find, Object.assign;

import Choices from 'choices.js';
var input = new Choices(element, options);

A minifier can then easily detect that useBuiltIns: [].find, Object.assign; doesn't have side effects and remove it.
If you prefer, you can use Array.prototype.find instead of [].find

@axten

This comment has been minimized.

axten commented Nov 24, 2018

Ok, thats definitely an alternative I haven't considered yet :)
For the record: I think that a magic comment would be a bit nicer for co-workers when reading the code later on (in terms of maintainability)...
Therefore I will leave this open for a while... maybe someone like to land a PR for that :)
thanks @nicolo-ribaudo !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment