JavaScript项目中避免Vite的类字段转换

通过优化解决方案避免 Vite 中的类字段转换

以下解决方案演示了如何使用 JavaScript 和自定义配置设置来调整 Vite 的构建过程以避免类字段转换。

import { defineConfig } from 'vite';
import copy from 'rollup-plugin-copy';
import { svelte } from '@sveltejs/vite-plugin-svelte';
import path from 'path';

export default defineConfig({
  resolve: {
    alias: {
      // Define your custom aliases here
    },
  },
  build: {
    outDir: 'dist',
    emptyOutDir: true,
    minify: false,
    lib: {
      name: 'animabf',
      entry: 'src/animabf.mjs',
      formats: ['es'],
    },
    rollupOptions: {
      output: {
        preserveModules: true,
        preserveModulesRoot: 'src',
        entryFileNames: ({ name: fileName }) => {
          return `${fileName}.js`;
        },
        assetFileNames: 'animabf.[ext]'
      }
    }
  },
  plugins: [
    svelte(),
    copy({ /* Specify your file copying rules */ })
  ]
});

模块化方法：使用 Babel 避免类字段转换

该解决方案演示了如何使用 Babel 通过创建自定义 Babel 配置来防止 Vite 转换类字段。

// Install Babel and necessary presets/plugins
// npm install --save-dev @babel/core @babel/preset-env

module.exports = {
  presets: [
    ['@babel/preset-env', {
      targets: { esmodules: true }, // Adjust for desired compatibility
      useBuiltIns: 'usage',
      corejs: 3
    }]
  ],
  plugins: [
    '@babel/plugin-syntax-class-properties'
  ]
};

自定义 jsconfig.json 以更好地控制类字段

该方案修改了jsconfig.json来控制JavaScript文件的编译方式，确保Vite不会对类字段进行不必要的转换。

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": false,
    "lib": ["dom", "dom.iterable", "esnext"],
    "moduleResolution": "node",
    "esModuleInterop": true,
    "allowJs": true,
    "checkJs": true,
    "strict": true,
    "strictNullChecks": true,
  }
}

关于Vite类字段转换的常见问题

1. 什么是 useDefineForClassFields 选项做什么？
2. 这个设置在 jsconfig.json 控制在构建期间如何定义类字段。将其设置为 false 可以避免使用 Object.defineProperty，保持字段的原始形式。
3. 如何 preserveModules Rollup 中的选项帮助？
4. 通过启用 preserveModules，确保Vite在构建过程中不会压扁模块结构。这对于模块边界必须保持完整的项目（例如插件）至关重要。
5. 目的是什么 @babel/plugin-syntax-class-properties？
6. 这个 Babel 插件允许在不转换的情况下使用类属性。它确保与需要本机类语法的系统的兼容性。
7. Vite可以同时处理ES模块和CommonJS吗？
8. 是的，随着 esModuleInterop 选项，Vite 可以在 ES 模块和 CommonJS 之间进行互操作，从而更轻松地将遗留代码与现代模块集成。
9. 为什么类字段转换会导致 FoundryVTT 出现问题？
10. FoundryVTT 期望类字段以特定方式初始化。 Vite 的转换改变了这种行为，导致 FoundryVTT 使用插件的方式发生冲突。

关于管理阶级领域转型的最终想法

使用 Vite 时，管理类字段的转换方式对于确保与 FoundryVTT 等系统的兼容性至关重要。通过对配置进行小而重要的调整（例如禁用类字段的转换），您可以避免这些问题。

充分了解每个设置如何影响最终输出以及与消费平台的交互非常重要。利用 Babel 插件或 Rollup 配置提供了解决转换问题的有效策略，确保无缝插件或扩展集成。