web-dev-qa-db-ja.com

gulp-babelが出力ファイルを生成しないか、正しく機能しない

私は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関数なしで試しましたが、結果は同じですnothing !!!。

javascriptnpmgulptranspilergulp-babel
8
Yulio Aleman Jimenez

奇妙な理由で、ターミナルで実行すると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
9
Yulio Aleman Jimenez