I'm using gulp with babel to include polyfills for older browsers we need to support, especially IE:
{
"ignore": ["gulpfile.js"],
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "usage",
"forceAllTransforms": true
}
]
]
}
This itself works, e.g. backticks were replaced that cause issue in IE. But every polyfill is included from its single file like this:
"use strict";
require("core-js/modules/es6.map");
require("core-js/modules/es6.function.name");
require("core-js/modules/es6.string.iterator");
// ...
This cannot be resolved in the browser. It seems that this can be done using browserify, and maybe some kind of module loader (I'm not familar with this), but would result in a lot of http requests. I simply want a single bundled file with all needed polyfills included.
My gulp task:
return (
gulp
.src(jsSources)
.pipe(concat(targetFile))
.pipe(babel())
.pipe(gulp.dest(`${outputFolder}/js`))
);
where jsSources
is an array of my js files. One of them include.
I found this question but it seems wrong to simply replace the require
s by the file content. Is there no cleaner way like concat
gulp plugin for js?