browserify + 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 改成以下这样的内容，也不会出现错误，但它就是不能缩小代码。

- MaximilianMairinger

---

你看过这个例子吗？https://github.com/TypeStrong/tsify/tree/master/examples/babelify - cartant

@cartant 刚尝试了一下，似乎与预设的 es2015 一起使用效果很好，但当我将预设更改为 minify 时，会抛出 <code>ParseError: 'import' and 'export' may appear only with 'sourceType: module'</code>。 - MaximilianMairinger

@cartant确实如此，但为什么它会与es2015预设一起工作呢？ - MaximilianMairinger

可能是因为该预设看到它发出了CommonJS模块。我不知道为什么。我已经很久没有使用Browserify了，所以我已经很久没有涉及这些东西了。 - cartant

@cartant只是出于好奇，您在使用什么？ - MaximilianMairinger

Answer 1

虽然我不确定为什么上面的代码不起作用，但我找到了一种替代方法。

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

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

- MaximilianMairinger