将 gulp 与 tsify 和 babelify 一起使用不是运行 babel

Question

我有以下 gulp 任务（根据要求包括我的所有要求）：

const gulp = require("gulp");
const browserify = require("browserify");
const tsify = require("tsify");
const sass = require('gulp-sass');
const fs = require('fs');
const uglify = require('gulp-uglify');
const tslint = require('gulp-tslint');
const gutil = require('gulp-util');
const babelify = require("babelify");

gulp.task('js', function () {
    return browserify({
        entries: paths.ts + 'App/start.ts',
        debug: true
    }).plugin("tsify")
        .transform(babelify.configure({
            presets: ["es2015"]
        }))
        .bundle()
        .on('error', swallowError)
        .pipe(fs.createWriteStream(jsOutput + "app.js"));
});

package.json 中包含所有必需的模块，包括 babel-preset-es2015。然而，babelify 转换根本没有做任何事情，以至于我可以将 "es2015" 更改为任何东西并且我得到完全相同的结果（es6 输出）。

我试过包含一个带有指定预设的 .babelrc 文件，但没有效果，以及指定 babelify 转换的几种不同方法，包括添加 .ts 文件扩展名。

我的 tsconfig.json 有以下内容：

"compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
}

指定输出类型为ES6。

在此过程中没有抛出任何错误，打字稿已完全转译，我只剩下 ES6 代码。

Answer 1

你必须告诉 Babelify 要考虑的文件扩展名，在这种情况下对于 TypeScript 是 .ts：

// ...
.transform(babelify, {
    presets: ['es2015'],
    extensions: ['.js', '.ts'] // <-- I have added .js and .ts
})
// ...

将 gulp 与 tsify 和 babelify 一起使用不是运行 babel

Using gulp with tsify and babelify isn't running babel

browserify

typescript

gulp

babeljs

将 gulp 与 tsify 和 babelify 一起使用不是 运行 babel

Using gulp with tsify and babelify isn't running babel

browserify

typescript

gulp

babeljs

将 gulp 与 tsify 和 babelify 一起使用不是运行 babel