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 ロールアップのオプション ヘルプ?
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 プラグインまたはロールアップ構成を活用すると、変換の問題を解決する効果的な戦略が提供され、プラグインまたは拡張機能のシームレスな統合が保証されます。