javascript 如何使用vite启用“@babel/plugin-proposal-decorators”

iklwldmw  于 2024-01-05  发布在  Java
关注(0)|答案(7)|浏览(335)
  1. > src/App.jsx:22:0: error: Unexpected "@"
  2. 22 @observer
  3. error when starting dev server:
  4. Error: Build failed with 1 error:
  5. src/App.jsx:22:0: error: Unexpected "@"

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

mwngjboj

mwngjboj1#

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

  1. import { defineConfig } from 'vite';
  2. import reactSupport from '@vitejs/plugin-react';
  3. // https://vitejs.dev/config/
  4. export default defineConfig({
  5. plugins: [reactSupport({
  6. babel: {
  7. parserOpts: {
  8. plugins: ['decorators-legacy', 'classProperties']
  9. }
  10. }
  11. })],
  12. server: {
  13. port: 3000
  14. }
  15. });

字符串

展开查看全部
lnvxswe2

lnvxswe22#

我做了一个名为vite-plugin-babel-dev的软件包,如果你不需要完整的react插件,它可以在Vite的开发部分运行babel。
安装@babel/plugin-proposal-decorators并像这样使用它:

  1. import { defineConfig } from 'vite';
  2. import babelDev from 'vite-plugin-babel-dev';
  3. export default defineConfig({
  4. plugins: [
  5. babelDev({
  6. babelConfig: {
  7. plugin: ['@babel/plugin-proposal-decorators']
  8. }
  9. }),
  10. // ...
  11. ],
  12. // ...
  13. })

字符串
编辑:该软件包现在称为vite-plugin-babel

展开查看全部
polkgigr

polkgigr3#

不确定你是否在使用react,但你可以通过这里描述的react插件https://www.npmjs.com/package/@vitejs/plugin-react添加babel插件。
建议的安装程序似乎要求您将文件重命名为.ts / .tsx。然而,以下内容允许我保留.js / .jsx扩展名。

  1. import { defineConfig } from 'vite'
  2. import react from '@vitejs/plugin-react'
  3. // https://vitejs.dev/config/
  4. // https://www.npmjs.com/package/@vitejs/plugin-react
  5. export default defineConfig({
  6. plugins: [
  7. react({
  8. babel: {
  9. plugins: [
  10. ["@babel/plugin-proposal-decorators", { legacy: true }],
  11. [
  12. "@babel/plugin-proposal-class-properties",
  13. { loose: true },
  14. ],
  15. ],
  16. },
  17. }),
  18. ],
  19. });

字符串

展开查看全部
uklbhaso

uklbhaso4#

  1. import {defineConfig} from "vite"
  2. import vue from '@vitejs/plugin-vue'
  3. import { createHtmlPlugin } from 'vite-plugin-html';
  4. import vueJsx from '@vitejs/plugin-vue-jsx';
  5. export default defineConfig({
  6. build: {
  7. outDir: 'dist/'
  8. },
  9. plugins: [
  10. vue(),
  11. vueJsx(
  12. {babelPlugins: [[
  13. "@babel/plugin-proposal-decorators",
  14. { legacy: true },
  15. ]]}
  16. )
  17. ],
  18. })

字符串

展开查看全部
gkl3eglg

gkl3eglg5#

这是一个轻微的变化,但如果你使用Vite和Preact,以及@preact/preset-vite,那么你需要这样做:

  1. npm install --save-dev @babel/plugin-proposal-decorators
    1.在vite.config.ts中,添加以下内容:
  1. plugins: [
  2. preact({
  3. babel: {
  4. plugins: [
  5. ["@babel/plugin-proposal-decorators", { version: "2023-05" }],
  6. ],
  7. },
  8. }),
  9. ],

字符串
您可能不需要设置显式版本,但在我的情况下,必须启用此错误:The decorators plugin requires a 'decoratorsBeforeExport' option

展开查看全部
uqzxnwby

uqzxnwby6#

tsDecorators参数添加到vite.config.ts中的React插件列表:

  1. import { defineConfig } from 'vite'
  2. import react from '@vitejs/plugin-react-swc'
  3. export default defineConfig({
  4. plugins: [react({ tsDecorators: true })],
  5. })

字符串

pw9qyyiw

pw9qyyiw7#

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

相关问题