如何使用 vite 启用"@babel/plugin-proposal-decorators"

Question

> src/App.jsx:22:0: error: Unexpected "@"
22 │ @observer
error when starting dev server:
Error: Build failed with 1 error:
src/App.jsx:22:0: error: Unexpected "@"

我使用观察者作为装饰器，然后我得到了错误。在文档中找不到启用此选项的地方。

Answer 1

Vite的react插件已经支持这个了。查看这里的文档https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react proposed-syntax。您不需要安装任何新的软件包。下面的配置应该可以工作，

import { defineConfig } from 'vite';
import reactSupport from '@vitejs/plugin-react';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [reactSupport({
babel: {
parserOpts: {
plugins: ['decorators-legacy', 'classProperties']
}
}
})],
server: {
port: 3000
}
});

Answer 2

我做了一个名为Vite -plugin-babel-dev的包，如果你不需要完整的react插件，它可以在Vite的开发部分运行babel。

安装@babel/plugin-proposal-decorators并像这样使用它:

import { defineConfig } from 'vite';
import babelDev from 'vite-plugin-babel-dev';
export default defineConfig({
plugins: [
babelDev({
babelConfig: {
plugin: ['@babel/plugin-proposal-decorators']
}
}),
// ...
],
// ...
})

编辑:这个包现在叫做vite-plugin-babel

Answer 3

不确定你是否在使用react，但你可以通过这里描述的react插件添加babel插件https://www.npmjs.com/package/@vitejs/plugin-react

建议的设置似乎要求您将文件重命名为.ts / .tsx。但是，以下内容允许我保留.js / .jsx扩展。

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
// https://www.npmjs.com/package/@vitejs/plugin-react
export default defineConfig({
plugins: [
react({
babel: {
plugins: [
["@babel/plugin-proposal-decorators", { legacy: true }],
[
"@babel/plugin-proposal-class-properties",
{ loose: true },
],
],
},
}),
],
});

Answer 4

import {defineConfig} from "vite"
import vue from '@vitejs/plugin-vue'
import { createHtmlPlugin } from 'vite-plugin-html';
import vueJsx from '@vitejs/plugin-vue-jsx';
export default defineConfig({
build: {
outDir: 'dist/'
},
plugins: [
vue(),
vueJsx(
{babelPlugins: [[
"@babel/plugin-proposal-decorators",
{ legacy: true },
]]}
)
],
})

Answer 5

不行。必须等待此问题解决:https://github.com/vitejs/vite/issues/2238