vite 中使用 decorators(装饰器) 私有属性或方法

在vite中使用装饰器。您需要进行一些配置。以下是一些基本的配置步骤：

1.安装相关插件

• 使用npm

npm install --save-dev @babel/core @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators @babel/preset-env @babel/plugin-transform-private-methods @rollup/plugin-babel

• 使用yarn

yarn add --save-dev @babel/core @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators @babel/preset-env @babel/plugin-transform-private-methods @rollup/plugin-babel

• 使用pnpm

pnpm install --save-dev @babel/core @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators @babel/preset-env @babel/plugin-transform-private-methods @rollup/plugin-babel

2.在项目根文件创建 .babelrc

{
    "presets": ["@babel/preset-env"],
    "plugins": [
        ["@babel/plugin-proposal-decorators", { "legacy": true }],
        ["@babel/plugin-proposal-class-properties", { "loose": false }],
        ["@babel/plugin-transform-private-methods", { "loose": false }] // 需要使用私有属性或者方法 loose改为true
    ]
}
  

3.在vite.config.js中配置如下

import { defineConfig } from 'vite';
import babel from "@rollup/plugin-babel";

export default defineConfig({
  plugins: [
    babel({
        babelHelpers: 'bundled', // 显式配置 babelHelpers 选项  'bundled' 或 'runtime'
        plugins: [
          ["@babel/plugin-proposal-decorators", { "legacy": true }],
          "@babel/plugin-proposal-class-properties"，
         // @babel/plugin-transform-private-methods // 需要使用私有属性或者方法 解开
        ]
      })
  ]
});