javascript - browserify + tsify + babelify; babel é ignorado
Eu quero browserificar, tsificar e babelificar meu código. Browserify e um dos outros transpilers funcionam, mas juntos eles não. Babel simplesmente parece ser ignorado (nem mesmo lê o .babelrc).
Eu tenho o seguinte código 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);
Com este babelrc
{
"presets": ["minify"]
}
E essas dependências
"@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"
Como disse, mesmo se eu mudar o babelrc para algo como o seguinte, não recebo erros, ele simplesmente não minimiza o código.
Resposta #1
Embora eu não saiba exatamente por que o código acima não funciona, eu encontrei uma alternativa.
Use a configuração fornecida aqui. Observe que, para que funcione, você terá que alterar o valor da chave module no tsconfig para es5 (em vez de es6). Para que fique assim:
{
"compilerOptions": {
"outDir": "build",
"module": "es5",
"moduleResolution": "node",
"target": "es6"
}
}
