Vue3/Vite : externaliser les modules

Question

J'essaie de hacher une chaîne en utilisant crypto

hachage de fonction async (jeton) {
    const data = nouveau TextEncoder().encode(jeton)
    const byteHash = wait crypto.subtle.digest("SHA-256", données)
    // ^ l'erreur ci-dessous est renvoyée ici

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

    retourner hexHash
}
≪/pré>
Pour autant que je sache, crypto est désormais disponible dans les navigateurs, il n'est donc pas nécessaire d'utiliser browserify 
Cependant, j'ai rencontré l'erreur suivante dans la console du navigateur : 
Erreur : le module "crypto" a été externalisé pour des raisons de compatibilité avec le navigateur. Impossible d'accéder à "crypto.subtle" dans le code client.
≪/pré>
Je comprends cette erreur comme suit : "Vite est configuré pour externaliser le module crypto pendant le processus de construction." Mais je ne trouve pas un tel paramètre dans mon vite.config.js : 
// Plugins :
importer la vue depuis '@vitejs/plugin-vue'
importer vuetify depuis 'vite-plugin-vuetify'

// Utilitaires :
importer {defineConfig} depuis 'vite'
importer { fileURLToPath, URL } depuis 'node:url'

// https://vitejs.dev/config/
exporter la définition par défaut ({
  plugins : [
    vue(),
    // https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
    vuetify({
      autoImport : vrai
    })
  ],
  définir : { 'process.env' : {} },
  résoudre: {
    pseudo : {
      '@' : fileURLToPath(nouvelle URL('./src', import.meta.url))
    },
    extensions : ['.js', '.json', '.jsx', '.mjs', '.ts', '.tsx', '.vue']
  },
  serveur : {
    port : 3000
  },
  test: {
    setupFiles : ['../vuetify.config.js'],
    dépôts : {
      en ligne : ['vuetify']
    },
    globales : vrai
  }
})
≪/pré>
Existe-t-il des paramètres par défaut Vite « intégrés » qui pourraient provoquer ce problème ? Ce problème est-il configuré ailleurs ? Comment puis-je résoudre ce problème et utiliser le module crypto 
            

Answer 1

Le problème est que NodeJS et les navigateurs tous deux ont un module appelé crypto (qui implémente le standard crypto的模块（实现了webcrypto标准），它们是兼容的，但需要以不同的方式访问，因为在浏览器中它是由不存在于NodeJS中的windowwebcrypto

) et ils sont compatibles mais doivent être accessibles de différentes manières car dans le navigateur C'est fourni par un contexte

qui n'existe pas dans NodeJS. window

Si vous travaillez directement dans le navigateur, vous ne verrez pas la différence car

est le contexte par défaut. crypto，因此会抛出错误。它不知道/不关心这个模块在浏览器中也存在，但是作为window.crypto

Mais Vite fonctionne dans le contexte de NodeJS et il pense (à juste titre) que ce module n'est pas disponible

dans le navigateur. vite.config.js

Peut-être qu'il peut être configuré dans

, mais je ne le connais pas très bien.

J'ai trouvé la solution suivante, qui fonctionne dans les deux environnements :

function getCrypto() {
  try {
    return window.crypto;
  } catch {
    return crypto;
  }
}

async function hash(token) {
  const compatibleCrypto = getCrypto();

  const data = new TextEncoder().encode(token);
  const byteHash = await compatibleCrypto.subtle.digest('SHA-256', data);

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

  return hexHash;
}

🎜Maintenant, cette fonction fonctionne dans les deux environnements. 🎜