J'ai groupé plusieurs scripts dans un bundle.js mais j'ai des problèmes avec l'accès aux variables

Question

Je travaille sur un projet qui nécessite que tous les scripts soient incorporés dans un fichier bundle.js. J'ai réussi à faire cela avec browserify. Le problème ici est que, bien que chaque script inclus dans le fichier bundle.js puisse exécuter le code contenu parfaitement, il ne peut pas accéder aux variables globales provenant d'autres scripts. Comme dans cet exemple. Le premier script s'exécute parfaitement mais le second ne peut pas accéder à la variable tranchée même si le premier script s'exécute correctement et bien sûr, en premier lieu. Des idées pour résoudre ce problème?

Contenu du script first.js:

var a = ['zero', 'one', 'two', 'three']; 
var sliced = a.slice(1, 3); 


function logger() { 
    console.log(a);  // ['zero', 'one', 'two', 'three'] 
    console.log(sliced); // ['one', 'two'] 
    console.log("first.js script executed"); 
}; 

logger(); 

Contenu du script second.js:

console.log(sliced); 

Answer 1

Les modules ne partagent pas l'état global. Vous devez importer un module dans l'autre comme vous le feriez pour un script de noeud côté serveur. Passez ensuite les variables partagées. Le "regroupement" avec Browserify consiste à résoudre ces importations et à enregistrer les résultats dans un fichier, car le navigateur ne comprend pas la syntaxe d'importation CommonJS.

script.js

let script2 = require('./relative/path/to/script2.js'); 

let a = ['zero', 'one', 'two', 'three']; 
let sliced = a.slice(1, 3); 

function logger() { 
    console.log(a);  // ['zero', 'one', 'two', 'three'] 
    console.log(sliced); // ['one', 'two'] 
    console.log("first.js script executed"); 
}; 

logger(); 
script2(sliced) 

script2.js

function script2PublicFunction (sliced){ 
    console.log(sliced); 
} 

module.exports = script2PublicFunction;