How transpiling nodejs Gulp-Task with gulp-babel and ignore "import"?

Question

The goal is, transpiling ES6 scripts into ES5 and make them browser readable. This works most with my node.js gulp task, but some of the script use "import" like

import EstaticoModule from '../../assets/js/helpers/module';

I would like to skip this "import" and more over delete this row from result.

Is there a param in "gulp-babel" to achieve this or has one another idea to make this in a better way?

Here is my gulp task:

'use strict';

/**
 * @function `gulp js:lint1`
 * @desc Lint JavaScript files (using `ESLint`).
 */

var gulp = require('gulp'),
    helpers = require('require-dir')('../../helpers'),
    webpack = require('webpack'),
    babel = require("gulp-babel");
    //babel = require("babelify");
    //babel = require("babel-core");

    //require("babel-core");
var taskName = 'js:lint1',
    taskConfig = {
        src: [
            'source/assets/js/**/*.js',
            'source/modules/**/*.js',
            'source/pages/**/*.js',
            'source/demo/modules/**/*.js',
            'source/demo/pages/**/*.js',
            '!source/modules/**/*.data.js',
            '!source/pages/**/*.data.js',
            '!source/demo/modules/**/*.data.js',
            '!source/demo/pages/**/*.data.js',
            '!source/modules/.scaffold/scaffold.js',
            '!source/assets/js/libs/**/*.js',
            '!source/assets/js/libs/wtscript.js'
        ],
        watch: [
            './source/assets/js/**/*.js',
            './source/modules/**/*.js',
            './source/pages/**/*.js',
            './source/demo/modules/**/*.js',
            './source/demo/pages/**/*.js',
            '!./source/modules/.scaffold/scaffold.js'
        ],
        dest: './RSE/',
        srcBase: './source/assets/js/'
    }

gulp.task( taskName, function() {

    var helpers = require('require-dir')('../../helpers'),
        tap = require('gulp-tap'),
        path = require('path'),
        cached = require('gulp-cached'),
        eslint = require('gulp-eslint');

    return gulp.src(taskConfig.src, {
        dot: true
    })
        .pipe(cached('linting'))
        .pipe(eslint())
        .pipe(eslint.formatEach())
        .pipe(tap(function(file) {
            if (file.eslint && file.eslint.errorCount > 0) {
                helpers.errors({
                    task: taskName,
                    message: 'Linting error in file "' + path.relative('./source/', file.path) + '" (details above)'
                });
            }else{
                console.log(file);
            }
        }))
        .pipe(babel({
            presets: [
                'es2015',
                'react'
            ],
            plugins: [
                // Work around some issues in IE
                'transform-class-properties',
                'transform-proto-to-assign',
                ['transform-es2015-classes', {
                    loose: true
                }]
            ]
        }))
        .pipe(gulp.dest(taskConfig.dest))
        ;
});

module.exports = {
    taskName: taskName,
    taskConfig: taskConfig
};

score 0 · Answer 1 · answered Jul 10 '18 at 11:18

I have found a way:

//  EXCLUDE IMPORTS FROM STREAM
var content = file.contents.toString();
content = content.replace(/import/g, "//$&");
//  RETURN STREAM INTO PIPE
file.contents = Buffer.from(content);

This will result in

//import EstaticoModule from '../../assets/js/helpers/module';

Here is the code in summary:

'use strict';

/**
 * @function `gulp js:create:js:files`
 * @desc Lint JavaScript files (using `ESLint`), EXCLUDE IMPORTS FROM STREAM and create separate js files in modules/%module% folder.
 */

var gulp = require('gulp'),
    helpers = require('require-dir')('../../helpers'),
    webpack = require('webpack'),
    babel = require("gulp-babel");

var taskName = 'js:create:js:files',
    taskConfig = {
        src: [
            'source/assets/js/**/*.js',
            'source/modules/**/*.js',
            'source/pages/**/*.js',
            'source/demo/modules/**/*.js',
            'source/demo/pages/**/*.js',
            '!source/modules/**/*.data.js',
            '!source/pages/**/*.data.js',
            '!source/demo/modules/**/*.data.js',
            '!source/demo/pages/**/*.data.js',
            '!source/modules/.scaffold/scaffold.js',
            '!source/assets/js/libs/**/*.js',
            '!source/assets/js/libs/wtscript.js'
        ],
        watch: [
            './source/assets/js/**/*.js',
            './source/modules/**/*.js',
            './source/pages/**/*.js',
            './source/demo/modules/**/*.js',
            './source/demo/pages/**/*.js',
            '!./source/modules/.scaffold/scaffold.js'
        ],
        dest: './build/',
        srcBase: './source/assets/js/'
    }

gulp.task( taskName, function() {

    var helpers = require('require-dir')('../../helpers'),
        tap = require('gulp-tap'),
        path = require('path'),
        cached = require('gulp-cached'),
        eslint = require('gulp-eslint');

    return gulp.src(taskConfig.src, {
        dot: true
    })
        .pipe(cached('linting'))
        .pipe(eslint())
        .pipe(eslint.formatEach())
        .pipe(tap(function(file) {
            if (file.eslint && file.eslint.errorCount > 0) {
                helpers.errors({
                    task: taskName,
                    message: 'Linting error in file "' + path.relative('./source/', file.path) + '" (details above)'
                });
            }else{
                //  EXCLUDE IMPORTS FROM STREAM
                var content = file.contents.toString();
                content = content.replace(/import/g, "//$&");
                //  RETURN STREAM INTO PIPE
                file.contents = Buffer.from(content);
            }
        }))
        .pipe(babel({
            presets: [
                'es2015'
                ,'react'
            ],
            plugins: [
                // Work around some issues in IE
                'transform-class-properties',
                'transform-proto-to-assign',
                ['transform-es2015-classes', {
                    loose: true
                }]
            ]
        }))
        .pipe(gulp.dest(taskConfig.dest))
        ;
});

module.exports = {
    taskName: taskName,
    taskConfig: taskConfig
};

How transpiling nodejs Gulp-Task with gulp-babel and ignore "import"?

1 Answers1

Linked