Help: setting up Babel, etc, for using fix-esm in gulpfile.js #1

I'm working in VScode trying to get my gulpfile.js to work with vynl-path, which recently has migreated from commonJS to ESM.

In the good old days, one could do something similar to the following:

const gulp =
    { src, dest, watch, series, parallel } = require('gulp'),
    $ = require('gulp-load-plugins')({ camelize: true, lazy: true }),
    del = require('del'),
    vinylPaths = require('vinyl-paths')
};

function convertCase() {
    return src(['./src/assets/fonts/playtime/*.ttf'])
        .pipe(vinylPaths(del))
        .pipe($.rename(function (path) {
            path.dirname = path.dirname.toLowerCase(); path.basename = path.basename.toLowerCase(); path.extname = path.extname.toLowerCase();
        }))
        .pipe(dest('./src/assets/fonts'))
};

But with the more recent vynl-path update, running my above function produces the dreaded "ERR_REQUIRE_ESM".

As the fix-esm plugin requires babel, and I know little about it, what extra do I need to install, and what would I need to change in my gulpfile.js? So far, I've installed fix-esm (npm i fix-esm), declared in my gulpfils.js,

const vinylPaths = require("fix-esm").require('vinyl-paths')

and have locally installed babel,

npm install --save-dev @babel/core @babel/cli

But, am I getting the error, "vinylPaths is not a function", so I am doing something wrong. Any suggestions?

PS: Also, if I may make suggestion, it would be great if the documentation covered how to set up babel to be able to use fix-esm for us novices. Many Thanks!

I'm working in VScode trying to get my gulpfile.js to work with vynl-path, which recently has migreated from commonJS to ESM. In the good old days, one could do something similar to the following: ``` const gulp = { src, dest, watch, series, parallel } = require('gulp'), $ = require('gulp-load-plugins')({ camelize: true, lazy: true }), del = require('del'), vinylPaths = require('vinyl-paths') }; function convertCase() { return src(['./src/assets/fonts/playtime/*.ttf']) .pipe(vinylPaths(del)) .pipe($.rename(function (path) { path.dirname = path.dirname.toLowerCase(); path.basename = path.basename.toLowerCase(); path.extname = path.extname.toLowerCase(); })) .pipe(dest('./src/assets/fonts')) }; ``` But with the more recent vynl-path update, running my above function produces the dreaded "ERR_REQUIRE_ESM". As the fix-esm plugin requires babel, and I know little about it, what extra do I need to install, and what would I need to change in my gulpfile.js? So far, I've installed fix-esm (npm i fix-esm), declared in my gulpfils.js, `const vinylPaths = require("fix-esm").require('vinyl-paths')` and have locally installed babel, `npm install --save-dev @babel/core @babel/cli` But, am I getting the error, "vinylPaths is not a function", so I am doing something wrong. Any suggestions? PS: Also, if I may make suggestion, it would be great if the documentation covered how to set up babel to be able to use fix-esm for us novices. Many Thanks!

As a solution, I've gone back to the depreciated, but much appreciated, "gulp-clean", for now--although I would stll like to learn how to use vinyl-pulgin with the newer fix-esm plugin so I can use ESM modules in commonJS in the future if needed.

Here is my current working code going back to gulp-clean:

function convertCase() {
    return src(['./src/assets/fonts/**/*[A-Z]*'], { base: "./" })
        .pipe($.clean({ force: true }))
        .pipe($.rename(function (path) {
            path.dirname = path.dirname.toLowerCase(); path.basename = path.basename.toLowerCase(); path.extname = path.extname.toLowerCase(); 
        .pipe(dest('.'));
};

(1) match filenames with any capital letters, (2) delete them, (3) rename them to lowercase, and (4) pipe the result into the same directory

As a solution, I've gone back to the depreciated, but much appreciated, "gulp-clean", for now--although I would stll like to learn how to use vinyl-pulgin with the newer fix-esm plugin so I can use ESM modules in commonJS in the future if needed. Here is my current working code going back to gulp-clean: ``` function convertCase() { return src(['./src/assets/fonts/**/*[A-Z]*'], { base: "./" }) .pipe($.clean({ force: true })) .pipe($.rename(function (path) { path.dirname = path.dirname.toLowerCase(); path.basename = path.basename.toLowerCase(); path.extname = path.extname.toLowerCase(); .pipe(dest('.')); }; ``` (1) match filenames with any capital letters, (2) delete them, (3) rename them to lowercase, and (4) pipe the result into the same directory

Labels Milestones

Help: setting up Babel, etc, for using fix-esm in gulpfile.js #1