gulp-babel不会产生任何输出文件或无法正常工作

Yul*_*nez 8 javascript npm transpiler gulp gulp-babel

我正在研究JS库,我想将所有用ES6编写的javascript代码转换为ES5标准,以便在当前浏览器中获得更多支持.

问题是我想将Babel与Gulp任务一起使用,所以我已经安装了所有这些NPM包[ package.json]:

"devDependencies": {
  "@babel/core": "^7.1.2",
  "@babel/preset-env": "^7.1.0",
  "babel-cli": "^6.26.0",
  "gulp": "^3.9.1",
  "gulp-babel": "^8.0.0",
  "gulp-concat": "^2.6.1",
  "gulp-sourcemaps": "^2.6.4",
  "gulp-terser": "^1.1.5"
}
Run Code Online (Sandbox Code Playgroud)

接下来我的.babelrc文件包含以下内容:

{
  "presets": ["env"]
}
Run Code Online (Sandbox Code Playgroud)

gulpfile.js写入如下:

const gulp = require('gulp');
const sourcemaps = require('gulp-sourcemaps');
const babel = require('gulp-babel');
const concat = require('gulp-concat');
const terser = require('gulp-terser');

gulp.task('minify', function () {
    return gulp.src('src/app/classes/*.js')
        .pipe(sourcemaps.init()) 
        .pipe(babel())     // I do not pass preset, because .babelrc do exist
        .pipe(concat('output.js'))   
        .pipe(sourcemaps.write('.'))   
        .pipe(gulp.dest('build/js'))
});

gulp.task('default', ['minify']);
Run Code Online (Sandbox Code Playgroud)

问题是当我gulp在项目根目录上执行命令时,它不会产生输出文件.控制台显示成功执行但build/js目录内没有任何内容,或者既没有出现在项目的另一个目录中.

#user1:/project-route$> gulp
    [17:36:54] Using gulpfile /project-route/gulpfile.js
    [17:36:54] Starting 'minify'...
Run Code Online (Sandbox Code Playgroud)

我也试过没有sourcemaps功能,结果是一样的,没有!.

Yul*_*nez 9

由于种种原因,当我在终端中执行时babel -V,结果是:

#user1:/project-route$> gulp
    6.26.0 (babel-core 6.26.3)
Run Code Online (Sandbox Code Playgroud)

这与我安装的版本不同(我记得):

"@babel/core": "^7.1.2", 
"@babel/preset-env": "^7.1.0",
Run Code Online (Sandbox Code Playgroud)

因此,我卸载了所有这些依赖项:

"@babel/core": "^7.1.2",
"@babel/preset-env": "^7.1.0",
"gulp-babel": "^8.0.0",
Run Code Online (Sandbox Code Playgroud)

我安装了这些替代品:

"babel-core": "^6.26.3",
"babel-preset-env": "^1.7.0",
"gulp-babel": "^7.0.1",
Run Code Online (Sandbox Code Playgroud)

现在所有功能都可以使用!!!


当然,相应的解释是针对gulp-babel插件的README.md上的此注释的,意识到这一点让我头疼很多:

安装指南(GitHub上的gulp-babel)

安装

安装gulp-babel,如果你想获得的下一版本发布前gulp-babel

# Babel 7
$ npm install --save-dev gulp-babel @babel/core @babel/preset-env

# Babel 6
$ npm install --save-dev gulp-babel@7 babel-core babel-preset-env
Run Code Online (Sandbox Code Playgroud)