8

我正在开发一个 JS 库，我想将所有用 ES6 编写的 javascript 代码转换为 ES5 标准，以便在当前浏览器中获得更多支持。

问题是我想在 Gulp 任务中使用 Babel，所以我已经安装了所有这些 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"
}

接下来我的.babelrc文件有以下内容：

{
  "presets": ["env"]
}

并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']);

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

#user1:/project-route$> gulp
    [17:36:54] Using gulpfile /project-route/gulpfile.js
    [17:36:54] Starting 'minify'...

我也试过没有sourcemaps函数，结果是一样的，什么都没有！！！.

4

1 回答 1

9

出于一个额外的原因，当我在终端babel -V中执行时，结果是：

#user1:/project-route$> gulp
    6.26.0 (babel-core 6.26.3)

这与我安装的版本不同（我记得）：

"@babel/core": "^7.1.2", 
"@babel/preset-env": "^7.1.0",

所以，我卸载了所有这些依赖项：

"@babel/core": "^7.1.2",
"@babel/preset-env": "^7.1.0",
"gulp-babel": "^8.0.0",

我安装了这个替换：

"babel-core": "^6.26.3",
"babel-preset-env": "^1.7.0",
"gulp-babel": "^7.0.1",

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

当然，解释是根据 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
于 2018-10-03T15:33:22.807 回答