Как транслировать nodejs Gulp-Task с gulp-babel и игнорировать «импорт»? - PullRequest
Новая
       74

Как транслировать nodejs Gulp-Task с gulp-babel и игнорировать «импорт»?

0 голосов
/ 05 июля 2018

Цель - перенести скрипты ES6 в ES5 и сделать их читабельными для браузера. Это лучше всего работает с моей задачей node.js gulp, но некоторые скрипты используют «import», например 

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

Я бы хотел пропустить этот "импорт" и, более того, удалить эту строку из результата.

Есть ли в "gulp-babel" параметр для достижения этого или есть еще одна идея, чтобы сделать это лучше?

Вот мое задание глотка: 

'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
};

1 Ответ

0 голосов
/ 10 июля 2018

Я нашел способ: 

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

Это приведет к 

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

Вот краткий код: 

'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
};
...