babel / babel/website

Need an example babel.config.js w/ how to achieve pollution-free polyfills via core-js3

Open
#2,118 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
777
Forks
1.4k
Avg merge
16h 45m
Merged PRs (30d)
3

Description

I was very excited to use core-js3 when I found out that it supported pollution-free polyfills for String.prototype.includes + other instance methods.

According to the babel [documentation](https://babeljs.io/docs/en/babel-plugin-transform-runtime) and [release notes](https://babeljs.io/blog/2019/03/19/7.4.0#core-js-3-7646-https-githubcom-babel-babel-pull-7646), pollution-free polyfills are one of the major value-adds that core-js3 brings. We need to link from the docs to a howto page that explains the feature.

Things that were not clear when trying to achieve pollution-free polyfills:
* They are not the default for core-js3
* What the minimal packages required are
* What a minimal babel config looks like

When I posted on Babel's Slack, someone sent me the release notes for [core-js@3](https://github.com/zloirock/core-js/blob/master/docs/2019-03-19-core-js-3-babel-and-a-look-into-the-future.md#babelruntime), which mentioned 3-4 distinct packages (one of which doesn't exist).

Eventually, with 2 days of googling and searching for "pollution" and "pollute" throughout core-js and babel docs, I came up with this answer:

```js
module.exports = {
"presets": [
"@babel/preset-env"
],
/**
* To add non-polluting polyfills for instance method transforms (String.prototype.includes, etc)
* `npm i -D @babel/plugin-transform-runtime`
* and pass in { corejs: 3 } to the options below...
*/
"plugins": [
["@babel/plugin-transform-runtime", {
"corejs": 3
}]
]
}

```

I'm still very grateful for the ability to transform instance methods without polluting the global scope. It works seamlessly once it's configured. Just want to make the information on how to get it done more accessible :-)

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with the Babel documentation page for @babel/plugin-transform-runtime and the linked core-js@3 release notes. Use the issue's babel.config.js example as the basis for a how-to page or linked documentation that explains the non-default setup, minimal packages, and expected pollution-free behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
babel, javascript
Domain
documentation
Issue type
Documentation
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.