en utilisant la bibliothèque sans 'require' lors de l'utilisation de CDN

Question

Je veux utiliser ce Chart JS reactJs wrapper library.

Je consomme le library from a CDN car je n'ai pas configuré de processus de regroupement de modules pour ce projet. Je sais que je pourrais, mais je me demandais comment utiliser cette bibliothèque sans utiliser require. Je pense qu'il serait utile pour une réponse d'expliquer comment faire cela pour les gens qui sont encore un peu mal à l'aise avec certaines des pratiques les plus récentes.

Dans l'exemple emballage graphique JS réagir, vous verrez qu'il montre:

var LineChart = require("react-chartjs").Line; 

var MyComponent = React.createClass({ 
    render: function() { 
    return <LineChart data={chartData} options={chartOptions} width="600" height="250"/> 
    } 
}); 

Sans require est là de toute façon d'attribuer la même valeur à LineChart lors de l'utilisation d'un CDN?

Answer 1

Regardez simplement le fichier fourni par le CDN et découvrez-le par vous-même.

Il a cette forme:

(function (root, factory) { 
    // Do some stuff to detect the environment 
    // When everything fails, just assign a global variable: 

    root["react-chartjs"] = factory(root["React"], root["ReactDOM"], root["Chart"]); 


})(this, function (...) { 
    .... 
}); 

Où root est l'objet global (window dans le navigateur) et factory est juste une fonction qui prend les dépendances et retourne la bibliothèque.

Pour LineChart:

window['react-chartjs'].Line 

Gardez à l'esprit factory a besoin React, ReactDOM et Chart. Et suppose que tout cela sera dans une variable globale nommée de la même manière.