Documentation: How to use polyfills
- 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