babel tsc webpack

我要用啥？
js的话：babel编译+webpack模块打包
ts的话：tsc编译成js+babel编译+webpack模块打包
浏览器情况：如果您的浏览器支持es6所有语法那么就可以只用webpack来处理模块部分，如果你的浏览器连模块部分也支持，那我觉得就不需要任何工具了。当然如果你只是写了es5的语法也没有模块，那么也不需要任何工具
服务器情况：如果你用的是node，那么node是直接支持js新老语法和模块化的，也不需要任何工具，顶多你需要做得就是用tsc将其转为js这一步就行了

工具干什么的？
tsc：typescript自己的cli，编译ts为js，如果编译成es6了，浏览器不兼容，他也不管，他只管编译成js。这个时候就需要babel出场了
babel：编译新版js适配浏览器的代码，如果有新语法 或者新api，他会将其新语法转成老语法，新api做垫片处理来兼容，总之他能搞定就对了，但是他无法处理模块化
webpack：主要用来处理模块化的，当然也能打包 压缩等。因为babel不会处理模块化部分比如import export require等

多管闲事的这些家伙们？

babel的进化
babel7已经可以直接支持编译tc了，这样一来tsc就没用用处了。
但是，tsc是微软自己发明支持人家ts的工具，编译出来的代码我看了下，要比babel干净，适合人看。
究其原因是因为tsc只管编译成js，而不管兼容性，而babel自然还要做语法转义和垫片处理

webpack的附加功能

webpack不仅仅能处理模块，它能够将这些[tsc、babel]工具以plugin或者loader的形式包容进去，这样一来，我们也可以不单独再额外的用babel去处理兼容问题了
我们可以在webpack里使用ts-loader或者只用babel-loader做处理

总结
所以最后的总结是：我们只用webpack就行了，就可以把js或者ts搞定，编译成浏览器可执行的代码

悄悄话

除了webpack能解决模块化方案，你的选择还有browserify，它和webpack处理模块化思路一样，都是预编译。
另外如果你知道sea.js和require.js那么用这种类库的方式来支持其对应的模块语法也行。

配置文件

webpack的ts-loader实际上就是调用了tsc命令  所以需要tsconfig.js配置文件
webpack的babel-loader实际上就是调用了babel命令，也需要babel.config.js配置文件，但是我看大家将配置整合在了webpack中，可能少建一个文件吧

如果单独使用babel工具去处理ts的话，是不需要额外的安装ts和创建tsconfig.json的，那么对应的babel-loader也一样，
大致意思就是说，使用我babel处理ts就不用再安装任何ts第三方相关的东西了，我自己知道怎么处理。