[英]How transpiling nodejs Gulp-Task with gulp-babel and ignore “import”?
目標是將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
};
我找到了一種方法:
// 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
};
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.