babel / babel/gulp-babel

Documentation: How to use polyfills

Open
#219 0 comments 6 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
1.3k
Forks
113
PR merge metrics
No merged PRs in 30d

Description

I am failing miserably to get gulp-babel to pollyfil instance methods such as `Array.prototype.includes`

Looking through the internet, i see various docs, such as https://babeljs.io/docs/en/usage/#polyfill but no indication of how to use this with gulp-babel

I have a very basic setup:

package.json

```
{
...
"dependencies": {},
"devDependencies": {
"@babel/core": "^7.14.8",
"@babel/preset-env": "^7.14.8",
"gulp": "latest",
"gulp-autoprefixer": "latest",
"gulp-babel": "^8.0.0",
"gulp-clean-css": "latest",
"gulp-concat": "latest",
"gulp-minify": "latest",
"gulp-rename": "latest",
"gulp-sass": "latest"
},
...
}
```
gulpfile.js

```
var themepath = "xx"
var gulp = require('gulp');
var babel = require('gulp-babel');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var cleanCSS = require('gulp-clean-css');
var minify = require('gulp-minify');
var rename = require('gulp-rename');
var autoprefixer = require('gulp-autoprefixer');

gulp.task('js', function () {
return gulp.src(themepath + 'assets/src/js/**/*.js')
.pipe(concat('main.js'))
.pipe(babel({
presets: ['@babel/preset-env']
}))
.pipe(minify({
ext: {
min: '.min.js'
}
}))
.on('error', handleError)
.pipe(gulp.dest(themepath + 'assets/dist/js'))
});
```

After running the js task, `dist/js/main.js` will have arrow functions converted to ES5, but calls to `Array.prototype.includes` will stll exist, and there is no pollyfil code either.

I can of course get around this issue by manually copying selected polyfills into a polyfills.js file in the js folder, but this is prone to errors, and somewhat negates the purpose of using babel in the first place.

I expect this is a symple config issue, that could be solved by a document update. I (and many other internet strangers) would appreciate it if this can be solved

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with the documented Babel polyfill guidance and compare it with the configuration in gulpfile.js and package.json. Check the generated dist/js/main.js against the reported behavior, then document the supported gulp-babel setup and how completion is verified for Array.prototype.includes without requiring manual polyfills.js copying.

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
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.