0 
 > 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 "@"

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

4

5 回答 5

1

如果你不需要完整的插件，我制作了一个名为vite-plugin-babel-devreact的包，它在 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

于 2022-01-12T15:23:02.830 回答
1

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
  }
});
于 2021-10-21T15:58:57.773 回答
1

不确定您是否正在使用 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 },
                    ],
                ],
            },
        }),
    ],
});
于 2021-09-25T11:42:03.510 回答
0

不，你不能。必须等待这个问题解决：https ://github.com/vitejs/vite/issues/2238

于 2021-03-30T03:55:57.507 回答
0

截止到今天的文档有一个专门针对这一点的部分，以及一个代码片段。

react({
  babel: {
    parserOpts: {
      plugins: ['decorators-legacy']
    }
  }
})
于 2022-02-04T07:50:50.700 回答