16

I would like the TypeScript Compiler to use node_modules/firebase/firebase.d.ts to typecheck my code and also bundle node_modules/firebase/firebase.js into some of the files where I import things from firebase. I understand there are many options which will do this for me, but I'd like to keep a minimal dev environment.

I have set "moduleResolution": "node" in my tsconfig.json, which imports the definitions and type checks my code as I want. I've also added "isolatedModules": true in an attempt to have it bundle the actual code into each of my targets, but the generated code does not bundle firebase.js as I would like. Is there a "module" compiler option which will do this for me, or should I be adding something else?

If I absolutely need another tool in my dev process, what is the simplest addition to tsc which will bundle each of my JS files + their dependencies into a single js file bundle?

Andrey Fedorov
  • 9,148
  • 20
  • 67
  • 99
  • You should consider narrowing this down to the question in your first sentence. The last two phrases are making a separate question that is not only too vague, but has also been answered: https://stackoverflow.com/questions/35062852/npm-vs-bower-vs-browserify-vs-gulp-vs-grunt-vs-webpack – E_net4 Jul 03 '17 at 20:53
  • 2
    my question is specifically the last one — should I be using `tsc` for bundling? I'll remove the type checking, as that's clearly what `tsc` is designed for. good point, thanks. – Andrey Fedorov Jul 03 '17 at 20:57
  • 1
    That might also be a duplicate: https://stackoverflow.com/q/40019087/1233251 Although it mentions Node.js modules specifically, it covers why `tsc` is typically not used for bundling. – E_net4 Jul 03 '17 at 21:00
  • See also: https://stackoverflow.com/q/42788059/1233251 – E_net4 Jul 03 '17 at 21:02
  • Thanks, that's a bit of a confusing question, but the answer does answer mine as well. Happy to make this one more clear-cut one. – Andrey Fedorov Jul 03 '17 at 21:08
  • Possible duplicate of [NPM vs. Bower vs. Browserify vs. Gulp vs. Grunt vs. Webpack](https://stackoverflow.com/questions/35062852/npm-vs-bower-vs-browserify-vs-gulp-vs-grunt-vs-webpack) – E_net4 Jul 03 '17 at 21:10
  • I wouldn't say it's a duplicate, since that doesn't ask specifically "how do I use `tsc` for bundling?", which is something not wholly unreasonable for it to do given how many `"module"` options there are. – Andrey Fedorov Jul 03 '17 at 21:13
  • It doesn't have to be the exact same question. If the answers in the other question also answer this one, then it's a valid duplicate target. – E_net4 Jul 03 '17 at 21:19
  • Let me clarify: the question does not ask it and the answer does not answer it. More specifically, the answer doesn't mention `tsc` and only mentions TypeScript in a different context. – Andrey Fedorov Jul 03 '17 at 21:22
  • That detail is not important because it doesn't matter. You would bundle a TypeScript project with the same technologies as bundling a JavaScript project, while also adding some middleware to transpile each module. Also note that I only chose this particular question as a duplicate because you _linked it in your answer_. – E_net4 Jul 03 '17 at 21:27
  • Yes, it's part of the answer, but it is far from the complete answer. Happy to collaborate with you on getting the perfect answer here, and appreciate the pointers. I really would rather not spend time defending my decision to document this specific problem I've run into. – Andrey Fedorov Jul 03 '17 at 21:30

1 Answers1

13

tsc is a compiler, not a bundler. This question expounds on bundling a bit.

While developing in TypeScript, gulp + gulp-browserify can provide a watcher and bundler.

With "module": "umd" in the compiler options, this gulpfile.js will do the rest:

var gulp = require('gulp');
var ts = require('gulp-typescript');
var browserify = require('gulp-browserify');

gulp.task('default', function () {
  return gulp.src('src/*.ts')
    .pipe(ts.createProject('tsconfig.json')())
    .pipe(browserify())
    .pipe(gulp.dest('dist/gen'));
});

gulp.task('watch', ['default'], function () {
  gulp.watch('src/*.ts', ['default']);
});
Andrey Fedorov
  • 9,148
  • 20
  • 67
  • 99