Vue3/Vite: モジュールの外部化

Question

Vue 3 アプリケーションで crypto を使用して文字列をハッシュしようとしています。

非同期関数ハッシュ (トークン) {
    const データ = new TextEncoder().encode(トークン)
    const byteHash = await crypto.subtle.digest("SHA-256", データ)
    // ^ ここで以下のエラーがスローされます

    const arrayHash = Array.from(new Uint8Array(byteHash))
    const hexHash = arrayHash.map(b => b.toString(16).padStart(2, '0')).join('').toLocaleUpperCase()

    ヘキサハッシュを返す
}

私の知る限り、crypto は現在ブラウザで利用できるため、代わりに browserify を使用する必要はありません。

しかし、ブラウザのコンソールで次のエラーが発生しました:

エラー: モジュール「crypto」はブラウザ互換性のために外部化されています。クライアント コードの「crypto.subtle」にアクセスできません。

このエラーは、「Vite はビルド プロセス中に crypto モジュールを外部化するように構成されています。」と理解しています。しかし、私の vite.config.js にはそのような設定が見つかりません:

// プラグイン:
「@vitejs/plugin-vue」から vue をインポートします
「vite-plugin-vuetify」から vuetify をインポートします

// ユーティリティ:
「vite」から {defineConfig} をインポートします
import { fileURLToPath, URL } from 'node:url'

// https://vitejs.dev/config/
デフォルトのdefineConfigをエクスポート({
  プラグイン: [
    vue()、
    // https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
    vuetify({
      自動インポート: true
    })
  ]、
  定義: { 'process.env': {} },
  解決する： {
    エイリアス: {
      '@': fileURLToPath(新しい URL('./src', import.meta.url))
    }、
    拡張子: ['.js'、'.json'、'.jsx'、'.mjs'、'.ts'、'.tsx'、'.vue']
  }、
  サーバー: {
    ポート: 3000
  }、
  テスト： {
    setupFiles: ['../vuetify.config.js'],
    デプス: {
      インライン: ['vuetify']
    }、
    グローバル: true
  }
})

この問題を引き起こす可能性のある「組み込みの」Vite デフォルト設定はありますか?この問題は別の場所で設定されていますか?この問題を解決し、アプリケーションで crypto モジュールを使用するにはどうすればよいですか?

Answer 1

問題は、NodeJS とブラウザ の両方に crypto (webcrypto 標準を実装する) というモジュールがあり、互換性がありますが、ブラウザでは NodeJS に存在しない window コンテキストによって提供されるため、アクセス方法が異なります。

ブラウザで直接作業する場合は、window がデフォルトのコンテキストであるため、違いはわかりません。

しかし、Vite は NodeJS のコンテキストで動作しており、このモジュールがブラウザでは crypto として利用できないと (正しく) 認識しているため、エラーがスローされます。このモジュールがブラウザーにも存在するかどうかは知りませんが、window.crypto として存在します。

おそらく vite.config.js で設定できるかもしれませんが、私はよく知りません。

私は、両方の環境で機能する次の解決策を思いつきました:

リーリー リーリー

現在、この関数は両方の環境で動作します。