Définir globales lors de la mise en bundle à umd ou commonjs

Question

J'ai une application côté client qui utilise certaines propriétés globales du navigateur telles que Element ou document.

Je voudrais lancer mon application dans Node.js aussi bien et je suis actuellement remplaçant ces GLOBALS avec le domino dom implementation dans mon serveur comme ceci:

const domino = require("domino"); 

const domimpl = domino.createDOMImplementation(); 
const document = domimpl.createHTMLDocument(); 

Object.assign(global, Element: domino.impl.Element, document}; 

const myApp = require('my-app'); 

J'utilise actuellement Rollup pour regrouper différentes versions de my-app, comment puis-je avoir rollup le faire pour moi automatiquement pour la _server version de my-app afin que les consommateurs de my-app n'ont pas à faire cela?

Je pensais écrire mon propre plugin de rollup, mais j'ai l'impression que l'écrasement des globals semble une pratique courante.

Answer 1

TLDR; Utilisez un fichier d'entrée distinct au lieu d'un plug-in de rollup.

Il suffit d'ajouter les éléments suivants au lieu d'un plugin Rollup

if (typeof window ==== "undefined") { 
    const domino = require("domino");  
    const domimpl = domino.createDOMImplementation(); 
    const document = domimpl.createHTMLDocument();  
    Object.assign(global, Element: domino.impl.Element, document}; 
} 

// my-app code 

Vous pourriez être inquiet domino entrer le code côté client. Pour résoudre ce problème, utilisez des paquets séparés pour le serveur et le client, enveloppez le code moqueur ci-dessus dans un fichier séparé et utiliser les éléments suivants dans votre fichier principal de l » de my-app signifiait pour le faisceau de serveur, une approche similaire à comment réagissez ships production and development bundles - conditional imports.

serveur fichier principal

require(‘./globals-mocking’); 
// my-app client code 

fichier principal client

// my-app client code only 

fichier principal package

if (SERVER_ONLY) { 
    module.exports = require('./my-app-server.js'); 
} else { 
    module.exports = require('./my-app-client.js'); 
} 

Utilisez le replace plugin du correctif cumulatif et définissez SERVER_ONLY (https://github.com/rollup/rollup-plugin-replace#usage) pour l'entrée de serveur uniquement. Si vous utilisez UglifyJS ou un outil simlilar qui élimine le code mort, vous n'aurez pas domino et le code du serveur dupliqué.

EDIT: A noté un problème mineur. La condition devrait être if (SERVER_ONLY) {. Utilisez la définition suivante avec le fichier d'entrée du serveur.

plugins: [ 
    replace({ 
     SERVER_ONLY: JSON.stringify(true) 
    }) 
    ]