我要用啥?
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第三方相关的东西了,我自己知道怎么处理。

babel tsc webpack的更多相关文章

  1. 【长文详解】TypeScript、Babel、webpack以及IDE对TS的类型检查

    只要接触过ts的前端同学都能回答出ts是js超集,它具备静态类型分析,能够根据类型在静态代码的解析过程中对ts代码进行类型检查,从而在保证类型的一致性.那,现在让你对你的webpack项目(其实任意类 ...

  2. 使用 Babel + React + Webpack 搭建 Web 应用

    话不说直接上正题. 环境搭建 Babel--目前浏览器对于ES6的语法解析支持度还不高,所以要通过转码在编译,所以在使用ES6之前要安装Babel,之前安装的时候遇到了一些问题但是没有全部记录下来,现 ...

  3. ES6项目构建(babel+gulp+webpack)

    (一)基础架构 (二)任务自动化(gulp) (三)编译工具(babel,webpack) (四)代码实现 一.基础构架 1.app : 放置前端代码 css : css文件 js : js文件 cl ...

  4. Babel 处理 webpack 无法处理的 ES 语法(Babel 6.x 和 Babel 7.x 有区别)(二)

    //这是main.js是我们项目的js入口文件 //1:a导入jQuery,引入jQuery包用$变量接收,此方法与node中 const $ = require('jquery') 同 //此为ES ...

  5. week05 codelab01 Babel ES6 webpack Nodejsserver等

    Babel 他出现的原因就是很多浏览器还未完全兼容ES6 需要将你写的ES6的内容转换成ES5让浏览器兼容运行 ES5和ES6相比出现很多新内容 比如拼接字符串 ES6可以` ` 里面如果引用变量就用 ...

  6. 使用webpack、babel、react、antdesign配置单页面应用开发环境

    这是Webpack+React系列配置过程记录的第一篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...

  7. 前端笔记之ES678&Webpack&Babel(下)AMD|CMD规范&模块&webpack&Promise对象&Generator函数

    一.AMD和CMD规范(了解) 1.1传统的前端开发多个js文件的关系 yuan.js中定义了一个函数 function mianji(r){ return 3.14 * r * r } main.j ...

  8. webpack.config.js配置遇到Error: Cannot find module '@babel/core'&&Cannot find module '@babel/plugin-transform-react-jsx' 问题

    下文是网上找到的方法,是因为版本冲突的原因,参照后安装7版本解决 cnpm install -D babel-loader@ babel-core babel-preset-env 一. 问题描述 在 ...

  9. webpack中babel配置 --- runtime-transform和babel-pollfill

    webpack - babel配置 babel是一个javascript编译器,是前端开发中的一个利器.它突破了浏览器实现es标准的限制,使我们在开发中可以使用最新的javascript语法. 通过构 ...

随机推荐

  1. CNS、ENS和PNS的发育过程

    central nervous system (CNS) peripheral nervous system (PNS) enteric nervous system (ENS) 做这部分的科研必须要 ...

  2. vim 外部粘贴代码,如何保持原格式,而不持续缩进

    主要内容:使用“:set paste” 来实现vim 按照源文件格式复制 在vim 使用中偶尔要复制外部代码,常常出现不停缩进的问题: 怎么避免此种情况出现呢 可以在命令模式中使用“:set past ...

  3. 固定权重 关于Mxnet的一些基础知识理解(1)

    https://blog.csdn.net/pandav5/article/details/53993684 (1)Mxnet的数据格式为NDArray,当需要读取可观看的数据,就要调用: numpy ...

  4. Jmeter之__CSVRead随机读取变量

    背景:当你需要从一些数据中随机的取值用的话可以用这个函数来实现__CSVRead __CSVRead函数用于对脚本进行参数化,当脚本中不同变量需要不同参数值时,可以考虑__CSVRead函数. _CS ...

  5. zookeeper在windows的常用命令

    首先简要讲下安装 安装jdk 安装Zookeeper. 在官网http://zookeeper.apache.org/下载zookeeper.我下载的是zookeeper-3.4.6版本. 解压zoo ...

  6. ES6深入浅出-4 迭代器与生成器-2.Symbol 和迭代器

    symbol https://zhuanlan.zhihu.com/p/22652486 Es5中的数据类型,所有的复杂类型都是对象类型. ES6里面增加了symbol类型,用处不多. https:/ ...

  7. python之参数解析模块argparse

    2.7之后python不再对optparse模块进行扩展,python标准库推荐使用argparse模块对命令行进行解析. 简单入门 先来看个例子: argparse_test.py: import ...

  8. 安装私有docker仓库

    简介: 虽然国内已经有了很多docker加速镜像,以前用的daocloud,最近又找到了阿里云. 但是私有网络部署kubernetes,用不了加速镜像,还是自己部署一个比较好. 一:安装docker  ...

  9. lumen伪静态路由设置示例

    lumen路由文件中的配置: $app->get('info-{tid}.html', 'ThreadController@palmInfo'); 控制器中代码示例: public functi ...

  10. Java连接MongoDB示例

    示例代码: package com.zifeiy.snowflake.handle.etl.mongodb; import java.util.ArrayList; import java.util. ...