如何使用 vite 启用“@babel/plugin-proposal-decorators”
How do i enable "@babel/plugin-proposal-decorators" with vite
> 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 "@"
我使用观察者作为装饰器然后我得到了错误。在文档中找不到启用此选项的位置。
不,你不能。必须等待此问题解决:https://github.com/vitejs/vite/issues/2238
不确定您是否使用 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 },
],
],
},
}),
],
});
Vite的react插件已经支持了。
在这里查看文档
https://github.com/vitejs/vite/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
}
});
我制作了一个名为 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
> 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 "@"
我使用观察者作为装饰器然后我得到了错误。在文档中找不到启用此选项的位置。
不,你不能。必须等待此问题解决:https://github.com/vitejs/vite/issues/2238
不确定您是否使用 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 },
],
],
},
}),
],
});
Vite的react插件已经支持了。 在这里查看文档 https://github.com/vitejs/vite/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
}
});
我制作了一个名为 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