浏览器化 + tsify + babelify； babel 被忽略

Question

我想对我的代码进行 browserify、tsify 和 babelify。 Browserify 和其他转译器之一可以工作，但它们不能一起工作。 Babel 似乎被忽略了（甚至不读 .babelrc）。

我有以下 gulp 代码：

const gulp = require("gulp");
const browserify = require("browserify");
const source = require('vinyl-source-stream');
const tsify = require("tsify");
const babelify = require("babelify");

function build() {

  var b = browserify({
    basedir: '.',
    debug: true,
    cache: {},
    entries: ['src/index.ts'],
    packageCache: {}
  });

  return b
    .plugin(tsify)
    .transform(babelify)
    .bundle()
    .on("error", function (err) { console.log("Error: " + err.message); })
    .pipe(source('build.js'))
    .pipe(gulp.dest("build"));
 }

 gulp.task("build", build);

有了这个 babelrc

{
   "presets": ["minify"]
}

以及那些依赖项

"@babel/core": "^7.2.2",
"babel-preset-minify": "^0.5.0",
"babelify": "^10.0.0",
"browserify": "^16.2.3",
"gulp": "^4.0.0",
"tsify": "^4.0.1",
"typescript": "^3.2.2",
"vinyl-source-stream": "^2.0.0"

如前所述，即使我将 babelrc 更改为如下所示，我也没有收到任何错误，只是没有缩小代码。

Answer 1

虽然我不完全知道为什么上面的代码不起作用，但我找到了一个替代方法。

使用提供的设置 here。请注意，为了使其正常工作，您必须将 tsconfig 中 module 键的值更改为 es5（而不是 es6）。所以它看起来像这样：

{
    "compilerOptions": {
        "outDir": "build",
        "module": "es5",
        "moduleResolution": "node",
        "target": "es6"
    }
}

浏览器化 + tsify + babelify； babel 被忽略

browserify + tsify + babelify; babel gets ignored

javascript

browserify

typescript

gulp

babeljs