如何使用gulp-babel转换nodejs Gulp-Task并忽略"import"? [英] How transpiling nodejs Gulp-Task with gulp-babel and ignore "import"?

问题描述

目标是将ES6脚本转换为ES5并使它们在浏览器中可读. 这最适合我的node.js gulp任务，但是某些脚本使用

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.

"gulp-babel"中是否有实现此目标的参数，或者有另一种想法可以更好地实现这一目标?

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

这是我的大任务:

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

推荐答案

我找到了一种方法:

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

这篇关于如何使用gulp-babel转换nodejs Gulp-Task并忽略"import"?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！