Vite + Vue3 + Typescript项目，如何引入ES2020语法

前言

最近这段时间，我正在将公司原来的组件包（基于Vue2、Jsx）升级到基于Vue3、Vite、Typescript。顺便在新项目中使用最新的ES语法，比如optional-chaining，让你不用再去判断某对象A是否存在，存在才能继续获取它的属性

老代码写法：

if (A) {
	const { attr1 } = A
}

使用optional-chaining的写法：

A?.attr1

很酷，对吧？尤其是对象层级很深时，这些的写法更方便了不少。

我在该项目下添加了babel.config.js，代码如下所示：

但是，出现下图错误：

无法识别?.，该如何解决呢？

解决办法

在vite.config.ts里添加如下代码：

import vue from '@vitejs/plugin-vue';
export default {
	plugins: [
		vue({
	      include: [/\.vue$/, /\.md$/, /\.tsx$/],
	      target: 'chrome70',
	      babel: {
	        plugins: [
	          '@babel/plugin-proposal-optional-chaining',
	          '@babel/plugin-transform-object-assign',
	          '@babel/plugin-proposal-object-rest-spread',
	          '@babel/plugin-proposal-export-default-from',
	          '@babel/plugin-proposal-export-namespace-from',
	          '@babel/plugin-proposal-class-properties',
	          '@babel/plugin-syntax-dynamic-import',
	          '@babel/plugin-transform-runtime'
	        ],
	      }
	    })
	]
}

注意：include里一定要包含你需要babel转译的文件，否则无法识别tsx文件里的es2020语法

再次运行，错误已消失