使用 Webpack 从零开始搭建 Vue3 + TS 开发环境（九）ES语法转换

1 引言

为了能够更好的理解webpack，特准备了这份从零开始开始搭建教程，不使用官方的脚手架，不使用预定义配置，完全从零开始搭建一个使用 Webpack5 构建的 Vue3 + TypeScript 的项目开发环境。这里讲解如何配置编译结果的版本规范。

在前面的文章中：我们的 tsconfig.json 中的配置：
“target”: “ES2020”,
“module”: “ES2020”,
这个配置表示我们使用ES2020的新特性，编译结果也是ES2020，这就导致一些旧的浏览器中或者浏览器还没来得及更新的情况下，我们的代码中所使用的新特性将无法正确的执行。
所以本章接将讲述如何做语法转换。

关键词

• Webpack5
• Vue3
• TypeScript
• JavaScript

文章列表

• 使用 Webpack 从零开始搭建 Vue3 + TS 开发环境（一）搭建编译环境
• 使用 Webpack 从零开始搭建 Vue3 + TS 开发环境（二）配置HTML模板
• 使用 Webpack 从零开始搭建 Vue3 + TS 开发环境（三）添加Vue环境
• 使用 Webpack 从零开始搭建 Vue3 + TS 开发环境（四）添加Vue的样式
• 使用 Webpack 从零开始搭建 Vue3 + TS 开发环境（五）添加Less支持
• 使用 Webpack 从零开始搭建 Vue3 + TS 开发环境（六）添加Vue的TS支持
• 使用 Webpack 从零开始搭建 Vue3 + TS 开发环境（七）添加静态文件
• 使用 Webpack 从零开始搭建 Vue3 + TS 开发环境（八）不同环境的配置
• 使用 Webpack 从零开始搭建 Vue3 + TS 开发环境（九）ES语法转换

2 TSC编译的语法转换方式

将配置中的module改成对应的目标版本即可，额，是不是很魔性。。。。。其实就是TypeScript本身的编译器已经做好了所有的事情，只需要你改个参数就行了。

3 使用babel来编译

… 未来如果有时间在写了